Nice things with SVG

# SVG More about SVG. Note that the example code is written in JSX (or React), not ordinary HTML. # Animated Wires Make the line, using line or path . < svg viewBox = "0 0 50 50" className = "bg-neutral-900 max-w-[100px] mx-auto" > < g > < line x1 = "0" y1 = "0" x2 = "0" y2 = "50" stroke = "white" strokeWidth = "1" /> Make it a mask. < svg viewBox = "0 0 50 50" className = "bg-neutral-900 max-w-[100px] mx-auto" > < g > < rect x = "0" y = "0" width = "50" height = "10" fill = "red" mask = "url(#line)" /> < mask id = "line" > < line id = "" x1 = "0" y1 = "0" x2 = "0" y2 = "50" stroke = "white" strokeWidth = "1" /> Add animation. < svg viewBox = "0 0 50 50" className = "bg-neutral-900 max-w-[100px] mx-auto" > < g > < rect x = "0" y = "0" width = "50" height = "10" fill = "red" mask = "url(#animated_line)" style = {{ animation: "to-down linear infinite 2s" , }} /> < mask id = "animated_line" > < line x1 = "0" y1 = "0" x2 = "0" y2 = "50" str ... Read full article.