Creating an Animated SVG Signature with Stroke‑Dasharray and CSS

Preface

While browsing a personal website, the author noticed a stylish animated signature effect and wanted to create one.

Preparation

First, understand SVG, its animation capabilities, and line design. The author consulted three articles: “How SVG Line Animation Works”, “Animated line drawing in SVG”, and “Animated SVG logo”.

Line Design

The author used Figma to design the connected characters, drawing points with the pen tool and exporting the result as SVG.

Final SVG effect:

SVG Graphics

Two important properties for line graphics are stroke-dasharray and stroke-dashoffset . stroke-dasharray defines the lengths of painted and gap segments, while stroke-dashoffset shifts the start position.

When both properties are set to a value larger than the path length, the shape is fully visible; decreasing stroke-dashoffset to zero creates a drawing animation, which can be driven by CSS.

Remember that the dasharray length must be at least as long as the SVG path, otherwise the line appears broken.

Animation

@media (prefers-reduced-motion) {
  path {
    animation: none !important;
    stroke-dasharray: unset !important;
  }
}
@keyframes grow {
  0% {
    stroke-dashoffset: 1px;
    stroke-dasharray: 0 600px;
    opacity: 0;
    stroke: #00aeef;
  }
  10% { opacity: 1; }
  40% {
    stroke-dasharray: 600px 0;
    stroke: #ed1c24;
  }
  /* Moving back */
  85% {
    stroke-dasharray: 600px 0;
    stroke: #8cd790;
  }
  95%, to {
    stroke-dasharray: 0 600px;
    stroke: #f69f37;
  }
}
path {
  stroke-dashoffset: 1px;
  stroke-dasharray: 600px 0;
  animation: grow 10s ease forwards infinite;
  transform-origin: center;
  stroke: #303030;
  animation-delay: 0s;
}

Note: Ensure the dasharray length is greater than or equal to the SVG line length to avoid segmented lines.