There's this SVG filter trick that's been floating around, and honestly, it's one of those things that looks way more complicated than it actually is. Once you break it down, it's pretty clever.
Thanks to @BalintFerenczy for this beautiful effect. Check out the original tweet and the CodePen.
The Core Idea
The whole effect relies on something called a displacement map. Here's the gist: you take an image (or in our case, a border), and you use another image to push its pixels around. Wherever the "pusher" image is bright, pixels move one way. Where it's dark, they move the other way.
But we don't want static distortion. We want it to look alive. Electric. So we animate the thing doing the pushing.
Turbulence: Your New Best Friend
feTurbulence is an SVG filter primitive that generates procedural noise. It's the same kind of math used to create realistic clouds, fire, and water in video games. Perlin noise, if you want to get technical.
<feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="10" result="noise1" seed="1" />
The baseFrequency controls how "zoomed in" the noise is. Lower values = bigger, smoother blobs. Higher values = tighter, more chaotic patterns. numOctaves adds detail layers. More octaves = more complexity, but also more computation.
The Animation Trick
Here's where it gets interesting. We generate four separate noise patterns and animate their positions using feOffset:
<feOffset in="noise1" dx="0" dy="0" result="offsetNoise1">
<animate attributeName="dy" values="700; 0" dur="6s" repeatCount="indefinite" />
</feOffset>
Two patterns scroll vertically (one up, one down). Two scroll horizontally. When you blend them together, you get this churning, roiling motion. It's not random flicker—it's structured chaos.
The feComposite and feBlend operations combine these moving noise layers. Using color-dodge as the blend mode makes the bright areas really pop, which intensifies the electric feel.
Applying the Distortion
Finally, feDisplacementMap takes our original border and warps it according to the combined noise:
<feDisplacementMap in="SourceGraphic" in2="combinedNoise" scale="30" xChannelSelector="R" yChannelSelector="B" />
The scale value determines how aggressive the distortion is. 30 gives us a nice visible wobble without going overboard. The channel selectors (R for X displacement, B for Y) just pick which color channels from the noise control which direction of movement.
The Glow Stack
The electric border alone would look flat. The glow layers sell the effect.
We've got the main distorted border, then two additional borders on top with increasing blur:
.glow-layer-1 {
filter: blur(1px);
}
.glow-layer-2 {
filter: blur(4px);
}
These aren't distorted—they're static. But layered over the animated border, they create a soft halo that makes the whole thing feel luminous.
The Overlays
Two gradient overlays with mix-blend-mode: overlay add highlights. They're scaled up slightly and heavily blurred, so they spill outside the card boundaries. This creates that "light is escaping" vibe.
The background glow (filter: blur(32px)) sits behind everything at low opacity, casting a subtle colored shadow onto the dark background. It grounds the effect.
Why It Works
The human eye is drawn to movement and contrast. This effect has both. The border never sits still, and the glow creates strong contrast against the dark background.
And because the distortion is based on continuous noise rather than random jitter, it feels organic. Natural, almost. Like actual electricity arcing along a wire, not a GIF on loop.
Performance Note
This effect is GPU-accelerated in modern browsers, but it's not free. Four turbulence generators running simultaneously, blended together, feeding a displacement map—that's real work. On older devices or if you're running many of these, you might notice some heat.
For a single hero card? Totally fine. For a hundred items in a list? Maybe reconsider.
Original effect by @BalintFerenczy
Top comments (0)