SVG Zigzag Pattern Generator

Zigzag and chevron SVG patterns

The zigzag is one of the oldest decorative motifs known to humanity. It appears on Neolithic pottery, ancient Greek vases, African Adinkra symbols, Aztec textiles and Native American basketry — long before anyone called it a "chevron". The pattern is a single polyline whose segments alternate direction, and although the shape is trivial, the visual punch comes from how reliably it suggests motion, rhythm and structure all at once.

The SVG construction is also one of the cleanest you can write. A single <polyline> inside a <pattern> handles a full tile that the browser repeats horizontally:

<pattern id="zigzag" width="40" height="20" patternUnits="userSpaceOnUse">
  <polyline points="0,20 10,0 20,20 30,0 40,20"
            fill="none" stroke="#333" stroke-width="2"/>
</pattern>

The three knobs are amplitude (vertical span), period (horizontal span of one full cycle) and stroke thickness. Tweaking just amplitude and period changes the whole feel — a 60° sharp zigzag feels electric, while a long shallow one reads as a soft wave.

Variants: sharp, smooth, thick, Greek key

• Sharp zigzag — straight segments with 60° or 90° angles; energetic, electronic feel.
• Wave — replace the polyline with a Bezier <path d="M0 20 Q 10 0 20 20 T 40 20">; smoother, calmer.
• Chevron — thicker zigzag, often filled rather than stroked; the classic 1970s revival look.
• Greek meander (Greek key) — a zigzag with right-angled returns; ancient Greek architectural motif.

Where you see zigzag

Italian fashion house Missoni (founded 1953) built an entire empire on multicoloured zigzag knitwear. Vans, Charlie Brown's shirt and the Pixar Up house all rely on chevron stripes for instant recognition. In typography, chevron dividers between sections came back hard in the 2020s wave-divider trend. In Op art, Bridget Riley used near-zigzag arrangements to play with the Hering illusion — perfectly parallel lines that look bowed because of the zigzag context surrounding them.

CSS-only zigzag

You can build a zigzag border in pure CSS with a chained clip-path: polygon(...) or with stacked linear-gradient() backgrounds. It works for simple, single-line decoration — for example, the torn-paper effect at the bottom of a hero. But for a tileable, recolourable pattern across a full background, SVG <polyline> is shorter to write and renders identically across browsers. Sharp angles need a tiny anti-aliasing nudge: ensure stroke-linejoin="miter" for crisp peaks or "round" for softened ones.

FAQ

Zigzag or wave? Zigzag is angular and reads as energetic; the wave (sinusoidal Bezier) is curved and reads as calm. Same tile size, very different mood.

Are saturated colours OK? Yes, but keep opacity low (10-25%) if the zigzag covers a large area — fully saturated zigzags fight with body text. They work fine at full opacity inside hero banners.

Chevron versus zigzag — what is the difference? Practically nothing. Chevron usually implies thicker, filled stripes (like fabric), and zigzag implies thinner stroked lines, but the words are used interchangeably in design briefs.

Can I do this in pure CSS? For a single decorative edge, yes — clip-path handles it. For a tileable background, SVG <pattern> is cleaner.