SVG stripe pattern generator
Create a custom vector stripe pattern with adjustable colors, thickness and angle. Download the SVG file or copy the code straight into your site. Generated 100% locally, nothing is sent to a server.
How it works
A stripe pattern used as a banner background, section background or illustration needs to stay sharp at every screen size. By generating it as an SVG rather than a PNG, the pattern stays vector-based: it scales up or repeats without ever turning blurry or pixelated. Set the two colors, the stripe thickness and their angle, then grab the file ready to use.
How do I use this pattern as a CSS background?
Download the SVG file, then reference it as a background with background-image: url('motif-rayures.svg'), or copy the SVG code and encode it as a data URI if you'd rather avoid an extra HTTP request.
Does the pattern repeat automatically over a large area?
Yes: the stripes are generated with a native SVG <pattern> element that tiles across the entire defined area, whatever rectangle size you choose. You can therefore generate a small pattern and use it with CSS background-repeat if needed.
Privacy: the SVG is built entirely in your browser, and no data or settings are sent to a server.