SVG + CSS: color, strokes and animation

Control SVG icons and illustrations with modern CSS using `fill`, `stroke`, variables and lightweight motion.

📘 Theory

Styling inline SVG with CSS

Inline SVG is usually the best choice when you want full visual control.

When the SVG lives directly in the HTML, you can target its `path`, `circle`, `rect` or `line` elements like any other DOM node.

That makes theme switching much easier because CSS variables, hover states and focus states can all style the same illustration.

Drawing a line with `dasharray` and `dashoffset`

This classic technique simulates a path being drawn over time.

The common pattern sets `stroke-dasharray` and `stroke-dashoffset` to the full path length, then animates the offset down to zero.

It works well for logos, progress traces, checkmarks and scroll-based reveal effects where a static line would feel flat.

1 Styling inline SVG with CSS 2 Drawing a line with `dasharray` and `dashoffset`

🧪 Learn by doing

Example Demo: themeable SVG icon Use CSS hover styles to swap the icon color without changing the markup.

⌄

Example Interactive demo: scroll-driven SVG strokes with CSS only Explore how `pathLength`, `stroke-dasharray` and `stroke-dashoffset` can work together without JavaScript.

⌄

Example Interactive demo: multiple SVG curves with staggered timing See how several `path` elements can animate at different rates to build a richer composition using only CSS.

⌄

Example Interactive demo: full-width SVG line animation Review a wider version with several curves and a stretched `viewBox` for larger layouts.

⌄

Example Interactive demo: JavaScript-controlled SVG stroke animation Compare the JavaScript approach so you can judge when CSS is enough and when measuring the path becomes useful.

⌄

Example Interactive demo: scroll reveal with SVG lines Combine `view()` and SVG strokes to reveal paths as the block enters the viewport.

⌄