Nice Things with SVG

Summary

#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" /> </g> </svg> 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" /> </mask> </g> </svg> 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" stroke="white" strokeWidth="1" /> </mask> </g> </svg> @keyframes to-down { 0% { transform: translateY(-10px); } 100% { transform: translateY(50px); } } Make styles. <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="rgb(50,50,50)" strokeWidth="2" /> <rect x="0" y="0" width="100%" height="20" fill="url(#line_color)" mask="url(#animated_line_fancy)" style={{ "--height": "20px", animation: "to-down-2 linear infinite 3s", }} /> <defs> <linearGradient id="line_color" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stopColor="rgba(255,0,255,0.1)" /> <stop offset="100%" stopColor="rgb(255,100,255)" /> </linearGradient> </defs> <mask id="animated_line_fancy"> <line x1="0" y1="0" x2="0" y2="50" stroke="white" strokeWidth="2" /> </mask> </g> </svg> @keyframes to-down-2 { 0% { transform: translateY(calc(var(--height) * -1)); } 100% { transform: translateY(100%); } } Most of these similar things are using the same technique. Mask out an animated block, putting some animations and probably designed some parts in Figma or other SVG editors. Unkey's l...