Tapestry — Pattern Generator

TAPESTRY

Untitled pattern

● animating

Native resolution: 800x800

Output resolution: 800x800px

Primitive

○circle

—line

⬡poly N

∿wave

Sides

6

Frequency

2

Amplitude

20

Shape

Size

87

Rotation

2°

Opacity

100%

Distortion

0

Incremental changes

Per iteration delta

Δ Size

0

Δ Rotation

0°

Δ Opacity

0%

Shape fill

Solid

Linear

Radial

Dots

Lines

Color 1

100%

Color 2

100%

Stroke

Width

2

Color

100%

Style

Dash / gap/

Repeat mode

Circular

Linear

Curve

Fill

Tile

Copies

3

Radius

58

Offset °

0°

Copies

7

Spacing

90

Direction

0°

Copies

12

Length

300

Direction

0°

Amplitude

120

Waves

2

Dist X

90

Dist Y

90

Brick offset

Distance

0

Orientation

0°

Canvas

Solid

Linear

Radial

Color 1

100%

Color 2

100%

Angle

135°

Tapestry — Pattern Generator

A geometric pattern generator for the web. Pick a shape, animate any parameter, and export as SVG, PNG or HTML.

How to use this ↗

History

Canvas size

W / H

Multiplier

Anim speed

Framerate

Tapestry

Welcome to Tapestry, a professional-grade pattern engine. Choose a shape, define how it replicates, and bring it to life with our visual smoothing animation system.

Primitive — The DNA of your pattern. Choose from circles, lines, polygons, or sine waves.
Shape — The physical attributes. Tweak size, rotation, and distortion. Use Incremental Changes to apply deltas to each subsequent copy.
Styling — The skin. Support for solid colors, linear/radial gradients, and dashed stroke patterns with alpha channel control.
Repeat — The algorithm. Circular rings, Linear axes, Bézier Curves, or Grid fills. Tile mode offers snug tessellation.
Animation — Click ▶ to animate any slider. Visual smoothing ensures a 60fps render even with discrete logical steps.
Export — High-res PNG, Vector SVG, Animated HTML, or .tapestry project files.

Engine Documentation

Animation Handles — When a slider is animating, two small square handles appear. Drag them to define the active range of the loop/bounce.
Smooth vs Discrete — The canvas always renders at full framerate (Visual Smoothing), but the sliders move in discrete steps to keep the logic clean.
Precision Tweak — Hover over any slider and use your mouse wheel for fine-grained control.
Reset Shortcut — Double-click any slider to immediately return it to its default state.
Project Portability — .tapestry files are JSON-based and contain the full state, including animation ranges and speeds.

Reset pattern

This will clear the current pattern and restore all defaults.