Create Contour Line Art in SVG: A Small Working Example

What the example makes

This tutorial makes three open, flowing lines. It is contour-inspired artwork, not a geographic contour map: the lines do not encode measured elevations. You can use the same construction ideas to describe a leaf edge, a landscape profile, or a decorative border.

SVG stores shapes as elements and coordinates. The W3C path specification defines commands such as M for a starting position and C for a cubic Bézier curve. This exercise uses only those two commands so there are fewer moving parts to understand.

Start with working code

Save this text in a file named contour-lines.svg using a plain-text editor. Open the file in a browser to check the result. You can also paste the SVG markup into an HTML document.

<svg xmlns="http://www.w3.org/2000/svg"
     width="480" height="320" viewBox="0 0 240 160"
     role="img" aria-labelledby="contour-title">
  <title id="contour-title">Three flowing contour-inspired lines</title>
  <g fill="none" stroke="#3b5839"
     stroke-width="3" stroke-linecap="round">
    <path d="M24 116 C64 124 64 36 112 44
             C160 52 164 108 216 72"/>
    <path d="M24 132 C72 140 72 52 112 60
             C152 68 168 124 216 88"/>
    <path d="M24 100 C56 108 56 20 112 28
             C168 36 160 92 216 56"/>
  </g>
</svg>

The outer width and height provide a displayed size. The viewBox establishes the drawing’s internal coordinate rectangle. In 0 0 240 160, the first two values locate the rectangle’s origin and the final two give its width and height. MDN’s viewBox reference explains how that rectangle maps into the SVG viewport.

Edit one curve at a time

Read the first path in two parts. M24 116 places the starting point at x=24, y=116. The next six numbers after C describe two control points and an endpoint. The following C continues from that endpoint with another curved segment.

1. Keep a copy of the working original. Change 112 44 to 112 32 in the first path. Its middle endpoint moves upward because smaller y coordinates sit higher in this coordinate system.
2. Change the neighboring control point 64 36 to 64 20. Compare the bend around the moved endpoint. You have changed its approach, not merely moved the entire line.
3. Undo or keep the changes before editing another path. Changing every number at once makes it difficult to tell which coordinate caused an unwanted kink.

Do not describe the spacing as a constant offset: these paths were drawn independently. If you need exact parallel curves for another application, that is a separate geometry problem, not something this small example promises to solve.

Style and label the result

Try stroke-width="2" and then stroke-width="5". A thicker stroke can close the visual gap between neighboring lines at small sizes. Keep fill="none" for this open-line illustration. Change the stroke color in one place on the group to keep the lines consistent.

The example has a descriptive title connected to the image by aria-labelledby. If you repeat the SVG inline on one page, give each title a unique ID and update its reference. If the illustration is purely decorative beside text that already conveys its meaning, hide the decoration from assistive technology instead of repeating that text.

Check before reusing the artwork

View the result at its intended display size, not just zoomed in. Check that important curves stay inside the viewBox and that lines do not merge into a dark patch. If you use it beside text, the text needs its own clear area.

For a physical label, make an actual-size paper proof. The packaging guide explains the difference between an attractive standalone pattern and a label that remains readable. For a paper object, SVG lines are not automatically a complete cut pattern; consider the connections and retained shapes first.