Create SVG animations with path drawing, morphing, and transform keyframes using SMIL or CSS.
This tool builds animation markup around an SVG you supply: a path-drawing reveal, a shape morph between two outlines, or a transform sequence (translate, rotate, scale), then outputs it as SMIL (<animate>, <animateTransform>) embedded in the SVG or as a separate CSS @keyframes block. For the draw effect it works out the stroke-dasharray/stroke-dashoffset pair from the path's own length. The most common surprise: morph animations only interpolate cleanly when the start and end paths have the same number and type of commands, and CSS d-property morphing isn't supported in every browser version still in use.
A concrete input and expected output from the current implementation.
Input
Path: M0,0 L100,0 (a straight 100-unit horizontal line) | Animation: draw | Duration: 2s | Output: CSS
Expected output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path class="draw" d="M0,0 L100,0" fill="none" stroke="#000" stroke-width="2"/>
</svg>
<style>
.draw {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: draw-path 2s ease-in-out forwards;
}
@keyframes draw-path {
to { stroke-dashoffset: 0; }
}
</style> The line runs from (0,0) to (100,0), a Euclidean distance of exactly 100 units, so stroke-dasharray and the starting stroke-dashoffset are both 100 with no estimation needed; a curved path would instead get a sampled approximation of its length.
For a draw-in animation the tool sets stroke-dasharray to the path's total length and animates stroke-dashoffset from that length down to 0, so the stroke appears to trace the outline as it plays. For straight segments the length comes from the exact coordinates; for curves it is approximated by sampling points along the path, since there is no closed-form length formula for arbitrary Beziers.
Choosing SMIL wraps the animation in <animate>/<animateTransform> elements inside the SVG itself, so it plays even when the file is opened directly or embedded via <img>. Choosing CSS produces a @keyframes block tied to a class you apply to the shape, which is easier to pause, restart, or override with media queries, but only animates where that stylesheet is actually loaded.
It depends on where the SVG will live. Both can run when the animation markup is embedded directly in the SVG file, including inside an <img> tag. Prefer CSS if you need to pause, restart, or reuse the animation across states via classes; prefer SMIL for direct declarative control over values and timing without writing percentage keyframes.
No. It operates on SVG path and shape elements, not raster pixels, so the draw and morph effects need actual path data. Raster artwork has to be traced or converted into paths first, elsewhere, before it can be animated here.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.