SVG Zigzag Generator

Create custom SVG zigzag patterns with this free online generator.
Adjust the number of peaks, height, position, colors, gradients, and other settings while checking the result with a real-time preview.
Copy the generated SVG code or download the SVG file and use it directly in your website or web project.

Customization

Reset

▼ Image Size

Width: px

Height: px

▼ Responsive Settings

Size:

Width 100%

Fixed

Height:

Keep Aspect Ratio

Fixed Height

▼ Color Settings

Solid Color

Gradient

#59afff

Solid

Outline

Line Width:

px

▼ Peak Settings

Randomize

Base:

Bottom

Top

Offset:

%

Number of Peaks:

Peak Height: px

Peak 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