Skip to content
UI Kit
Accent color

Patterns and shapes

Background patterns, decorative shapes and image effects in the theme colors, from dots and contours to duotone and reveals.

3 components · 17 variants
Switch category

On this page

Every component of this category. Pick one to jump to its variants.

pattern

Pattern

Background patterns in the theme colors. Dots, grids, lines, contour lines, grain, light fields, waves, halftone and rings, each with tone, fade, seed and a very slow drift.

Props and details · Pattern

Dots

A dot field that drifts by one cell per loop. The hero shows tone and fade live.

Grid

Fine lines and a stronger line every fourth cell, with a small mark on each crossing.

Lines

Ruled lines and diagonal hatching for editorial pages and quiet bands.

Contour lines

Topographic lines from a seeded height field, traced with marching squares and smoothed. Every fourth line is an index line that glows slowly.

Grain

An SVG turbulence grain, colored by a token. Over a mesh it reads like printed colour.

Light fields and mesh

Soft light fields that drift on their own slow paths, or a full mesh that turns a few degrees. Both mix from the accent.

Waves

Wave lines that drift sideways by exactly one wave per loop.

Halftone

Soft dots weighted by a light field and cut at half strength, so they grow toward the light. The light wanders slowly.

image-effects

Image effects

Treatments for any picture. A duotone in the accent turns to full color on hover, reveals uncover it while you scroll, a liquid ripple runs across it, a spotlight of color moves over a gray version and slices arrive one by one. Only filter, clip-path, mask and transform move.

Props and details · Image effects

Duotone

Portraits in two shades of the accent, so photos from different shoots look like one set. Hover or focus brings the color back.

Open in Studio

Scroll reveal

Four ways a picture uncovers while it scrolls in, as a wipe, a curtain from the middle, a growing circle or blinds. The picture settles from a slight zoom at the same time.

Open in Studio

Liquid ripple

A soft displacement that follows the pointer and settles when it leaves. On phones a tap sets it moving for a moment.

Open in Studio

Color spotlight

A gray picture with a circle of full color. With a mouse it follows the pointer, on phones it travels across the picture while you scroll.

Open in Studio

Slices

The picture arrives in vertical slices from above and below, then the slices shift a little with the pointer. Switching the picture plays it again.

Open in Studio

shapes

Shapes

Abstract shapes for decoration, drawn in SVG with the theme colors. Blobs, rings, arches, stacks, an orbit, a wave band, a flower, a dotted sphere, a squiggle and a star burst, with calm float, spin and breathe loops.

Props and details · Shapes

Blobs

Organic outlines from a seed in three tones. They float on their own tempo and drift at different depths while you scroll.

Rings and orbits

Rings, an orbit with a moon, a star burst and a dotted sphere lit from the upper left. Switch the motion for all four.

Geometric set

Arch, stack, wave band, flower, squiggle and star burst. The tone switch shows accent, muted and outline.

Composition

Shapes placed around a headline. Each layer follows the pointer at its own depth and moves at its own speed while you scroll.

Similar components

More from Visuals, the same area of the kit.

Often combined with

Sections that usually sit next to Patterns and shapes on a page.

Often searched

Jump to

Copied to the clipboard