What you are looking at
Two independent techniques, stacked.
The hero is two things sitting on top of each other. In front, a mark drawn with elements and CSS, transparent because nothing paints a background behind it. Behind it, an animated background repainted on a canvas about sixty times a second.
Neither layer knows the other exists. The browser composites them, top over bottom. That separation is the whole trick: swap what sits behind the mark and its transparency becomes obvious or invisible, with no change to the mark itself.
<div class="hero">
<canvas class="backdrop"></canvas> <!-- layer 1: animated background -->
<div class="mark"></div> <!-- layer 2: transparent, drawn in CSS -->
</div>
.hero { position: relative; }
.backdrop, .mark { position: absolute; inset: 0; } /* stacked, top over bottom */Two absolutely-positioned layers in the same box. The browser composites them top over bottom, and neither knows the other exists. Everything below is just what fills each layer.
Technique 1
A transparent mark, drawn in CSS.
The orb is not an image or a video. It is a handful of ordinary elements positioned with CSS, so every pixel it does not cover stays see-through. That is why swapping the layer underneath makes it appear to float.
Transparent by default
Nothing paints behind it
A drawn element carries no baked-in background. There is no alpha channel to encode, no file to export, and nothing to download. The transparency is simply the absence of paint, which is why a moving or checkerboard layer behind it reveals the see-through instantly and a solid layer hides it.
One repeated trick
The orbit is a single CSS animation
Each rune sits in a full-size layer rotated to its own angle, with the glyph pinned near the top edge. Rotate the layer and the glyph rides around the circle; spin the whole ring on one keyframe and they all orbit together. A second rotation on the glyph keeps it upright as it travels. The centre is the Mannaz mark; the seven around it are Elder Futhark.
<div class="band">
<i style="--a:0deg"><b>ᚠ</b></i> <!-- one per rune; --a is its angle -->
<i style="--a:51deg"><b>ᚨ</b></i>
</div>
.band { animation: spin 32s linear infinite; } /* spin the whole ring */
.band i { transform: rotate(var(--a)); } /* place each rune on the circle */
.band b { transform: rotate(calc(-1 * var(--a))); } /* keep the glyph upright */The orbit is one trick repeated: a full-size layer rotated to each rune angle, the glyph pinned near the top edge, and a single keyframe spinning the whole ring.
Technique 2
An animated background, painted by code.
The backdrop is a canvas that JavaScript repaints in a loop. It is built from four ingredients, each one a control in the live demo above, so the exact contribution of each is easy to see.
Radial blobs
The raw material
A few soft radial gradients, each drifting on its own slow sine and cosine path. On their own they are just coloured clouds. Everything else is how they get combined.
Additive glow
Light that adds up
Drawn with a lighter composite operation, so where two colours overlap their light adds and brightens, the way stage lights do. Turn it off and they paint flat and opaque, which looks muddy.
Soft blur
Melting them together
An optional canvas blur that fuses the gradients into one wash. It is the only ingredient that re-runs a blur every frame, so it is also the only one with a real per-frame CPU cost. This example leaves it off; the gradients are soft enough on their own.
Swoosh
A sense of direction
One wide bezier stroke with a gradient running along it, sweeping slowly across the hero. It gives the composition a diagonal flow that the round blobs alone do not.
const ctx = canvas.getContext('2d');
function frame(t) {
ctx.fillStyle = ink; // near-black ground
ctx.fillRect(0, 0, W, H);
ctx.globalCompositeOperation = 'lighter'; // blobs add up as light
for (const b of blobs) drawRadialGradient(b, t);
if (onScreen) requestAnimationFrame(frame); // stops when scrolled away
}The whole animated background is this loop: fill the ground, switch to additive blending, and paint a few drifting radial gradients. It downloads as a few lines of JavaScript and never becomes the largest element on the page.
When a real video earns its place
A transparent video is the right call for photographic motion a browser cannot draw.
The alpha-channel video technique is still worth knowing. It is simply the heavier tool, so it belongs where a drawn mark genuinely will not do.
What that involves
The cost of the video path
Transparency is baked into the file as an alpha channel, the same idea as a PNG, only moving.
Plain MP4 cannot carry alpha, so the clip is encoded twice: HEVC for Safari, VP9 for everyone else.
Most chips only hardware-decode opaque video, so alpha video usually decodes on the CPU every frame it plays.
At a small size that is nothing; full screen it is the difference between smooth and a warm phone.
If you use one, lazy-load it, keep it muted and inline, and set a poster, since that poster is what LCP measures.
<video autoplay loop muted playsinline preload="auto">
<source src="mark-hevc.mp4" type='video/mp4; codecs="hvc1"'> <!-- Safari / iOS -->
<source src="mark-vp9.webm" type="video/webm"> <!-- Chrome / FF / Edge -->
</video>If you do need a transparent video, this is the shape: two encodes of the same clip, HEVC first so Safari does not grab the WebM and fail. The browser plays the first source it can decode.
The rule of thumb
Draw it when you can. A transparent video is worth its weight only when nothing drawn will do.
A drawn mark and a canvas are both code: light to download, sharp at any size, and cheap while on screen. The video path is the heavier tool, and it earns that weight only for motion a browser cannot paint.
