Stripe Pattern Generator
Stripe pattern generator: straight or diagonal stripes in two colors, from thin pinstripes to wide awning bands. Save a PNG, or let them scroll as MP4 or GIF.
What kinds of stripes can I make?
Two-color stripes at any width and angle. You can do upright stripes like an awning or a candy bag, horizontal bands like a Breton shirt, fine pinstripes like a suit, or diagonals like a barber pole or warning tape.
Every stripe is drawn from its distance to the stripe's center line. The edges stay crisp at any width and angle, and the diagonals don't get stair steps.
How to make a stripe pattern
Size is one repeat, meaning a stripe plus the gap after it, from 6 to 600 pixels of a 1080p frame. Thickness is the stripe's share of that repeat. At 1, stripes and gaps are the same width; at 0.1 you've got a pinstripe; close to 2 it flips into a thin line of the background color.
Angle turns the stripes: 0 stands them up, 90 lays them flat and 45 runs them on the diagonal. The page opens on red #c1121f over cream #fdf0d5 at Size 120, and it stays still until you give Scroll a value.
Settings for a Breton top, a barber pole and a pinstripe suit
Breton top: Angle 90, Size 60 and Thickness 0.6, in navy #1d3557 on white. The navy bands cover 30 percent of each repeat, so they're narrower than the white between them, just like on the classic sailor's knit.
Barber pole: Angle 45, Thickness 1, red on white, and Scroll 0.5. The stripes climb diagonally and are back in their starting spot every 2 seconds, which means a 2-second GIF loops.
Pinstripe suit: Angle 0, Size 60 and Thickness 0.05 (the lowest it goes) for a line 1.5 pixels wide, in #c8c8c8 on charcoal #2b2d31. For a chalk stripe instead, set Size to 90 and Thickness to 0.1.
Why do thin stripes flicker in a video?
Anything narrower than about 2 pixels can't hold a steady edge. While it scrolls, it covers a different share of each pixel column from one frame to the next, so it appears to pulse, and the codec smears it on top of that. This page also records at 720p, which shrinks any width you set for a 1080p frame by a third.
The stripe's width is Size × Thickness ÷ 2, and for a 720p video you take two thirds of that. Keep the result above 2. For a moving pinstripe, that means Size 60 with Thickness 0.15 or more. The other option is to leave Scroll at 0 and save a still.
Saving stripes
Upright or level stripes are about as easy to compress as a picture gets. In a PNG, each row either repeats the one before it or is a single color, so even a full 1920 by 1080 frame ends up as a small file. Diagonal stripes take more bytes, but they stay exact.
For a scrolling GIF, untick Dither. Two colors and the blended pixels along each edge fit in its palette with room to spare. If you want the same two colors as dots, checks, grids, zigzags, waves or rings, Pattern Generator does that.