search

maxwellito / vivus-instant

Single page app to create independent stroke animated SVGs
337 stars 45 forks source link

Animation starts even without "active" class on manual start mode #9

Open heaversm opened 6 years ago

heaversm commented 6 years ago

Browser: Chrome Latest

Link to your SVG:

<!--?xml version="1.0" encoding="UTF-8"?-->
<svg width="649px" height="759px" viewBox="0 0 649 759" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="path-1" d="M430.851095,233.870559A6,6 0,1,1 442.851095,233.870559A6,6 0,1,1 430.851095,233.870559" class="AnSOoKfQ_0"></path>
        <path id="path-2" d="M272.970231,195.469613A6,6 0,1,1 284.970231,195.469613A6,6 0,1,1 272.970231,195.469613" class="AnSOoKfQ_1"></path>
        <path id="path-3" d="M82.1429497,404.057601A6,6 0,1,1 94.1429497,404.057601A6,6 0,1,1 82.1429497,404.057601" class="AnSOoKfQ_2"></path>
        <path id="path-4" d="M657.253132,177.815966A6,6 0,1,1 669.253132,177.815966A6,6 0,1,1 657.253132,177.815966" class="AnSOoKfQ_3"></path>
        <path id="path-5" d="M594.129259,712.377032A6,6 0,1,1 606.129259,712.377032A6,6 0,1,1 594.129259,712.377032" class="AnSOoKfQ_4"></path>
        <path id="path-6" d="M494.307369,789.525455A6,6 0,1,1 506.307369,789.525455A6,6 0,1,1 494.307369,789.525455" class="AnSOoKfQ_5"></path>
        <path id="path-7" d="M688.667535,706.669399A6,6 0,1,1 700.667535,706.669399A6,6 0,1,1 688.667535,706.669399" class="AnSOoKfQ_6"></path>
    </defs>
    <g id="Sections/Roadmap" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-751.000000, -2477.000000)">
        <g id="Group-2" transform="translate(0.000000, 2336.000000)">
            <g id="Group-4" transform="translate(606.000000, 0.000000)">
                <g id="Group-3" transform="translate(547.778967, 547.778967) scale(1, -1) rotate(8.000000) translate(-547.778967, -547.778967) translate(62.778967, 62.778967)">
                    <path d="M485,890 C708.675324,890 890,708.675324 890,485 C890,261.324676 708.675324,80 485,80 C261.324676,80 80,261.324676 80,485" id="Oval-7-Copy" stroke="#000000" stroke-width="2" opacity="0.1" stroke-linecap="round" stroke-linejoin="round" class="AnSOoKfQ_7"></path>
                    <path d="M485,80 C289.532572,80 126.407578,218.474422 88.3726052,402.675677" id="Oval-7-Copy" stroke="#667A9B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="AnSOoKfQ_8"></path>
                    <path d="M485,840 C681.061086,840 840,681.061086 840,485 C840,288.938914 681.061086,130 485,130 C288.938914,130 130,288.938914 130,485" id="Oval-7-Copy" stroke="#000000" stroke-width="2" opacity="0.1" stroke-linecap="round" stroke-linejoin="round" transform="translate(485.000000, 485.000000) rotate(30.000000) translate(-485.000000, -485.000000) " class="AnSOoKfQ_9"></path>
                    <path d="M632.497066,83.1056514 C489.481616,83.1056514 366.218412,167.67507 309.987908,289.533454" id="Oval-7-Copy" stroke="#667A9B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(471.242487, 186.319553) rotate(30.000000) translate(-471.242487, -186.319553) " class="AnSOoKfQ_10"></path>
                    <path d="M485,790 C653.446849,790 790,653.446849 790,485 C790,316.553151 653.446849,180 485,180 C316.553151,180 180,316.553151 180,485" id="Oval-7-Copy" stroke="#000000" stroke-width="2" opacity="0.1" stroke-linecap="round" stroke-linejoin="round" transform="translate(485.000000, 485.000000) rotate(10.000000) translate(-485.000000, -485.000000) " class="AnSOoKfQ_11"></path>
                    <path d="M509.739085,805.810367 C527.307386,801.764788 544.295718,796.201678 560.558654,789.266463 C610.601651,767.925977 653.776132,733.593479 685.844981,690.506084" id="Oval-7-Copy" stroke="#667A9B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(597.792033, 748.158225) rotate(10.000000) translate(-597.792033, -748.158225) " class="AnSOoKfQ_12"></path>
                    <path d="M485,740 C625.832611,740 740,625.832611 740,485 C740,344.167389 625.832611,230 485,230 C344.167389,230 230,344.167389 230,485" id="Oval-7-Copy" stroke="#000000" stroke-width="2" opacity="0.1" stroke-linecap="round" stroke-linejoin="round" transform="translate(485.000000, 485.000000) rotate(20.000000) translate(-485.000000, -485.000000) " class="AnSOoKfQ_13"></path>
                    <path d="M681.086987,683.372113 C723.818644,637.773817 749.985024,576.462931 749.985024,509.04056 C749.985024,368.207949 635.817636,254.04056 494.985024,254.04056 C448.065319,254.04056 404.105325,266.712589 366.340791,288.820897" id="Oval-7-Copy" stroke="#667A9B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(558.162908, 468.706337) rotate(20.000000) translate(-558.162908, -468.706337) " class="AnSOoKfQ_14"></path>
                    <g id="Oval-2">
                        <use fill="#405982" fill-rule="evenodd" xlink:href="#path-1"></use>
                        <path stroke="#667A9B" stroke-width="2" d="M431.851095,233.870559A5,5 0,1,1 441.851095,233.870559A5,5 0,1,1 431.851095,233.870559" class="AnSOoKfQ_15"></path>
                    </g>
                    <g id="Oval-2">
                        <use fill="#405982" fill-rule="evenodd" xlink:href="#path-2"></use>
                        <path stroke="#667A9B" stroke-width="2" d="M273.970231,195.469613A5,5 0,1,1 283.970231,195.469613A5,5 0,1,1 273.970231,195.469613" class="AnSOoKfQ_16"></path>
                    </g>
                    <g id="Oval-2">
                        <use fill="#405982" fill-rule="evenodd" xlink:href="#path-3"></use>
                        <path stroke="#667A9B" stroke-width="2" d="M83.1429497,404.057601A5,5 0,1,1 93.1429497,404.057601A5,5 0,1,1 83.1429497,404.057601" class="AnSOoKfQ_17"></path>
                    </g>
                    <g id="Oval-2">
                        <use fill="#405982" fill-rule="evenodd" xlink:href="#path-4"></use>
                        <path stroke="#667A9B" stroke-width="2" d="M658.253132,177.815966A5,5 0,1,1 668.253132,177.815966A5,5 0,1,1 658.253132,177.815966" class="AnSOoKfQ_18"></path>
                    </g>
                    <g id="Oval-2">
                        <use fill="#405982" fill-rule="evenodd" xlink:href="#path-5"></use>
                        <path stroke="#667A9B" stroke-width="2" d="M595.129259,712.377032A5,5 0,1,1 605.129259,712.377032A5,5 0,1,1 595.129259,712.377032" class="AnSOoKfQ_19"></path>
                    </g>
                    <g id="Oval-2">
                        <use fill="#405982" fill-rule="evenodd" xlink:href="#path-6"></use>
                        <path stroke="#667A9B" stroke-width="2" d="M495.307369,789.525455A5,5 0,1,1 505.307369,789.525455A5,5 0,1,1 495.307369,789.525455" class="AnSOoKfQ_20"></path>
                    </g>
                    <g id="Oval-2">
                        <use fill="#405982" fill-rule="evenodd" xlink:href="#path-7"></use>
                        <path stroke="#667A9B" stroke-width="2" d="M689.667535,706.669399A5,5 0,1,1 699.667535,706.669399A5,5 0,1,1 689.667535,706.669399" class="AnSOoKfQ_21"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
<style>.AnSOoKfQ_0{stroke-dasharray:38 40;stroke-dashoffset:39;}.active .AnSOoKfQ_0{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_1{stroke-dasharray:38 40;stroke-dashoffset:39;}.active .AnSOoKfQ_1{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_2{stroke-dasharray:38 40;stroke-dashoffset:39;}.active .AnSOoKfQ_2{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_3{stroke-dasharray:38 40;stroke-dashoffset:39;}.active .AnSOoKfQ_3{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_4{stroke-dasharray:38 40;stroke-dashoffset:39;}.active .AnSOoKfQ_4{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_5{stroke-dasharray:38 40;stroke-dashoffset:39;}.active .AnSOoKfQ_5{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_6{stroke-dasharray:38 40;stroke-dashoffset:39;}.active .AnSOoKfQ_6{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_7{stroke-dasharray:1909 1911;stroke-dashoffset:1910;}.active .AnSOoKfQ_7{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_8{stroke-dasharray:554 556;stroke-dashoffset:555;}.active .AnSOoKfQ_8{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_9{stroke-dasharray:1674 1676;stroke-dashoffset:1675;}.active .AnSOoKfQ_9{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_10{stroke-dasharray:405 407;stroke-dashoffset:406;}.active .AnSOoKfQ_10{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_11{stroke-dasharray:1438 1440;stroke-dashoffset:1439;}.active .AnSOoKfQ_11{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_12{stroke-dasharray:215 217;stroke-dashoffset:216;}.active .AnSOoKfQ_12{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_13{stroke-dasharray:1202 1204;stroke-dashoffset:1203;}.active .AnSOoKfQ_13{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_14{stroke-dasharray:728 730;stroke-dashoffset:729;}.active .AnSOoKfQ_14{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_15{stroke-dasharray:32 34;stroke-dashoffset:33;}.active .AnSOoKfQ_15{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_16{stroke-dasharray:32 34;stroke-dashoffset:33;}.active .AnSOoKfQ_16{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_17{stroke-dasharray:32 34;stroke-dashoffset:33;}.active .AnSOoKfQ_17{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_18{stroke-dasharray:32 34;stroke-dashoffset:33;}.active .AnSOoKfQ_18{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_19{stroke-dasharray:32 34;stroke-dashoffset:33;}.active .AnSOoKfQ_19{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_20{stroke-dasharray:32 34;stroke-dashoffset:33;}.active .AnSOoKfQ_20{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}.AnSOoKfQ_21{stroke-dasharray:32 34;stroke-dashoffset:33;}.active .AnSOoKfQ_21{animation:AnSOoKfQ_draw 3000ms ease-out 0ms forwards;}@keyframes AnSOoKfQ_draw{100%{stroke-dashoffset:0;}}@keyframes AnSOoKfQ_fade{0%{stroke-opacity:1;}94.44444444444444%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style></svg>

Steps to reproduce it:

Save the code above as an SVG (github will not allow upload of SVG). Go to vivus instant. Upload attached image. Choose autostart. Generate the new animated svg. Drop on a page. Animation will automatically play.

maxwellito commented 6 years ago

If you select "autostart" then save, the generated SVG will play automatically.

Also, avoid drag and drop an SVG that has already beed generated woth Vivus instant. Unexpected result might happen.