search

maxwellito / vivus-instant

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

limited svg just displaying no animations. #11

Open laurencefass opened 6 years ago

laurencefass commented 6 years ago

https://maxwellito.github.io/vivus-instant/

i've tried a variety of different svgs i created myself and some downloaded online. all i can see is the still image.

is the site still working?

maxwellito commented 6 years ago

Hi there,

I'm afraid the webapp is on and still working. You can try with this SVG : https://raw.githubusercontent.com/maxwellito/vivus/master/test/manual/synth.svg I believe your SVG doesn't respect the guidelines: Vivus animate stroke based SVGs. The animation is on the stroke of the paths and not on the filling of them.

laurencefass commented 6 years ago

many thanks. the example synth works ok. please can you explain why this doesnt work:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Serif DrawPlus 12,0,4,27 (May 24, 08:37:51) (http://www.serif.com) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="567.796" height="83.8227">
    <g id="selection" transform="matrix(1,0,0,1,-114.233,-129.075)">
        <path id="dp_path001" fill="black" fill-rule="evenodd" d="M 136.645,169.356 L 173.076,169.356 L 173.076,146.845 C 173.076,142.857 172.829,140.221 172.325,138.957 C 171.931,138 171.121,137.171 169.888,136.479 C 168.219,135.561 166.461,135.097 164.605,135.097 L 161.821,135.097 L 161.821,132.925 L 195.488,132.925 L 195.488,135.097 L 192.704,135.097 C 190.848,135.097 189.091,135.541 187.421,136.42 C 186.188,137.032 185.348,137.971 184.904,139.215 C 184.46,140.468 184.233,143.005 184.233,146.845 L 184.233,197.396 C 184.233,201.364 184.48,203.991 184.983,205.264 C 185.379,206.232 186.168,207.061 187.363,207.752 C 189.071,208.68 190.848,209.144 192.704,209.144 L 195.488,209.144 L 195.488,211.316 L 161.821,211.316 L 161.821,209.144 L 164.605,209.144 C 167.815,209.144 170.153,208.197 171.625,206.311 C 172.592,205.077 173.076,202.105 173.076,197.396 L 173.076,173.601 L 136.645,173.601 L 136.645,197.396 C 136.645,201.364 136.892,203.991 137.395,205.264 C 137.78,206.232 138.589,207.061 139.824,207.752 C 141.473,208.68 143.231,209.144 145.076,209.144 L 147.9,209.144 L 147.9,211.316 L 114.233,211.316 L 114.233,209.144 L 117.017,209.144 C 120.265,209.144 122.625,208.197 124.096,206.311 C 125.024,205.077 125.488,202.105 125.488,197.396 L 125.488,146.845 C 125.488,142.857 125.241,140.221 124.739,138.957 C 124.343,138 123.553,137.171 122.359,136.479 C 120.651,135.561 118.873,135.097 117.017,135.097 L 114.233,135.097 L 114.233,132.925 L 147.9,132.925 L 147.9,135.097 L 145.076,135.097 C 143.231,135.097 141.473,135.541 139.824,136.42 C 138.629,137.032 137.8,137.971 137.336,139.215 C 136.872,140.468 136.645,143.005 136.645,146.845 Z "/>
        <path id="dp_path002" fill="black" fill-rule="evenodd" d="M 210.516,178.243 C 210.476,186.091 212.392,192.252 216.243,196.724 C 220.103,201.187 224.644,203.419 229.848,203.419 C 233.323,203.419 236.344,202.471 238.911,200.584 C 241.477,198.699 243.631,195.431 245.368,190.781 L 247.145,191.936 C 246.336,197.257 243.985,202.076 240.085,206.409 C 236.196,210.735 231.319,212.896 225.453,212.896 C 219.096,212.896 213.645,210.419 209.115,205.472 C 204.583,200.516 202.321,193.861 202.321,185.499 C 202.321,176.445 204.641,169.385 209.292,164.321 C 213.932,159.256 219.767,156.719 226.787,156.719 C 232.72,156.719 237.597,158.673 241.419,162.573 C 245.24,166.483 247.145,171.707 247.145,178.243 Z M 210.516,174.885 L 235.1,174.885 C 234.903,171.519 234.497,169.139 233.885,167.757 C 232.917,165.615 231.476,163.927 229.561,162.701 C 227.645,161.477 225.652,160.865 223.559,160.865 C 220.349,160.865 217.487,162.1 214.949,164.568 C 212.421,167.047 210.94,170.481 210.516,174.885 Z "/>
        <path id="dp_path003" fill="black" fill-rule="evenodd" d="M 272.241,129.075 L 272.241,199.371 C 272.241,202.677 272.488,204.88 272.971,205.956 C 273.455,207.032 274.196,207.851 275.203,208.404 C 276.209,208.967 278.085,209.243 280.831,209.243 L 280.831,211.316 L 254.765,211.316 L 254.765,209.243 C 257.224,209.243 258.903,208.996 259.801,208.493 C 260.689,207.989 261.4,207.16 261.904,206.005 C 262.407,204.86 262.664,202.639 262.664,199.371 L 262.664,151.191 C 262.664,145.227 262.525,141.553 262.259,140.192 C 261.992,138.829 261.559,137.891 260.956,137.388 C 260.364,136.893 259.603,136.637 258.675,136.637 C 257.668,136.637 256.404,136.943 254.864,137.565 L 253.877,135.492 L 269.644,129.075 Z "/>
        <path id="dp_path004" fill="black" fill-rule="evenodd" d="M 305.099,129.075 L 305.099,199.371 C 305.099,202.677 305.345,204.88 305.828,205.956 C 306.312,207.032 307.053,207.851 308.06,208.404 C 309.067,208.967 310.943,209.243 313.688,209.243 L 313.688,211.316 L 287.623,211.316 L 287.623,209.243 C 290.081,209.243 291.76,208.996 292.659,208.493 C 293.547,207.989 294.257,207.16 294.761,206.005 C 295.264,204.86 295.521,202.639 295.521,199.371 L 295.521,151.191 C 295.521,145.227 295.383,141.553 295.116,140.192 C 294.849,138.829 294.416,137.891 293.813,137.388 C 293.221,136.893 292.46,136.637 291.532,136.637 C 290.525,136.637 289.261,136.943 287.721,137.565 L 286.735,135.492 L 302.501,129.075 Z "/>
        <path id="dp_path005" fill="black" fill-rule="evenodd" d="M 345.617,156.719 C 353.633,156.719 360.081,159.769 364.939,165.861 C 369.065,171.064 371.129,177.048 371.129,183.791 C 371.129,188.54 369.993,193.337 367.712,198.205 C 365.441,203.063 362.303,206.725 358.313,209.193 C 354.325,211.663 349.881,212.896 344.975,212.896 C 336.997,212.896 330.649,209.717 325.949,203.349 C 321.971,197.988 319.987,191.976 319.987,185.301 C 319.987,180.444 321.191,175.605 323.6,170.808 C 326.009,166.009 329.188,162.455 333.117,160.164 C 337.057,157.864 341.224,156.719 345.617,156.719 Z M 343.82,160.471 C 341.776,160.471 339.723,161.073 337.659,162.287 C 335.596,163.501 333.927,165.635 332.653,168.685 C 331.38,171.725 330.748,175.636 330.748,180.415 C 330.748,188.125 332.279,194.779 335.349,200.368 C 338.409,205.956 342.457,208.749 347.463,208.749 C 351.205,208.749 354.295,207.209 356.724,204.119 C 359.153,201.039 360.367,195.737 360.367,188.224 C 360.367,178.815 358.343,171.42 354.295,166.019 C 351.551,162.317 348.065,160.471 343.82,160.471 Z "/>
        <path id="dp_path006" fill="black" fill-rule="evenodd" d="M 405.821,158.299 L 428.045,158.299 L 428.045,160.372 C 426.003,160.529 424.66,160.895 424.028,161.477 C 423.385,162.071 423.069,162.9 423.069,163.995 C 423.069,165.2 423.396,166.661 424.057,168.379 L 435.431,198.759 L 446.844,173.917 L 443.833,166.217 C 442.905,163.887 441.691,162.268 440.189,161.369 C 439.34,160.816 437.761,160.491 435.441,160.372 L 435.441,158.299 L 460.667,158.299 L 460.667,160.372 C 457.892,160.491 455.927,161.004 454.772,161.921 C 454.003,162.553 453.617,163.571 453.617,164.953 C 453.617,165.704 453.765,166.473 454.081,167.263 L 466.096,197.672 L 477.303,168.359 C 478.092,166.267 478.487,164.588 478.487,163.344 C 478.487,162.603 478.112,161.952 477.352,161.359 C 476.601,160.777 475.111,160.451 472.909,160.372 L 472.909,158.299 L 489.564,158.299 L 489.564,160.372 C 486.208,160.876 483.74,163.165 482.16,167.233 L 464.497,212.896 L 462.097,212.896 L 448.839,179.012 L 433.269,212.896 L 431.196,212.896 L 414.213,168.359 C 413.099,165.525 411.992,163.611 410.916,162.613 C 409.84,161.625 408.141,160.876 405.821,160.372 Z "/>
        <path id="dp_path007" fill="black" fill-rule="evenodd" d="M 520.329,156.719 C 528.345,156.719 534.793,159.769 539.651,165.861 C 543.777,171.064 545.841,177.048 545.841,183.791 C 545.841,188.54 544.705,193.337 542.424,198.205 C 540.153,203.063 537.015,206.725 533.025,209.193 C 529.037,211.663 524.593,212.896 519.687,212.896 C 511.709,212.896 505.361,209.717 500.661,203.349 C 496.683,197.988 494.699,191.976 494.699,185.301 C 494.699,180.444 495.903,175.605 498.312,170.808 C 500.721,166.009 503.9,162.455 507.829,160.164 C 511.769,157.864 515.936,156.719 520.329,156.719 Z M 518.532,160.471 C 516.488,160.471 514.435,161.073 512.371,162.287 C 510.308,163.501 508.639,165.635 507.365,168.685 C 506.092,171.725 505.46,175.636 505.46,180.415 C 505.46,188.125 506.991,194.779 510.061,200.368 C 513.121,205.956 517.169,208.749 522.175,208.749 C 525.917,208.749 529.007,207.209 531.436,204.119 C 533.865,201.039 535.079,195.737 535.079,188.224 C 535.079,178.815 533.055,171.42 529.007,166.019 C 526.263,162.317 522.777,160.471 518.532,160.471 Z "/>
        <path id="dp_path008" fill="black" fill-rule="evenodd" d="M 569.396,156.719 L 569.396,168.685 C 573.839,160.708 578.4,156.719 583.071,156.719 C 585.193,156.719 586.951,157.371 588.343,158.664 C 589.735,159.957 590.425,161.457 590.425,163.165 C 590.425,164.676 589.923,165.951 588.915,166.997 C 587.908,168.043 586.704,168.567 585.312,168.567 C 583.949,168.567 582.439,167.895 580.76,166.543 C 579.081,165.189 577.837,164.519 577.028,164.519 C 576.337,164.519 575.587,164.904 574.777,165.684 C 573.04,167.273 571.243,169.889 569.396,173.543 L 569.396,198.976 C 569.396,201.897 569.761,204.1 570.503,205.6 C 571.005,206.637 571.895,207.496 573.168,208.197 C 574.441,208.897 576.277,209.243 578.677,209.243 L 578.677,211.316 L 551.527,211.316 L 551.527,209.243 C 554.212,209.243 556.207,208.819 557.519,207.969 C 558.477,207.348 559.148,206.36 559.533,205.008 C 559.721,204.347 559.82,202.471 559.82,199.371 L 559.82,178.736 C 559.82,172.575 559.691,168.903 559.444,167.727 C 559.197,166.552 558.733,165.693 558.063,165.151 C 557.391,164.617 556.552,164.341 555.555,164.341 C 554.36,164.341 553.007,164.627 551.507,165.209 L 550.933,163.136 L 566.968,156.719 Z "/>
        <path id="dp_path009" fill="black" fill-rule="evenodd" d="M 611.555,129.075 L 611.555,199.371 C 611.555,202.677 611.801,204.88 612.284,205.956 C 612.768,207.032 613.509,207.851 614.516,208.404 C 615.523,208.967 617.399,209.243 620.144,209.243 L 620.144,211.316 L 594.079,211.316 L 594.079,209.243 C 596.537,209.243 598.216,208.996 599.115,208.493 C 600.003,207.989 600.713,207.16 601.217,206.005 C 601.72,204.86 601.977,202.639 601.977,199.371 L 601.977,151.191 C 601.977,145.227 601.839,141.553 601.572,140.192 C 601.305,138.829 600.872,137.891 600.269,137.388 C 599.677,136.893 598.916,136.637 597.988,136.637 C 596.981,136.637 595.717,136.943 594.177,137.565 L 593.191,135.492 L 608.957,129.075 Z "/>
        <path id="dp_path010" fill="black" fill-rule="evenodd" d="M 663.565,205.313 C 660.988,208.029 658.471,209.973 656.003,211.139 C 653.535,212.313 650.879,212.896 648.035,212.896 C 642.259,212.896 637.224,210.477 632.909,205.64 C 628.595,200.812 626.443,194.592 626.443,187 C 626.443,179.417 628.832,172.467 633.6,166.168 C 638.369,159.868 644.511,156.719 652.013,156.719 C 656.673,156.719 660.524,158.209 663.565,161.192 L 663.565,151.388 C 663.565,145.336 663.417,141.613 663.131,140.221 C 662.835,138.839 662.38,137.891 661.768,137.388 C 661.147,136.893 660.376,136.637 659.439,136.637 C 658.431,136.637 657.099,136.943 655.429,137.565 L 654.679,135.492 L 670.525,129.075 L 673.141,129.075 L 673.141,190.385 C 673.141,196.576 673.289,200.357 673.576,201.72 C 673.872,203.092 674.336,204.04 674.968,204.583 C 675.611,205.116 676.351,205.393 677.209,205.393 C 678.256,205.393 679.648,205.057 681.385,204.405 L 682.028,206.479 L 666.231,212.896 L 663.565,212.896 Z M 663.565,201.265 L 663.565,174.036 C 663.337,171.38 662.637,168.971 661.481,166.809 C 660.336,164.657 658.807,163.028 656.901,161.921 C 654.995,160.827 653.139,160.273 651.323,160.273 C 647.936,160.273 644.915,161.793 642.259,164.844 C 638.755,168.863 637.007,174.727 637.007,182.439 C 637.007,190.237 638.705,196.211 642.091,200.357 C 645.477,204.504 649.249,206.577 653.405,206.577 C 656.911,206.577 660.297,204.811 663.565,201.265 Z "/>
    </g>
</svg>
maxwellito commented 6 years ago

I think the best is to read this post from CSS tricks to understand it https://css-tricks.com/svg-line-animation-works/