Geometric Shapes Background
Outlined triangles, circles, squares, crosses and zigzags bob and turn in place on a dark field, each in a hue near your accent. Every shape is a tiny inline SVG with its own timing.
Also known as: animated geometric background css, outline shapes background, floating geometric shapes css.
HTML
<div class="bgx-geometric-shapes" aria-hidden="true"> <svg class="bgx-geometric-shapes-shape" viewBox="0 0 24 24" style="--x: 6%; --y: 12%; --s: 2.6em; --t: 5s; --d: -1s; --h: 0"><path d="M12 3.5 21 19H3Z" /></svg> <svg class="bgx-geometric-shapes-shape" viewBox="0 0 24 24" style="--x: 17%; --y: 58%; --s: 2.2em; --t: 6s; --d: -3s; --h: 60; --r: -60deg"><circle cx="12" cy="12" r="8.5" /></svg> <svg class="bgx-geometric-shapes-shape" viewBox="0 0 24 24" style="--x: 29%; --y: 20%; --s: 2em; --t: 4.6s; --d: -2s; --h: -50; --r: 90deg"><rect x="4" y="4" width="16" height="16" rx="1.5" /></svg> <svg class="bgx-geometric-shapes-shape" viewBox="0 0 24 24" style="--x: 40%; --y: 74%; --s: 1.8em; --t: 5.4s; --d: -4s; --h: 120; --r: 90deg"><path d="M12 4v16M4 12h16" /></svg> <svg class="bgx-geometric-shapes-shape" viewBox="0 0 24 24" style="--x: 51%; --y: 30%; --s: 3em; --t: 6.4s; --d: -1.5s; --h: 30; --r: -20deg"><path d="M2 15 6.5 9l4.5 6 4.5-6 4.5 6" /></svg> <svg class="bgx-geometric-shapes-shape" viewBox="0 0 24 24" style="--x: 63%; --y: 68%; --s: 2.8em; --t: 5.8s; --d: -2.6s; --h: -30; --r: 60deg"><path d="M12 2.5 20.2 7.25v9.5L12 21.5l-8.2-4.75v-9.5Z" /></svg> <svg class="bgx-geometric-shapes-shape" viewBox="0 0 24 24" style="--x: 75%; --y: 12%; --s: 1.8em; --t: 4.8s; --d: -0.5s; --h: 90; --r: 135deg"><path d="m6 6 12 12M18 6 6 18" /></svg> <svg class="bgx-geometric-shapes-shape" viewBox="0 0 24 24" style="--x: 87%; --y: 50%; --s: 2.4em; --t: 5.2s; --d: -3.6s; --h: 150; --r: -45deg"><path d="M12 3.5 21 19H3Z" /></svg> <svg class="bgx-geometric-shapes-shape" viewBox="0 0 24 24" style="--x: 3%; --y: 76%; --s: 1.4em; --t: 4.4s; --d: -2.2s; --h: -80"><circle cx="12" cy="12" r="8.5" /></svg> <svg class="bgx-geometric-shapes-shape" viewBox="0 0 24 24" style="--x: 25%; --y: 84%; --s: 1.5em; --t: 5s; --d: -0.8s; --h: 40; --r: -90deg"><path d="M12 2.5 20.2 7.25v9.5L12 21.5l-8.2-4.75v-9.5Z" /></svg> <svg class="bgx-geometric-shapes-shape" viewBox="0 0 24 24" style="--x: 70%; --y: 40%; --s: 1.2em; --t: 4.2s; --d: -1.8s; --h: 180"><circle cx="12" cy="12" r="8.5" /></svg> <svg class="bgx-geometric-shapes-shape" viewBox="0 0 24 24" style="--x: 93%; --y: 82%; --s: 1.5em; --t: 5.6s; --d: -4.4s; --h: -120; --r: -90deg"><rect x="4" y="4" width="16" height="16" rx="1.5" /></svg> <svg class="bgx-geometric-shapes-shape" viewBox="0 0 24 24" style="--x: 90%; --y: 6%; --s: 1.4em; --t: 4.9s; --d: -3s; --h: 200; --r: 45deg"><path d="M12 4v16M4 12h16" /></svg> </div>
CSS
.bgx-geometric-shapes {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background:
radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--c) 14%, transparent), transparent),
color-mix(in srgb, var(--c) 8%, #07080d);
}
.bgx-geometric-shapes-shape {
position: absolute;
top: var(--y);
left: var(--x);
width: var(--s);
height: var(--s);
fill: none;
stroke: oklch(from var(--c) calc(l + 0.08) c calc(h + var(--h)));
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.85;
animation: bgx-geometric-shapes-float var(--t) cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite alternate;
}
@keyframes bgx-geometric-shapes-float {
from { transform: translate(0, 0) rotate(0deg); }
to { transform: translate(var(--dx, 0.7em), var(--dy, -1.2em)) rotate(var(--r, 45deg)); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-geometric-shapes, .bgx-geometric-shapes *, .bgx-geometric-shapes::before, .bgx-geometric-shapes::after, .bgx-geometric-shapes *::before, .bgx-geometric-shapes *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.