SVG Line Drawing Animation trouble

I am trying to use the Vivus library to animate a simple hexagon shape with two separate paths with no avail. I have been using the HYPE documentation found here (18.9 KB)

Any ideas on how to make this work would be much appreciated. Thank you

Make sure your SVG has an ID that corresponds with your call to the Vivus.js library.

1 Like

@n.gove in the SVG you must set one ID for each file, in your SVG you have 3id ( Layer_1 + x3C_polygon_x3E__5 + x3C_polygon_x3E__1 )

<svg version="1.1" id="Layer_1" xmlns="" xmlns:xlink="" x="0px" y="0px"
	 viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve">
<style type="text/css">
<path id="_x3C_polygon_x3E__5_" class="st0" d="M528.2,474.4 683.9,563.2 838.6,472.9 837.8,293.6 "/>
<path id="_x3C_polygon_x3E__1_" class="st0" d="M837.8,293.6 682.1,204.8 527.4,295.1 528.2,474.4 "/>

you should re-export the SVG with a single element.
In any case, with a logo made with simple lines you can avoid extra code. Here and example using timeline only (13.1 KB)