SVG Zigzag Generator

This generator outputs zigzag SVG images.
The number, height, and color of peaks can be customized while viewing a preview that is reflected in real time.
Gradient colors and linear zigzag can also be created, and random generation is also supported.
You can easily download the generated SVG or copy the code.

Customization

Reset

▼ Image Size

Width: px

Height: px

▼ Responsive Setting

Size:

Width 100%

Fixed

Height:

Fixed Aspect Ratio

Fixed Height

▼ Color Setting

Single Color

Gradation

#59afff

Solid

Outline

Line Width:

px

▼ Peak Setting

Randomize

Base:

Bottom

Top

Horizontal Shift:

%

Number of Peaks:

Peak Height: px

Vertex Position:

%

Regenerate

Preview

Preview Background:

Show Guide

SVG Code

minify

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 100" width="100%">
  <path d="M 0 50 L 64 0 L 128 50 L 192 0 L 256 50 L 320 0 L 384 50 L 448 0 L 512 50 L 576 0 L 640 50 L 704 0 L 768 50 L 832 0 L 896 50 L 960 0 L 1024 50 L 1088 0 L 1152 50 L 1216 0 L 1280 50 L 1280 100 L 0 100 Z" fill="#59afff"></path>
</svg>

Download SVGCopy Code