Use on your site

The Use on my site button, top right

When you like your pattern, Use on my site gives you a prompt for your AI coding tool, or the code and files to add it yourself.

Paste into your AI tool

The dialog opens on a prompt. It names the section, explains how to layer the SVG behind the content, says where the headline sits, and includes the SVG. Copy it and paste it into the tool you build with, such as Claude Code, Cursor, Lovable, Bolt or v0. Large SVGs are saved as a file in public/patterns/ instead of pasted into the prompt.

Use on my site opens on the prompt for your AI tool

Code

The Code tab has the same pattern in several forms. The HTML version is the one to use if you are adding it by hand:

<section class="banner">
  <svg class="banner__pattern" viewBox="0 0 1240 280" preserveAspectRatio="xMidYMid slice" aria-hidden="true">…</svg>
  <div class="banner__content">…</div>
</section>

.banner {
  --brand: #19976a;          /* background colour */
  --pattern-tint: #000000;   /* recolours the shapes */
  --pattern-strength: 1;     /* 0 = flat colour, 1 = full pattern */
  position: relative; isolation: isolate; overflow: hidden; background: var(--brand);
}
.banner__pattern {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  color: var(--pattern-tint); opacity: var(--pattern-strength);
}

The shapes use currentColor, so changing --pattern-tint recolours them. Set it to #fff for light shapes on a dark brand colour, or turn the whole pattern down with --pattern-strength.

Other formats

SVG file	Use it as an `<img>` or a CSS background. Turn on Tint with CSS color to make the first shape colour follow the CSS `color` when the SVG is inline.
CSS data URI	Paste straight into `background-image`. Quotes and special characters are already encoded.
React	A `<PatternBackground />` component that fills its positioned parent.
Tailwind	Arbitrary-value classes, with the SVG base64 encoded because Tailwind treats spaces as separators.
Repeating tile	A small tile for `background-repeat`, previewed 3 × 3. Zones and sheen are switched off in tiles because they belong to one place on the artboard. Rotation is ignored, except that Lines keep their direction when they run down or diagonally: see Textures.
PNG, WebP, JPEG	At 1×, 2× or 3×, drawn by the same code as the preview. Use these for social images and email.

Fitting any screen size

The SVG uses fill and crop: it fills the section whatever its shape and crops what does not fit, so zones stay in the same place relative to the section. Responsive preview in the Code tab shows the pattern at 1440 × 600, 768 × 600 and 390 × 700. For a very different phone layout, make a second design with the Phone placement.

File size

The top bar shows the artboard size in pixels and the size of the SVG as you work. Shapes with the same colour and opacity share one path, which keeps files small: the Banner triangles look exports at about 2.5 KB. Over 200 KB, Use on my site suggests fixes: bigger shapes, fewer shapes shown, fewer opacity steps or fewer decimals.

Halftone files

A halftone drawn as paths matches the preview exactly but can be over 100 KB. The compact export draws the dots with an SVG filter instead, so the file stays a few kilobytes and still recolours with CSS. It works for round dots with one radial peak, a linear field or an even field, on the whole artboard or in an ellipse, with no zones, hand edits or jitter, and one colour at one opacity. When something rules it out, the dialog says what to change, for example "Remove the zones to use compact export."