Motion Engineering

SVG Path Animator

Paste your raw SVG code below. Adjust the animation properties to generate the precise CSS keyframes required to create a "drawing" effect for your vector paths.

Raw SVG Code

Animation Duration2s

Stroke Length Estimate (Dasharray)1000

Adjust this if your path isn't drawing completely, or draws too quickly before the animation finishes.

Live Preview

Generated CSS

.animated-svg svg path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease-in-out forwards infinite;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}