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)

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

Preview path

Show pen path overlay (debug)

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.