Libraries for SVG Drawing Animations

Animating SVG paths to mimic a drawing effect remains a popular technique, initially popularized by Jake Archibald in 2013. This article explores four JavaScript libraries simplifying this process, particularly beneficial for complex animations involving multiple SVGs and paths.

Previously, Chris Coyier detailed the underlying mechanics using CSS stroke-dasharray and stroke-dashoffset. However, these libraries offer a more concise approach. We'll use a castle SVG from svgrepo (converted to code format via Figma's "Copy as SVG" function) for demonstration. To prepare the SVG, ensure paths have fill="none", a defined stroke (e.g., #B2441D), and stroke-width (e.g., 2px). We'll also group paths by color and assign class names:

• #695A69: color-1
• #B2441D: color-2
• #DFDOC6: color-3
• #C8B2A8: color-4
• #DE582A: color-5
• #AO8A8A: color-6

The animation will first draw the outline, then fill with the respective colors. Here's a simplified SVG snippet:

<svg fill="none" height="480" viewbox="0 0 480 480" width="480" xmlns="http://www.w3.org/2000/svg">
  <path d="..." stroke="#B2441D" stroke-width="2px" class="color-2"></path>
  <path d="..." stroke="#B2441D" stroke-width="2px" class="color-2"></path>
  <!-- ... more paths ... -->
</svg>

Let's examine the libraries:

Library 1: Vivus

Vivus is a lightweight library (no dependencies) for animating SVG drawings. Using a CDN:

<script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>

Create a Vivus instance:

new Vivus('svg-castle', { duration: 200, type: 'oneByOne' });

A callback function fills paths with color:

function fillPath(classname, color) {
  document.querySelectorAll(`#svg-castle .${classname}`).forEach(path => path.style.fill = color);
}

function after() {
  fillPath('color-1', '#695a69');
  // ... fill other colors ...
}

Library 2: Walkway.js

Walkway is another lightweight library for animating SVG paths, lines, and polygons. Using a CDN:

<script src="https://cdn.jsdelivr.net/npm/walkway@latest/dist/walkway.min.js"></script>

Create a Walkway instance and draw:

const svg = new Walkway({ selector: '#svg-castle', duration: 3000 });
svg.draw(after); // Using the same 'after' function from Vivus example

Library 3: Lazy Line Painter

Lazy Line Painter offers a modern approach with minimal setup. Using a CDN:

<script src="https://cdn.jsdelivr.net/npm/lazy-line-painter@latest/dist/lazy-line-painter.min.js"></script>

Initialize and paint, using an event listener for the complete:all event:

let myAnimation = new LazyLinePainter(document.querySelector('#svg-castle'), { strokeDash: '2, 2' });
myAnimation.on('complete:all', after);
myAnimation.paint();

Library 4: Framer Motion (React-specific)

Framer Motion is a powerful React animation library. It requires installation (npm install framer-motion) and uses the <motion.path></motion.path> component. While effective for simpler SVGs, it's less efficient for complex SVGs with numerous paths due to the repetitive nature of converting each path.

Conclusion:

These libraries offer streamlined solutions for creating hand-drawn SVG animation effects, avoiding the complexities of a purely CSS-based approach which would require extensive code repetition for multiple paths. The choice depends on project needs and complexity; for very complex SVGs, Vivus or Walkway might be more suitable than Framer Motion.

The above is the detailed content of Libraries for SVG Drawing Animations. For more information, please follow other related articles on the PHP Chinese website!