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.

Basic Shapes

Beginner The seven core SVG shape elements: rect, circle, ellipse, line, polygon, polyline, and path. MDN SVG Elements

<!-- Rectangle -->
<rect x="20" y="20" width="90" height="60"
      fill="#4f46e5" rx="6"/>

<!-- Circle -->
<circle cx="190" cy="50" r="34"
        fill="#e11d48"/>

<!-- Ellipse -->
<ellipse cx="315" cy="50"
         rx="55" ry="30"
         fill="#f59e0b"/>

<!-- Line -->
<line x1="400" y1="20"
      x2="460" y2="80"
      stroke="#16a34a"
      stroke-width="3"/>

<!-- Polygon (closed shape) -->
<polygon points="65,140 20,200 110,200"
         fill="#0ea5e9"/>

<!-- Polyline (open shape) -->
<polyline
  points="140,200 175,140 215,175 250,140"
  fill="none" stroke="#8b5cf6"
  stroke-width="2.5"/>

<!-- Path (cubic Bézier + close) -->
<path d="M 320 200 C 330 140,
              410 140, 420 200 Z"
      fill="#ec4899"/>

Key Attributes

rect — x, y, width, height, rx, ry (rounded corners)
circle — cx, cy, r
ellipse — cx, cy, rx, ry
line — x1, y1, x2, y2
polygon — points (closed, last point joins first)
polyline — points (open, use fill="none")
path — d attribute with command letters (M L H V C Q A Z)