search

maxwellito / vivus-instant

Single page app to create independent stroke animated SVGs
329 stars 42 forks source link

Doesn't work #5

Closed ibmua closed 7 years ago

ibmua commented 7 years ago

Browser: Linux [Chrome, Firefox], iOS [Safari], most likely, all others too. Link to your SVG:

<svg width="210mm" height="297mm" version="1.1" viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg" class="">
 <g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
  <path d="m113.86 38.818c-11.211-17.466-34.468-25.994-56.127-20.58-18.772 4.693-32.493 25.299-35.814 43.565-22.352 122.94 187.7 86.458 91.941-22.985z" class="ODtDaQlq_0"></path>
  <path d="m93.544 51.112c-73.066-82.395-40.496 145.4 10.691 43.03" class="ODtDaQlq_1"></path>
 </g>
<style>.ODtDaQlq_0{stroke-dasharray:380 382;stroke-dashoffset:381;}.start .ODtDaQlq_0{animation:ODtDaQlq_draw 2033ms linear 0ms forwards;}.ODtDaQlq_1{stroke-dasharray:180 182;stroke-dashoffset:181;}.start .ODtDaQlq_1{animation:ODtDaQlq_draw 966ms linear 2033ms forwards;}@keyframes ODtDaQlq_draw{100%{stroke-dashoffset:0;}}@keyframes ODtDaQlq_fade{0%{stroke-opacity:1;}94.44444444444444%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style></svg>

Steps to reproduce it: Setting pure svg code inside

maxwellito commented 7 years ago

Hiya, Sorry about the delay I was AFK for a while. Your SVG is working, but you asked to trigger the animation manually. You only need to add the class start to your SVG to start. Here is an example.

ibmua commented 7 years ago

Oh, wow! True. Guess, I didn't notice I've seet it to manual. Thanks a lot!