Code

SVG

Basic Shapes

rect, circle, ellipse, line, polygon, polyline — the foundational SVG elements.

Text

text, tspan, textPath — text layout, anchoring, and curved text.

Stroke & Fill

stroke-dasharray, linecap, linejoin, fill-opacity, and fill-rule.

Transforms

translate, rotate, scale, and skewX applied to group elements.

Paths

Path d commands: M L H V C Q A Z — lines, Béziers, and arcs.

Gradients

linearGradient and radialGradient with stop elements.

Patterns

pattern element as a tileable fill: checkerboard, dots, hatching.

Filters

Filter primitives: feGaussianBlur, feDropShadow, feTurbulence, feColorMatrix.

Clip & Mask

clipPath and mask elements for compositing and spotlight effects.

Animation (SMIL)

Declarative animation with animate, animateTransform, and animateMotion.

Symbols & Use

symbol + use for a reusable SVG icon system.

Generative Art

Animated Lissajous figures and phyllotaxis spiral — generative art via raw SVG DOM.

Transforms

Beginner The transform attribute on <g> and shape elements: translate, rotate, scale, skewX, and combined matrices. MDN transform

<!-- translate(tx, ty) -->
<g transform="translate(100, 90)">
  <rect .../>
</g>

<!-- rotate(angle)
     rotate(angle, cx, cy) -->
<rect transform="rotate(35)"/>
<rect transform="rotate(35, 50, 25)"/>

<!-- scale(sx) or scale(sx, sy) -->
<rect transform="scale(1.8, 1.2)"/>

<!-- skewX(angle) / skewY(angle) -->
<rect transform="skewX(20)"/>

<!-- Combining — applied right to left -->
<g transform="translate(240,195)
              rotate(15)
              scale(0.9)">
  <polygon .../>
</g>

<!-- matrix(a,b,c,d,e,f) -->
<!-- [cos θ, -sin θ,
      sin θ,  cos θ,
      tx, ty] for 30° rotation -->
<g transform="matrix(0.866,-0.5,
                     0.5,0.866,
                     370,190)">
  <rect .../>
</g>

Key Concepts

translate(tx, ty) — moves the coordinate origin; no need to adjust every attribute
rotate(angle) — rotates around the current origin; use rotate(a,cx,cy) to set a pivot
scale(sx, sy) — scales; scale(-1,1) flips horizontally
skewX(a) / skewY(a) — shears along X or Y axis
matrix(a,b,c,d,e,f) — full 2D affine transform in one attribute
Multiple transforms in one attribute string are applied right-to-left
CSS transform property also works on SVG elements in modern browsers