Animated Electric Border CSS Card

This is an Animated Electric Border CSS Card. It utilizes an embedded SVG filter to render a dynamic, unstable boundary. Its function is to isolate data and establish a clear focal point. The effect is self-contained and persistent, demanding attention through continuous motion.

Specs

• Weight: ~3.5 KB.
• Dependencies: None.
• Browser Support: Modern browsers only (requires oklch() color function and complex SVG filters).

Anatomy

The component is built on independent structural and visual layers.

• HTML (Skeleton): Nested div elements act as a physical chassis. An inline <svg> holds the filter engine. This SVG does not render graphics; it strictly contains animation logic.
• CSS (Skin): Maps the SVG engine to the chassis via the filter: url(#turbulent-displace) property. CSS variables (--electric-border-color) control the theme centrally. Layering is handled via strict absolute positioning and overlay blend modes.
• JS (Nervous System): Absent. All animation is declarative and processed directly by the rendering engine.

Logic

The heart of the component is the displacement map primitive located inside the SVG definition.

<feDisplacementMap 
  in="SourceGraphic" 
  in2="combinedNoise" 
  scale="30" 
  xChannelSelector="R" 
  yChannelSelector="B" />

This instruction commands the renderer to take the original border (SourceGraphic) and distort its pixels. The distortion map (combinedNoise) is a turbulent, animated texture generated by preceding <feTurbulence> nodes. The scale attribute dictates the intensity, translating mathematical noise into a visible electric crackle on the screen.

Feel

The interaction is passive. The component does not react to the user; it simply exists. The motion is continuous, chaotic, yet contained within its strict physical boundary. It projects a sense of raw power and instability, effectively breaking the monotony of static UI elements.