Glitchy Synthwave SVG Sun animation — a free Bootstrap 5 utility snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
1<svg viewBox="0 0 200 200">
2 <defs>
3 <linearGradient id="sunGradient" gradientTransform="rotate(90)">
4 <stop offset="0%" stop-color="#ffd319" />
5 <stop offset="100%" stop-color="#ff2975" />
6 </linearGradient>
7 <filter id="shadow">
8 <feDropShadow dx="0.2" dy="6" stdDeviation="5" flood-color="var(--pink)" flood-opacity="0.3" />
9 <feDropShadow dx="0.2" dy="-6" stdDeviation="5" flood-color="var(--yellow)" flood-opacity="0.3" />
10 </filter>
11 </defs>
12
13 </svg>
14
15
16
17<script type="module">
18 import SimplexNoise from "https://cdn.skypack.dev/simplex-noise@2.4.0";
19 import { SVG } from "https://cdn.skypack.dev/@svgdotjs/svg.js";
20
21 const simplex = new SimplexNoise();
22
23 const width = 200;
24 const height = 200;
25
26 const svg = SVG("svg");
27
28 const mask = svg.mask();
29 mask.attr("id", "gridMask");
30
31 const res = 20;
32 const cols = 1 + width / res;
33 const rows = 1 + height / res;
34
35 const inc = 0.075;
36 let zOff = 0;
37
38 const maskRects = [];
39 const displayRects = [];
40
41 const grid = svg.group();
42
43 const stars = svg.group();
44 stars.attr("mask", "url(#gridMask)");
45
46 for (let i = 0; i < 60; i++) {
47 stars.
48 circle(Math.random() * 2).
49 cx(Math.random() * 200).
50 cy(Math.random() * 200).
51 fill("#fff");
52 }
53
54 for (let x = 0; x < cols; x++) {
55 svg.
56 line(x * res, 0, x * res, 200).
57 stroke({
58 width: 2,
59 color: "var(--pink-light)"
60 }).
61
62 attr("vector-effect", "non-scaling-stroke");
63 }
64
65 svg.
66 circle(150).
67 cx(100).
68 cy(100).
69 fill("#F8DA28").
70 attr("mask", "url(#gridMask)").
71 attr("fill", "url(#sunGradient)").
72 attr("filter", "url(#shadow)");
73
74 for (let i = 0; i < cols; i++) {
75 maskRects[i] = [];
76 displayRects[i] = [];
77 for (let j = 0; j < rows; j++) {
78 maskRects[i].push(
79 mask.
80 rect(res, res).
81 x(i * res).
82 y(j * res).
83 stroke({
84 width: 2,
85 color: "#000"
86 }).
87
88 fill("#fff").
89 attr("vector-effect", "non-scaling-stroke"));
90
91 displayRects[i].push(
92 grid.
93 rect(res, res).
94 x(i * res).
95 y(j * res).
96 stroke({
97 width: 2,
98 color: "var(--pink-light)"
99 }).
100
101 fill("transparent").
102 attr("vector-effect", "non-scaling-stroke"));
103
104 }
105 }
106
107 (function animate() {
108 let xOff = 0;
109
110 for (let x = 0; x < cols; x++) {
111 xOff += inc;
112 let yOff = 0;
113 for (let y = 0; y < rows; y++) {
114 const noise = simplex.noise3D(xOff, yOff, zOff);
115
116 if (noise > -0.25) {
117 maskRects[x][y].opacity(1);
118 displayRects[x][y].opacity(1);
119 } else {
120 maskRects[x][y].opacity(0);
121 displayRects[x][y].opacity(0);
122 }
123
124 yOff += inc;
125 }
126 }
127
128 zOff += 0.015;
129
130 requestAnimationFrame(animate);
131 })();
132
133 function map(n, start1, end1, start2, end2) {
134 return (n - start1) / (end1 - start1) * (end2 - start2) + start2;
135 }
136 </script>
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.