SVG Pattern Generator

An SVG pattern is defined using the <pattern> element in Scalable Vector Graphics (SVG). The pattern element contains a tile definition - a rectangular area (defined by width and height) that is repeated (tiled) both horizontally and vertically to fill a larger area. When used as a fill for an SVG shape, the pattern repeats seamlessly, creating a uniform texture or background without adding file size proportional to the fill area. Our svg pattern generator creates these pattern definitions and wraps them in a complete, ready-to-use SVG document.

1. Select a Pattern Type and Customise Settings: Choose from 10 patterns - dots, stripes, checkerboard, crosshatch, grid, zigzag, hexagons, or triangles. Adjust the foreground colour, background colour, tile size (10-100px), rotation angle (0-360°), and stroke width (0.5-10px). The svg pattern generator updates the preview in real-time as you adjust any parameter.
2. Preview and Refine: The live preview shows your pattern tiled across a 6×6 grid with a checkerboard background so you can evaluate how the pattern looks at scale. Use the eight built-in presets as starting points for common colour and type combinations, then tweak the individual controls to match your exact needs.
3. Copy Code or Download: Export your pattern in three formats: SVG code - a complete standalone SVG document using the <pattern> element; CSS background - a ready-to-use CSS declaration with an inline data URI; or download as an SVG file for use in design tools, or a PNG for drag-and-drop placement in presentations and documents.

• Dots: A single circle centered in each tile. The dot radius is proportional to the stroke width setting. Clean, minimal, and versatile - works well for subtle backgrounds and texture overlays.
• Stripes (Horizontal / Vertical / Diagonal): A single line across each tile at the specified orientation. Combine with rotation to create angled stripes. The diagonal variant renders at 45° by default and responds well to rotation adjustments for any angle.
• Checkerboard: Two filled rectangles at opposite corners of the tile, each half the tile size. Creates the classic chessboard pattern. Best for print, packaging, and situations where both colours should have equal visual weight.
• Crosshatch: Two diagonal lines crossing in the centre of each tile. Creates a woven or fabric-like texture. Good for backgrounds that need more visual density without becoming distracting.
• Grid: Horizontal and vertical lines from the origin of each tile. Creates a classic blueprint or graph paper look. The stroke width controls the line thickness.
• Zigzag: A single polyline with three points forming a peak in each tile. Creates a continuous zigzag or wave pattern when tiled. Adds a dynamic, energetic feel to backgrounds.
• Hexagons: A six-sided polygon centered in each tile. Creates a honeycomb or tech-inspired pattern. The size control changes both the hexagon radius and the tile dimensions proportionally.
• Triangles: An equilateral triangle in each tile. Creates a geometric, modern pattern that tessellates in interesting ways when combined with rotation.

SVG patterns offer significant performance advantages over bitmap images for background textures. A single <pattern> definition is typically under 2KB regardless of how large the filled area is, whereas a PNG background image can be 50-200KB or more. SVG patterns also scale perfectly to any resolution - they remain crisp on Retina and high-DPI displays without the blurriness that bitmap images exhibit when scaled. Additionally, SVG patterns can be styled with CSS, animated with SMIL or CSS animations, and their colours can be changed at runtime - capabilities that bitmap images cannot match.