Draw multiple SVG's with Vivus.js

Question

How could I draw multiple SVG's with Vivus.js, so I don't have to call the function for each drawing, such as the ones below? Also, there seems to be an issue with the second drawing, ie it's not animating... anyone has experience with these perhaps?

Here's a pen due to the svg code size: https://codepen.io/anon/pen/KoNjjy

new Vivus(welcome, {
    type: 'async',
    start: 'autostart',
    duration: 50
});

new Vivus(tablet, {
    type: 'async',
    start: 'autostart',
    duration: 50
});

Answer 1

Regarding the problem with images not animating – i believe it's caused by two separare problems:

First, a minor syntax error in your code. You need to pass IDs as strings:

new Vivus('welcome', { // note the quotes around 'welcome'
    type: 'async',
    start: 'autostart',
    duration: 50
});

Second, the tablet image in your codepen is made of a single filled path, not individual lines, and Vivus doesn't know how to animate it (and besides that, it looks like a laptop :)):

(EDIT: you can animate it if you set fill/stroke properly, see @wwv's comment & link below)

Regarding running Vivus on multiple objects – it does not support passing multiple objects/IDs directly, but you can avoid writing new Vivus … for each image:

const animate = ["welcome", "tablet"];

animate.forEach(svgId =>
    new Vivus(svgId, {
      type: "async",
      start: "autostart",
      duration: 50
    })
);

Or, in old ES5 syntax:

var animate = ["welcome", "tablet"];

animate.forEach(function (svgId) {
  return new Vivus(svgId, {
    type: "async",
    start: "autostart",
    duration: 50
  });
});

Working snippet, with simpler/smaller SVGs:

 const animate = ["circle", "square"]; animate.forEach( svgId => new Vivus(svgId, { type: "async", start: "autostart", duration: 50 }) ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.3/vivus.min.js"></script> <svg id="circle" viewBox="0 0 60 60" width="60" height="60" xmlns="http://www.w3.org/2000/svg"> <circle cx="30" cy="30" r="25" fill="none" stroke="#ff005c" stroke-width="2" /> </svg> <svg id="square" viewBox="0 0 60 60" width="60" height="60" xmlns="http://www.w3.org/2000/svg"> <rect x="5" y="5" width="50" height="50" fill="none" stroke="#09f" stroke-width="2" /> </svg>