SVG Playground — Learn SVG from Basics to Animation

Most SVG tutorials paste a finished graphic and move on, so you never learn what each number in the markup actually controls. This SVG Playground keeps the code and the rendered picture side by side. Change a coordinate, a colour, or an animation value and the preview updates instantly — that tight feedback loop is how SVG finally clicks.

There is nothing to install. No design software, no Node.js, no build step. Open the page and 44 lessons are ready across 12 chapters that take you from your first <circle> all the way to self-drawing lines, morphing paths, and animated gradients.

SVG Basics — the mental model everything builds on

The first chapter establishes how SVG thinks. You learn that a drawing lives inside an <svg> element, that the viewBox defines an internal coordinate grid you can zoom and pan independently of the on-screen size, and — the thing that trips up every beginner — that the y-axis grows downward from a top-left origin. Interactive picker lessons let you zoom in, zoom out, and pan the same shape so the viewBox stops being abstract.

Basic Shapes — rect, circle, ellipse, line, polyline, polygon

Before paths, you master the primitives. Rectangles with x, y, width, height, and the rx that rounds corners into pills. Circles and ellipses with cx, cy, and one or two radii. Lines and polylines that need a stroke to appear. Polygons that auto-close into triangles, hexagons, and stars from a list of points. Each shape renders live so you can drag the numbers and watch it respond.

Paths — the one element that can draw anything

The <path> and its d attribute are the heart of SVG. You learn the mini-language one command at a time: M to move the pen, L to draw a line, Z to close. Then curves — the quadratic Q with one control point, the cubic C with two (the kind design tools export), and the smooth T shorthand for waves. An arc lesson demystifies the A command and its two flags, and a final lesson builds a real heart icon from arcs, exactly like the single d string you copy out of Figma or Illustrator.

Styling & Strokes — fill, stroke, dashes, caps, and joins

Colour and line treatment get their own chapter. fill versus stroke and stroke-width, fill="none" for outline-only shapes, and colour in hex, rgb(), hsl(), or currentColor. Then the stroke details that make graphics feel polished: stroke-dasharray for dashes and dots, stroke-dashoffset (which becomes the key to line-drawing animation later), opacity and layering, and stroke-linecap and stroke-linejoin for soft rounded ends and corners.

Gradients & Patterns — depth without images

Define a <linearGradient> or <radialGradient> once inside <defs>, give it an id, and reference it with fill="url(#id)". You learn to place <stop> colours, rotate a linear blend with its coordinates, and shift a radial focal point to fake a light source for spheres and glows. A <pattern> lesson tiles small artwork across a shape for dots, grids, and hatching — all vector, all resolution-independent.

Text & Groups — labels, badges, and organisation

SVG text is a first-class citizen. You place <text> at a baseline, align it with text-anchor, and style it with the same font-size, font-weight, and letter-spacing you know from CSS. A <tspan> restyles part of a line, <textPath> flows words along any curve for circular badges, and <g> groups elements so a single fill or transform cascades to every child.

Transforms & Reuse — translate, rotate, scale, and DRY graphics

The transform attribute moves, rotates, and scales with translate, rotate, and scale, and you learn how chaining and anchor points behave. Then reuse: define a shape once and stamp it many times with <use href="#id">, and package scalable icons with <symbol> and its own viewBox — the exact foundation of SVG icon sprites.

Filters & Effects — shadows, blur, glow, and colour

Filters live in <defs> and apply with filter="url(#id)". You build a soft drop shadow with <feDropShadow>, blur with <feGaussianBlur>, a neon glow by merging a blurred copy behind the original with <feMerge>, and recolour graphics with <feColorMatrix> for greyscale and hue-rotate effects — the same primitives that power the CSS filter property.

Clipping & Masking — cropping with hard and soft edges

A <clipPath> crops an element to a shape with a hard edge — the classic circular avatar. A <mask> uses brightness instead, so white shows, black hides, and grey fades, giving the feathered edges a clip path cannot. Seeing both back to back makes the difference obvious.

Animation: CSS — transitions, keyframes, and the transform-origin gotcha

The first animation chapter uses plain CSS inside a <style> block. A hover lesson shows a transition smoothly interpolating scale and colour. A @keyframes picker builds spin, pulse, and bounce — and teaches the single most common SVG-animation mistake: transforms are measured from the SVG origin, so you need transform-box: fill-box and transform-origin: center to rotate in place. A staggered lesson uses animation-delay to build an equaliser wave.

Animation: SMIL — animate, animateTransform, animateMotion

The second animation chapter uses SVG's built-in SMIL — no CSS, no JavaScript. You drop an <animate> inside a shape to animate an attribute through a values list, use <animateTransform> for rotate, scale, and translate, and <animateMotion> to send an element gliding along a path with rotate="auto". A timing lesson covers begin, keyTimes, and repeatCount so you can sequence and hold precisely.

Pro Techniques — the effects people actually ship

The final chapter combines everything into portfolio-grade effects: the self-drawing line built from stroke-dasharray and an animated stroke-dashoffset; a dependency-free spinner; animated check and heart icons; path morphing by animating the d attribute between shapes with matching structure; a living animated gradient; and production-ready responsive, accessible markup with preserveAspectRatio, <title>, and role="img".

Every lesson has a Quick Check multiple-choice question, and progress is saved to localStorage so you can close the tab and resume where you left off. The Replay button restarts any animation, the background toggle switches between a transparency grid, white, and dark, and everything renders locally — no code is uploaded to any server. When you are ready to go further with motion, continue in the GSAP playground or the CSS animation generator.