Trazo Turn any static icon into an animated SVG. Combine stroke drawing with motion, tweak it and copy the result.
output: standalone SVG · embedded CSS
no JS · no dependencies
made for Tabler · Lucide · Feather

Input · SVG

Examples

Animation

Stroke · the drawing

Motion · the whole icon

Each element and sub-path animates on its own, with a small offset. That way, for example, the head and body of an icon move independently.

Stroke and motion combined: the stroke draws once and the repeat applies to the motion.

Settings

↔
↕
px
1.2 s
0 s
0.15 s
0.12 s

Container mode: the animation is triggered from the parent element. The exported SVG includes the CSS line to add to your page (swap the .container selector for your button's). In the preview, hover the canvas.

DRAW + WIGGLE · LOOP hover the icon 44 × 44
Paste an SVG to see the animation

Output · animated SVG


        

          
          
        

      

    

  


  
Static SVG Animator · combines stroke and motion · drawing needs stroke icons (Tabler, Lucide, Feather); motion works with any SVG.