SVG ANIMATIONS
Stroke Draw-On01 / 60
navigate  ·  scroll
01
Typography

Stroke
Draw-On

Stroke-dashoffset traces each letter as if drawn by hand, revealing text one stroke at a time in elegant sequence.

SVG StrokeDashoffsetKeyframe
01 / 60
LoremIpsum DolorCONSECTETUR
02
Color

Gradient
Wave Fill

A shifting rainbow gradient travels across the text continuously while the words gently float up and down in rhythm.

linearGradientAnimateTransformFloat
02 / 60
Lorem Ipsum DOLOR · SIT · AMET
03
Typography

Typewriter
Reveal

A masking rectangle shrinks from right to left across each text line, simulating the classic typewriter effect with a blinking cursor.

Clip MaskSVG RectCursor
03 / 60
Lorem Ipsum Dolor sit amet ADIPISCING ELIT VESTIBULUM
04
Typography

Letter
Cascade

Each letter drops from above with staggered delays, creating a cascading waterfall of individually animated characters.

Per-LetterStaggerTransform
04 / 60
Lo re mI ps um Do lo r
05
Neon

Neon
Glow Pulse

Electric neon colors rhythmically pulse with intensifying drop-shadow filters, simulating a flickering neon sign at night.

Drop-shadowFilterNeon
05 / 60
Lorem IpsumDOLOR SIT AMET
06
Distortion

Glitch
Effect

RGB color channels separate with random timing and clip-path, creating an authentic digital glitch distortion on the text.

Clip-pathRGB SplitSteps(1)
06 / 60
Lorem IpsumLorem IpsumLorem Ipsum Dolor Sit Amet Dolor Sit Amet Dolor Sit Amet
07
Orbits

Circular
Text Orbit

Concentric elliptical paths carry text in simultaneous orbits — one forward, one reverse — around a central word.

textPathSVG PathOrbit
07 / 60
Lorem Lorem Ipsum Dolor Sit Amet · Consectetur Adipiscing Elit · Sed Do · · Vestibulum · Ante · Ipsum · Primis · Faucibus ·
08
Motion

Zoom
Reveal

Each text line scales from near-zero to full size while fading in, then gracefully scales beyond and disappears in a cinematic loop.

ScaleOpacityStagger
08 / 60
Lorem Ipsum Dolor Sit Amet CONSECTETUR
09
Geometry

Spinning
Hexagons

Three concentric hexagonal polygons rotate at different speeds and directions around a centered text label.

PolygonRotationNested
09 / 60
Lorem IPSUM DOLOR
10
Physics

Bouncing
Balls

Six colored spheres bounce with ease-in-out timing and staggered delays, simulating a rhythmic physics-based ball drop effect.

TransformDelayEase-in-out
10 / 60
Lorem Ipsum Dolor Sit Amet
11
Geometry

Morphing
Star

A 10-point star polygon rotates while subtly scaling, with two additional outline rings counter-spinning at different speeds.

PolygonTransformScale
11 / 60
Lorem IPSUM DOLOR
12
Path Text

Wave
Path Text

Cursive text flows along animated sine-wave bezier paths, travelling in opposite directions on stacked wave guides.

textPathBezierWave
12 / 60
Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Vestibulum Ante Ipsum Primis Faucibus Orci Sed Do Eiusmod Tempor Incididunt Ut Labore
13
Radar

Sonar
Rings

Five concentric pulse rings expand from a focal point in staggered succession, like sonar waves emanating from a radar center.

ExpandOpacityStagger
13 / 60
Lorem IPSUM
14
Path Text

Spiral
Text Rings

Three rings of text orbit at different speeds on concentric circular paths, creating a mesmerizing layered spiral effect.

textPathRotationLayered
14 / 60
Lorem Ipsum Dolor Sit Amet · Consectetur Adipiscing Elit · Sed Do · · Vestibulum · Ante · Ipsum · Primis · Lorem ·
15
Geometry

Triangle
Spin

Four nested triangles rotate in alternating directions at varying speeds, creating a hypnotic recursive spinning geometry pattern.

PolygonAlternateMulti-speed
15 / 60
Lorem IPSUM DOLOR
16
Color

Rainbow
Spectrum

Each letter bounces independently while displaying its own position in the visible rainbow color spectrum from red to violet.

Per-LetterColorWave
16 / 60
L O R E M ! IPSUM · DOLOR · SIT
17
Motion

3D Flip
Panels

Two text panels alternately collapse to zero width and re-expand, simulating a 3D card-flip transition between two content states.

ScaleXFlipTransition
17 / 60
Lorem Ipsum DOLOR SIT AMET
18
Medical

Heartbeat
Monitor

An ECG waveform sweeps continuously using stroke-dashoffset animation while the centered text pulses in sync with the beat.

DashoffsetPolylinePulse
18 / 60
Lorem Ipsum DOLOR · SIT · AMET
19
Fluid

Liquid
Wave Fill

An animated wave path translates horizontally inside a clipped rectangle, simulating a rising liquid fill behind the centered text.

ClipPathWave PathFluid
19 / 60
LOREM Ipsum Dolor Sit
20
Geometry

Spinning
Squares

Three concentric squares rotate in alternating directions at different speeds, creating an elegant nested geometric orbital frame.

RectRotationNested
20 / 60
Lorem Ipsum Dolor
21
Particles

Particle
Field

Nine glowing colored dots scattered around the canvas pulse with staggered delays, creating a floating particle atmosphere.

CirclesScaleStagger
21 / 60
Lorem Ipsum Dolor Sit Amet
22
Ambient

Aurora
Borealis

Three soft blurred ellipses morph their scale and rotation over time, casting an aurora-like ambient glow behind the text.

Filter BlurEllipseAmbient
22 / 60
Lorem Ipsum DOLOR · SIT · AMET
23
Loader

Spinning
Arc Rings

Four arc segments rotate independently at different speeds and directions, forming a dynamic multi-layer loading indicator.

Circle ArcDasharraySpin
23 / 60
LOREM IPSUM DOLOR SIT AMET
24
Science

DNA
Helix

Two sine-wave strand paths interlock with horizontal rung connections, recreating the iconic double-helix DNA structure.

SVG PathSine WaveBiology
24 / 60
Lorem Ipsum
25
Astronomy

Constellation
Map

Star points connected by thin lines mirror a night-sky constellation, each star twinkling independently at its own rhythm.

SVG StarsLinesTwinkle
25 / 60
Lorem Ipsum
26
Typography

Wave
Letters

Each letter independently travels a vertical wave path with offset timing, creating a smooth undulating motion across the word.

Per-LetterWaveTransform
26 / 60
Lo re mI ps um
27
Digital

Pixel
Reveal

Colored pixel squares appear sequentially before the main text fades in, as if the image is being rendered pixel-by-pixel on screen.

Rect ScaleStaggerFade
27 / 60
Lorem Ipsum Dolor Sit Amet
28
Organic

Morphing
Blob

A gradient blob path continuously morphs its irregular outline using SVG path animation, creating an organic living-shape backdrop.

Path AnimMorphOrganic
28 / 60
Lorem Ipsum Dolor Sit Amet
29
Layered

Shadow
Clone

Color-shifted ghost copies of the text drift slowly behind the main layer, creating a multi-shadow depth illusion with motion.

OffsetOpacityDepth
29 / 60
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Dolor Sit Amet
30
Retro

Retro
Scanlines

Green phosphor terminal text with animated semi-transparent horizontal lines simulates the classic CRT television scanline look.

FilterCRTRetro Terminal
30 / 60
LOREM IPSUM DOLOR SIT AMET
31
Time

Clock
Hands

An analog clock face with hour, minute, and second hands rotating at accurate relative speeds, framing a centered text label.

RotationAnimationClock
31 / 60
LOREM IPSUM
32
Nature

Firefly
Garden

Glowing colored dots drift upward with staggered timing and ease curves, mimicking the gentle random float of summer fireflies.

Float UpGlow FilterNature
32 / 60
Lorem Ipsum Dolor Sit Amet
33
Science

Atom
Orbit

Three electrons orbit a central glowing nucleus on tilted elliptical paths at different speeds, modelling a simplified atomic structure.

EllipseOrbitRotation
33 / 60
LOREM IPSUM
34
Motion

Waving
Flag

An animated path shape simulates cloth-like flag rippling using SVG path interpolation with text clipped to follow the wave.

Path AnimClipPathWave
34 / 60
LOREM IPSUM Dolor Sit Amet consectetur adipiscing elit
35
Geometry

Diamond
Spin

Three concentric diamond polygons spin at different speeds and directions around italic central text, forming an ornate jewel frame.

PolygonRotationNested
35 / 60
Lorem Ipsum Dolor
36
Cyberpunk

Matrix
Rain

Characters fall vertically in columns at varying speeds and opacities, recreating the iconic digital rainfall from The Matrix.

FalltranslateYColumns
36 / 60
Lo re m1 01 0I ps um 01 LOREM IPSUM · DOLOR
37
Space

Star
Field

Eleven stars of varying sizes twinkle at different rhythms across the frame, creating a deep-space backdrop for the central text.

OpacityScaleStars
37 / 60
Lorem Ipsum DOLOR SIT AMET
38
Pattern

Kaleido­scope
Petals

Four semi-transparent ellipses rotate in alternating directions around a central axis, creating a symmetric kaleidoscope mandala.

EllipseRotationPattern
38 / 60
Lorem Ipsum Dolor
39
Space

Shooting
Stars

Gradient-stroked lines with glowing circle heads animate diagonally across the dark frame, simulating meteor streaks in the night sky.

Gradient LineTranslateSpace
39 / 60
Lorem Ipsum DOLOR SIT AMET
40
Zen

Breathing
Circles

Four concentric rings inhale and exhale in a staggered ripple pattern, evoking the meditative rhythm of guided breathing exercises.

ScaleOpacityStagger
40 / 60
Lorem Ipsum Dolor
41
Motion

Sliding
Panels

Two colored panels slide inward from opposite sides of a framed box, meeting in the middle to reveal the text hiding behind.

ScaleXRevealPanel
41 / 60
Lorem Ipsum Dolor Sit Amet
42
Geometry

Cross
Spin

Three pairs of intersecting lines rotate at different speeds forming dynamic cross and X-shaped patterns around centered text.

LineRotationCross
42 / 60
Lorem Ipsum Dolor
43
Space

Comet
Trail

Two glowing comet heads trail gradient lines as they sweep diagonally across the dark canvas at staggered intervals.

TranslateGradientGlow
43 / 60
Lorem Ipsum DOLOR SIT AMET
44
Fluid

Rising
Bubbles

Five soap-bubble circles float upward at staggered intervals, growing as they ascend and fading as they drift off the canvas.

TranslateYScaleFluid
44 / 60
Lorem Ipsum Dolor Sit Amet
45
Motion

Rotate
& Scale

Text rotates from a slight angle while scaling up, holds center stage, then rotates out the opposite direction for a cinematic loop.

RotateScaleOpacity
45 / 60
Lorem Ipsum Dolor Sit Amet CONSECTETUR
46
Orbits

Double
Ring

Two gradient-stroked rings rotate in opposite directions with different dash patterns, creating a mesmerizing interlocking orbit effect.

StrokeDasharrayGradient
46 / 60
Lorem IPSUM DOLOR
47
Pattern

Zigzag
Waves

Four animated polyline zigzag waveforms oscillate horizontally at staggered phases, framing centered text in kinetic geometry.

PolylineOscillateStagger
47 / 60
Lorem Ipsum
48
Signal

Morse
Code Blink

Dash and dot rectangles blink in sequence with staggered delays, visualizing a morse-code signal pattern above the glowing text.

OpacityMorseBlink
48 / 60
LOREM IPSUM DOLOR
49
Geometry

Expanding
Hexagons

Five hexagonal polygons expand outward from center text at staggered intervals, fading as they grow like geometric ripple waves.

ScalePolygonExpand
49 / 60
Lorem Ipsum Dolor
50
✦ Grand Finale

Lorem
Ipsum ✦

All techniques united — rotating multi-layer rings, pulsing spark points, glow filters, gradient text, and floating motion in one finale.

All EffectsGradientGlowFinale
50 / 60
Lorem Ipsum Dolor Sit Amet CONSECTETUR · ADIPISCING · ELIT
51
Handwriting

Classic
Cursive

An elegant cursive font drawn smoothly on screen using stroke-dashoffset animation to simulate actual handwriting.

CursiveStrokeDraw
51 / 60
Lorem Ipsum
52
Handwriting

Neon
Script

A glowing neon tube effect applied to cursive handwriting, drawing in the dark like a glowing bar sign.

NeonCursiveGlow
52 / 60
Dolor Sit Amet
53
Handwriting

Multi-Color
Trace

Three superimposed instances of the same handwriting animation play with staggered delays, creating a vibrant trailing color effect.

StaggerRGBTrace
53 / 60
Consectetur Consectetur Consectetur
54
Handwriting

Draw &
Erase

The handwriting fluently writes itself onto the canvas, pauses for a moment, and then retraces backward as if being erased.

ForwardReverseErase
54 / 60
Adipiscing Elit
55
Handwriting

Gradient
Script

A continuous handwriting animation where the ink itself is a vibrant, multi-stop linear gradient flowing across the word.

GradientInkCursive
55 / 60
Vestibulum
56
Handwriting

Abstract
Flourish

A beautifully handcrafted SVG path demonstrating a continuous loopy flourish or signature, animated as a single stroke.

SVG PathSignatureFlourish
56 / 60
57
Handwriting

Dashed
Ink

The handwriting path remains static but uses a moving dashed stroke offset, creating the illusion of moving ants or marching ink.

DasharrayMarchingContinuous
57 / 60
Suspendisse
58
Handwriting

Echo
Writing

The cursive outline writes itself, followed by a slight delay before a solid fill fades in with an offset, echoing the drawn path.

Fill FadeOffsetEcho
58 / 60
Pellentesque Pellentesque
59
Handwriting

Calligraphy
Underline

Static sans-serif text accompanied by a dynamic, hand-drawn cursive underline flourish that loops back and forth below the words.

FlourishUnderlineMixed Fonts
59 / 60
HIGHLIGHT
60
Handwriting

Infinite
Loop

A continuous figure-8 infinity symbol mimicking endless pen practice, drawn endlessly with a gradient stroke and linear speed.

InfinityLoopContinuous
60 / 60
NEVER ENDING