SVG Snippets — Free HTML CSS JS Animated SVG Icons & Graphics

SVG is vector graphics that live in the DOM, which means CSS can style them, JavaScript can animate them, and they stay crisp at every resolution. These snippets use that directly: stroke-dasharray progress rings, path-draw line reveals, morphing shapes, animated icons, and chart marks drawn as real elements rather than images.

Because every part is an element, each one can be targeted, transitioned and made accessible — the practical difference between an icon that responds to state and an image that just sits there.

The dash-offset trick, once and for all

A single idea underlies most of the "drawing" effects in this tag: set stroke-dasharray to a path's own length so one dash covers it entirely, then animate stroke-dashoffset from that length to zero. The stroke appears to grow along the path. Because path.getTotalLength() gives that length for any arbitrary shape, the same technique produces a circular progress ring, a signature that draws itself, and a route line that traces across a map.

Paths as state, not pictures

An icon built from SVG paths can morph between two shapes by interpolating their point coordinates, or swap strokes for state — a hamburger's three lines rotating and merging into an X is a CSS transition on individual <line> or <path> elements, not a sprite swap. That is only possible because each stroke is an addressable element; the same visual result baked into a static image file has no state to transition between.

Charts as marks, not screenshots

When a chart's bars, lines or arcs are real <rect>, <path> and <circle> elements, each one can carry its own hover state, transition when the underlying value changes, and be labelled for a screen reader individually. Rendering the same chart as a canvas bitmap or an exported image loses all three properties at once.

Making it accessible on purpose

An inline SVG with no label is announced as nothing meaningful, which is worse than a plain image with alt text. Meaningful graphics get role="img" and a <title> referenced by aria-labelledby; purely decorative ones — the animated dividers and background flourishes — get aria-hidden="true" so they are skipped entirely rather than read as noise.