Gradient Wordmark Studio · 30 fps · 3.00s loop · 0/90

Gradient Wordmark Studio

Animate a gradient inside any wordmark. Type your text or load a font.

Wordmark

Source

Custom text reveals the Text panel below (type, font upload, size, rotation, etc.). Drop an SVG onto the preview, or click Import SVG…. Auto-detects fill region and outline.

Outline

Enabled

Draw outline on top

Color

Thickness

2.0

Draw animation

Enabled

Draw the wordmark on (along glyph centerlines)

Cursive style

One-go cursive presets — gradient fill, adjustable below. Cursive fonts only.

Templates

Loads the Playwrite "Coco" demo + preset. The cursive styles above also apply to your own text — pick one and type anything in a cursive font.

Pen path

Reshape the pen path: drag a dot to move it, click the line to add a point, right-click a dot to delete. Green = start, red = end. Flip swaps the start.

Duration

2.0s

Loop

Brush width

1.50×

Crossbars

Draw dots & crossbars last

Inter-letter

0.00s

Ease

Soft edge

0.00

Width profile

Outline

Also animate the outline along the pen path

Skeleton

Vector skeleton via medial axis (beta)

Segmentation

Stroke segmentation (beta)

Preview path

Show pen path overlay (debug)

Suggested routes cursive — pick one, then Edit path to refine

Auto-generates a few pen paths for this word. Click one to load it — then use Edit path / Flip to refine. Your edits save per word automatically.

Movement

direction

x+1.00

y+0.00

angle0°

Speed ×

1.00

Gradient

Type

Spread

Direction

Scale

1.00

Offset

0.00

Animation

FPS

Cycle (s)

3.0

Effective loop and frame count auto-adjust to speed so the gradient always completes a clean cycle.

Export

Width

Transparent

Background

SVG is fully vector — gradient and outline scale to any size with no pixelation. PNG/GIF rasterize at the chosen export width.

Notes

Drag the joystick to set both angle and speed. Drag stop handles to recolor the flow. All exports keep the page background transparent — the GIF uses a single transparent index, so the dark-blue outline stays crisp on any color.