Input HarborISSUE #21 of 46

svg · paths · gradients · animation

FormaVSCaptain Invalid Input

Forma saysSVG <path> draws any shape from a mini-language; gradients and <animate> add fills and motion declaratively.

The <path d="…"> element is SVG's powerhouse: its d attribute is a string of commands — M move, L line, C cubic curve, Z close. Every icon you've seen is ultimately a path.

Fills can be gradients defined in <defs> (<linearGradient>), and you can animate attributes natively with <animate> — no JavaScript. For complex paths, draw in a vector editor and copy the d string out.

Power-ups you unlock

path d="M L C Z …" describes any shape
Gradients live in <defs> and are referenced by id
<animate> animates attributes without JS
Author complex paths in a vector tool, copy the d string

Captain Invalid Input attacks — common mistakes

Hand-writing long path data instead of using a tool
Referencing a gradient id that does not match the <defs>
Expecting <animate> to work after the SVG is a background-image (it will not)

Boss battleGive a shape a linearGradient fill, then add an <animate> that pulses its opacity between 1 and 0.3.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;display:grid;place-items:center;height:100vh;margin:0">
  <svg width="300" height="200" viewBox="0 0 300 200">
    <defs>
      <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stop-color="#b388ff"/><stop offset="1" stop-color="#ff7a8a"/>
      </linearGradient>
    </defs>
    <path d="M150 30 L250 170 L50 170 Z" fill="url(#g)">
      <animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite"/>
    </path>
  </svg>
</body></html>

▶ Open the interactive comic issue

‹ Svg · Vector Graphics In Markup Media · Video · Audio · Sources ›