SVG from Zero to Senior

Start SVG the right way: what SVG really is, the coordinate system, the basic shapes, and the one concept that confuses everyone — viewBox. With a live pan/zoom playground you can drag.

Decode the path mini-language: moveto and lineto, the horizontal/vertical shortcuts, cubic and quadratic Béziers, smooth curves, and the dreaded elliptical arc. With a builder where you drag control points and watch d write itself.

Make SVG beautiful: fill and the two fill rules, the whole stroke family (width, linecap, linejoin, dasharray), then reusable linear/radial gradients and tiling patterns defined once in defs. With a live paint playground.

SVG text is real, selectable, accessible text living in the coordinate system. Master baseline positioning, text-anchor, multi-line and styled tspans, and the showpiece — flowing a label along any curve with textPath. With a live lab.

Move and reuse SVG: the transform attribute (translate/scale/rotate/skew), why transform order matters, grouping with <g>, transform-origin, and the power of nested coordinate systems with inner <svg>. With a live order-flipping sandbox.

Make SVG move: the famous self-drawing line with stroke-dasharray/stroke-dashoffset, CSS keyframes vs native SMIL <animate>/<animateTransform>, motion along a path with animateMotion, and when to pick which. With a scrubbable studio.

The SVG filter engine is a tiny image-processing pipeline. Learn feGaussianBlur, feOffset/feFlood/feComposite/feMerge for real drop shadows, a neon glow chain, and feColorMatrix for desaturation and tints — with a live filter playground.

The two ways to hide parts of a drawing: clipPath (a hard, binary cookie-cutter) and mask (soft, luminance-based transparency you can feather). When to use each, alpha vs luminance masks, and CSS clip-path — with a side-by-side lab.

Make SVG think: generate shapes from a data array, the essential screen→user coordinate mapping with getScreenCTM().inverse() for correct hit-testing, pointer events, tooltips, and a small interactive chart from scratch.

Ship SVG like a senior: optimize with SVGO, choose the right delivery (inline vs img vs sprite), build a symbol + use icon system themed with currentColor, make graphics accessible with title/desc/role/aria, and respect perf budgets.

Animate the d attribute itself: the golden rule of morphing (same command structure), interpolating coordinates, SMIL path animation, why circles fight stars, and how flubber resamples paths. With a scrubbable morph lab.

Build the loaders, percentage rings, and speedometers in every dashboard with one formula: stroke-dashoffset = circumference × (1 − percent). Plus the -90° start rotation, round caps, gradient rings, and a 270° gauge. With a live builder.

Make tiny, resolution-independent textures from a few numbers: repeating <pattern> tiles for hero backgrounds, an organic blob generator with smooth curves, and shipping SVG as a compact data-URI. With a live generator.

Ship SVG the React way: inline vs SVGR, the JSX attribute gotchas (className, strokeWidth), building typed icon components with props and currentColor, data-driven SVG, and refs for measuring paths. With a live props playground.

The grand finale: drive the viewBox with the mouse to build pan and zoom-toward-cursor navigation — the engine behind every web map. Drag-to-pan math, the zoom-to-point formula, non-scaling strokes, and choropleth regions. With a live map.

Go past title/desc: accessible names with role=img and aria-labelledby, the decorative-vs-meaningful decision, keyboard-focusable shapes, aria-live readouts, accessible charts backed by a real data table, and how to test. With a live demo.

Industrialize icons: turn a folder of .svg files into one cached <symbol> sprite with SVGO + svg-sprite, then use it via <use href>. External vs inline sprites, caching, currentColor theming, and framework integration. With a live demo.

When hand-rolled rAF and CSS stop scaling: what GSAP, anime.js, and Motion give you — timelines, stagger, scrubbing, MorphSVG, MotionPath — plus a decision table for CSS vs SMIL vs library. With a live timeline/stagger player.

How the browser actually paints SVG, why thousands of DOM nodes get slow, the real cost of filters and huge paths, transform vs cx/cy animation, and the exact signals that tell you to switch to canvas or WebGL. With a live FPS stress test.

The finale: build a bar chart with no D3 and no Chart.js. Implement scales, nice ticks, axes, gridlines and responsive sizing by hand — so you finally understand what every charting library does for you. With a live, editable chart.

Part 21 opens a bonus Motion & Scenes arc: direct a whole scene, not one element. Use SMIL syncbase timing (begin="other.end") to sequence sky, sun, clouds and title into a self-playing, looping scene — no JS clock. With a live demo.

Part 22: make anything travel along a curve. Master animateMotion, reuse a path with <mpath>, and use rotate="auto" so a traveler banks into the turn instead of sliding — plus the CSS offset-path equivalent. With a live demo.

Part 23: bring a character to life. Build a skeleton from nested <g> joints, rotate each around its pivot, and let transform inheritance swing the whole limb — then drive a wave and a walk cycle. With a live demo.

Part 24: hand the timeline to the reader. Use the Scroll-driven Animations API (scroll() and view()) to draw an SVG path as the page scrolls, with parallax layers for depth and a JS fallback. With a live scrollytelling demo.

The motion arc finale: ambient scenes that just live. Seamless parallax loops (translate a tile by its width, then wrap) and a lightweight requestAnimationFrame particle pool that recycles nodes. With a live demo.