SVG Pattern Generator

How to use

1. 1Pick a preset to start from a finished pattern, or jump straight to the Pattern type chips and choose the geometry you want (dots, grid, lines, crosshatch, checkerboard, triangles, hexagons, plus, zigzag, isometric).
2. 2Adjust the tile size, stroke or dot weight, rotation, foreground color, foreground opacity, and background color. The preview tiles live as you change controls.
3. 3Toggle Transparent background if you want the pattern to sit on top of a parent gradient or image (the preview shows a checkered backdrop in that case).
4. 4Copy the SVG markup to paste it directly into HTML or JSX, or copy the CSS background block to paste it into a class. Use the HTML snippet for a complete drop-in container.
5. 5Click Download SVG for a 1200x600 document, or Download PNG to rasterise the same pattern through a canvas for use in slide decks, mockups, and social images.

About this tool

SVG Pattern Generator builds tileable background patterns as real SVG documents, ready to drop into a website, a hero section, a card surface, or a print template. Twelve repeatable pattern types are included: dots (classic polka dot), grid (graph paper or wireframe), horizontal lines, vertical lines, diagonal lines, crosshatch (two crossing diagonal sets), checkerboard, equilateral triangles, hexagonal honeycomb, plus signs, zigzag, and isometric (three-direction line work used by isometric illustrations). Each pattern is built from a small set of SVG primitives (circle, rect, line, polygon, path) inside an SVG <pattern> element with patternUnits set to userSpaceOnUse, the same recipe used by Hero Patterns and similar pattern libraries. Tiles cover their corners and edges so the seam between repeated tiles disappears even at large zoom. Controls let you set the tile size in pixels, the stroke width or dot weight, the rotation angle of the whole tile, the foreground color and opacity, the background color, and a transparent background toggle that lets the pattern sit on top of a parent gradient, photo, or solid color elsewhere on your page. Twelve presets cover the most-searched looks (blue dots, soft grid for forms, diagonal stripes, crosshatch, honeycomb, triangles, plus signs, zigzag, isometric, graph paper, transparent dots) so you can start from a finished design and tweak from there. Three output formats are generated live as you change controls: a full SVG document at 1200x600 (download as .svg), a CSS background declaration with a data-URI background-image that tiles via background-repeat at the tile size you set (paste straight into a class), and a complete HTML snippet with the CSS already attached. A Download PNG button rasterises the live pattern through a canvas for use in slide decks, mockups, social posts, and anywhere SVG is awkward. Useful for landing pages, hero sections, blog post backgrounds, social images, slide decks, app onboarding screens, paper-style textures behind dark mode cards, dotted backgrounds for forms, repeating graph paper for design notes, and isometric or crosshatch textures for illustration work. Everything renders locally in your browser, so colors, sizes, and the resulting SVG never leave your device.

Free to use. Works in your browser. No signup, no login.