Pattern

Pattern Makerby Graphicfresh

Artwork01

＋Drop SVG files hereUp to 8 SVGs · or click to browse

No SVG selected

Multi-SVG: up to 8 artworks are distributed automatically with skip-one spacing. Click an artwork in the list to make it active.

Repeat02

Transform03

Scale 58%

Spacing X 24

Spacing Y 24

Rotation 0°

Offset XOffset Y

Object Color04

↖

Click to recolorClick any artwork object directly in Live Preview, then choose its color.

Each SVG object keeps its own color. Select an object in the preview to edit only that object.

Select an object directly on the canvas. Its solid/gradient and up to 8 color variations open beside the selected object.

Background04

Background color

Transparent background

Animation05

Animate pattern

Duration 6s

Speed 1×

Intensity 35

Duration sets the loop length. Speed changes the motion frequency; Intensity controls the motion amount.

Animation Variations80 effects

How many animations? Skip-one distribution: the same animation is prevented from sitting directly beside itself horizontally or vertically. Diagonal repeats are allowed, and the same group may return after one different object (A–B–A). Distribution stays locked during playback and export.

Animation 1All objects

Effect

Group speedPhase

Group intensity 100%

Anchor XAnchor Y

Amount 50

Skew 0°

Flip H Flip V

All animation groups use periodic closed-loop timing. Global movement is also periodic now, removing the mid-loop jump caused by linear tile wrapping. Motion Studio effects are loop-safe. Path-specific effects work best with vector SVG paths; raster background images remain unaffected.

Image Output06

Output size

WidthHeight

PNG supports transparent background and preserves the selected output dimensions.

Video Output07

Video resolution Frame rate

Loop6sFormatMP4 / WebM

Video is rendered on a separate canvas at the selected resolution, so 4K export does not enlarge the live preview. 4K uses an offline frame-by-frame WebCodecs renderer with automatic VP9/AV1 codec detection: every frame gets an exact timestamp, so rendering may take longer than playback but the exported motion stays smooth. Current Chrome/Edge recommended.

Ready for your SVG

Live preview

✦Your pattern appears hereUpload an SVG to start designing.