Pick your SVG element
Click any stroked shape on your page. The Builder edits the live SVG, not a copy.
Motion.page · Visual animation builder
SVG lines that draw themselves.
Reveal a logo, icon, diagram, or signature stroke by stroke: the hand-drawn look you see on premium sites. Works on any stroked SVG shape, wired to page load or scroll in a visual editor, without writing code.
The product
Watch it actually work.
Meet Motion.page: All-in-One platform for web animation · YouTube
Inside the Builder
A draw is one range slider.
Select the shape, enable DrawSVG strokes, and set where the stroke starts and ends. The Builder shows the hidden FROM state exactly as it will render before the draw plays.
Turn on DrawSVG strokes
Open the Animate SVG tile and enable DrawSVG strokes. Drag the range from 0% to 100% to draw the whole shape, or dial in any window.
Set the range and publish
From-only reads what's already on the page, so one value is often enough. Publish clean code with zero dependencies.
Works with every platform you already use
You drew that whole figure with your scrollbar. The same scrubbed range wires to your own shape in the Builder.
The Animate SVG panel
Draw and recolor in one tile.
Inside the Visual property list, the Animate SVG tile holds DrawSVG strokes (a range slider plus two % fields) next to Stroke color and Fill color, so a draw-on can recolor as it goes.
A draw-on-load, as published. In the Builder, this is two sliders. Motion SDK, Builder v3.2.10:
Motion('logo-draw', '.logo path', {
from: { drawSVG: '0% 0%' },
to: { drawSVG: '0% 100%' },
duration: 1.4,
ease: 'power2.inOut',
stagger: { each: 0.12 },
}).onPageLoad();
Under the hood
What a range slider actually does.
A range slider looks simple. Here's what the engine handles to keep it that way.
- Every SVG shape that has a length
- Any element exposing a measurable stroke length draws on: path, circle, ellipse, line, polyline, polygon, and rect. It's a runtime check, not a fixed allowlist.
- Draw from either end, or a middle segment
- Two endpoints, 0 to 100% each. Draw start to end, end to start, or grow a window that starts and stops nowhere near either edge, like drawSVG: "20% 80%".
- Percent in the Builder; the SDK also takes pixels or a mix
- "0% 100%", "0px 240px", or mix them: "0% 100px" is valid too.
- From-only reads the current state
- Set just a from value and the SDK reads the shape's current drawn state as the implicit end: the classic "draw the whole thing on load" needs one line.
- Re-measured on resize
- Path length is cached per element, then re-measured on window resize and scroll refresh, so a draw stays accurate through a responsive reflow.
- Ships only when you use it
- DrawSVG is part of Motion.page's own engine and is only bundled into your published code when a timeline actually uses it.
What is SVG line animation?
SVG line animation is an effect where a stroke appears to draw itself: a logo, an icon, a signature, or a diagram renders progressively, from a bare outline to the finished shape, instead of simply appearing.
The technique behind it is a CSS trick applied to SVG: stroke-dasharray carves a stroke into a dash pattern, and stroke-dashoffset shifts where that pattern begins. Set the dash to match the shape's full length and slide the offset from one end to the other, and the stroke appears to draw itself into view.
Motion.page builds both sides of that technique visually: pick the shape, set a start and end percentage (or a pixel range, or a mix of both), and publish. Combine the draw with stroke and fill color tweens in one animation for a logo that recolors as it completes.
Questions about DrawSVG.
What is DrawSVG?
A line-drawing effect for SVG strokes: the shape appears to draw itself, from a bare outline to fully rendered. Under the hood it animates stroke-dasharray and stroke-dashoffset. Motion.page just gives you a visual range slider instead of the raw CSS.
Do I need to write code?
No. Pick an element, open the Animate SVG tile, enable DrawSVG strokes, and drag the range. Developers can reach for the SDK directly, the same drawSVG property either way.
Which SVG elements can I animate?
Anything with a measurable stroke length, checked at runtime, not from a fixed list. In practice that's path, circle, ellipse, line, polyline, polygon, and rect.
Does my artwork need to be prepared first?
Yes, the shape needs an existing visible stroke. DrawSVG doesn't add one or convert a filled shape into a stroke for you. If your logo or icon is filled only, give it a stroke first, in your SVG editor, or with the panel's own Stroke color field.
How is this different from writing DrawSVG code myself?
The engine is Motion.page's own. You're not buying the technique, you're buying the workflow: click a shape on your live page, drag a range slider, preview the exact FROM state, and publish clean dependency-free code to WordPress or Desktop. If you'd rather hand-write it, the SDK is right there too.
Does the shape flash fully drawn before it animates?
It can. A from-only draw paints the finished stroke until the timeline initializes. Pre-hide the shape with one line of CSS (stroke-dasharray: 1 1; stroke-dashoffset: 1) and give the animation an explicit to range like 0% 100%. The demos on this page do exactly that.
Does it work in WordPress and Desktop?
Yes. DrawSVG strokes are available in both the Motion.page WordPress plugin and the Desktop app, with the same panel.
What happens to my animations if I cancel?
Timelines published as local code live in your own site and keep running; they don't phone home. CDN-hosted delivery (where we host and serve the animation file for you) and further editing require an active license.
Still deciding? Try free for 7 days →
Pick your creative weapon.
Animations, shaders, or both. Flat pricing, no per-seat math.
Includes DrawSVG
Visual animation builder
Builder
Unlimited projects
Unlimited WordPress sites
Unlimited desktop projects
CDN and local code
All Builder features
€149/ year
That's just €12.42/mo · save 50%
WebGPU shader editor
Canvas
WebGPU-based shader editor
Unlimited canvases
Publish with CDN
Export to code, image or video
All Canvas features
€149/ year
That's just €12.42/mo · save 50%
Builder + Canvas combined
Bundle
Everything in Builder
Everything in Canvas
Priority support
Best value
DrawSVG
Give your logo a proper entrance.
Instant access, in Motion.page for WordPress and Desktop. Animations published as local code keep running on your site, even if you cancel.