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.

Text

Beginner SVG text and tspan elements: alignment, baseline control, letter-spacing, and textPath for text along a curve. MDN text

<!-- text-anchor: start | middle | end -->
<text x="240" y="50"
      text-anchor="middle"
      font-size="14"
      fill="#e11d48">middle</text>

<!-- tspan for inline style runs -->
<text x="40" y="115" font-size="14">
  Mix
  <tspan fill="#4f46e5"
         font-weight="bold"> bold</tspan>
  <tspan fill="#e11d48"
         font-style="italic"> italic</tspan>
</text>

<!-- letter-spacing -->
<text letter-spacing="4">
  spaced text
</text>

<!-- dominant-baseline -->
<text dominant-baseline="middle">
  centred on baseline
</text>

<!-- textPath: text on a curve -->
<defs>
  <path id="curve"
    d="M 40 220 Q 240 100 440 220"/>
</defs>
<text font-size="12">
  <textPath href="#curve"
            startOffset="10%">
    Along a Bézier curve
  </textPath>
</text>

Key Attributes

text-anchor — start | middle | end — horizontal alignment relative to x
dominant-baseline — auto | middle | hanging — vertical alignment relative to y
tspan — inline child element for mixed styles within one text block
dx / dy on tspan — relative offset from previous character
letter-spacing / word-spacing — spacing between glyphs/words
textPath href="#id" — flows text along any path shape
startOffset — percentage or length along the path where text begins