123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <button class="button">Click to animate</button>
<svg version="1.1" id="volusion" class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="4309px" height="1024px" viewBox="0 0 4309 1024">
    <path fill="transparent" stroke="#fff" stroke-width="20" stroke-miterlimit="10" class="draw symbol-left" d="M0 0c97.792 2.821 186.182 18.336 270.81 53.598 90.27 38.083 158.913 101.084 217.212 178.189 62.531 82.277 110.957 172.077 149.039 267.989 3.761 9.403 5.172 22.097 2.351 31.030-31.5 94.031-63.941 188.062-96.382 282.094-0.94 1.881-2.351 3.761-3.761 5.642-19.747-60.65-39.023-121.3-60.18-181.48-60.65-173.017-155.152-326.758-274.101-464.514-47.486-55.008-110.957-96.382-166.905-143.398-10.814-8.933-22.097-16.926-38.083-29.15z"></path>
    <path fill="transparent" stroke="#fff" stroke-width="20" stroke-miterlimit="10" class="draw symbol-right" d="M1288.228 160.323c-36.672 20.687-70.994 39.023-103.904 59.24-122.241 74.285-218.623 176.309-306.542 287.736-97.322 123.181-194.174 247.302-292.907 373.304 10.343-32.911 20.217-64.411 30.56-95.442 46.075-141.517 95.912-281.153 164.084-413.737 13.635-26.329 29.15-51.717 44.195-77.576 35.262-59.71 86.979-96.382 153.271-115.188 101.554-29.15 204.048-32.441 311.243-18.336z"></path>
    <path fill="transparent" stroke="#fff" stroke-width="20" stroke-miterlimit="10" class="draw tail" d="M737.675 785.161c8.933 95.442 37.612 174.428 111.897 235.548-21.627 0.47-43.254 2.821-64.882 1.41-59.24-3.291-113.308-21.157-156.562-64.882-11.284-11.754-15.515-20.217-2.821-34.792 37.142-42.784 72.404-87.919 112.367-137.286z"></path>
    <path fill="transparent" stroke="#fff" stroke-width="20" stroke-miterlimit="10" class="draw v" d="M1553.866 441.006c-17.396 59.71-33.851 116.599-50.777 173.488-37.612 127.412-74.755 255.295-112.837 382.707-2.351 8.463-10.343 19.276-18.336 21.627-16.455 4.702-17.396-10.814-20.687-21.627-51.717-175.368-103.434-351.207-155.152-526.575-2.351-7.993-4.231-16.455-7.522-28.68 31.030 0 60.65-0.94 89.33 0.94 4.231 0 9.403 10.814 11.284 17.396 24.448 94.031 48.426 188.062 72.404 281.624 1.881 6.582 4.231 12.694 8.463 25.859 4.231-11.284 6.582-16.926 7.993-22.097 24.448-94.031 48.896-187.592 72.404-282.094 4.231-16.926 10.343-23.508 28.209-22.567 23.978 1.41 47.956 0 75.225 0z"></path>
    <path fill="transparent" stroke="#fff" stroke-width="20" stroke-miterlimit="10" class="draw first-o" d="M1954.909 623.427c-7.522-50.307-23.038-97.322-53.598-138.696-23.508-31.5-53.598-52.657-93.091-57.359-69.113-8.933-121.77 20.687-157.032 86.509-35.262 66.292-40.904 138.696-43.254 218.152 1.41 21.157 2.821 48.426 5.642 75.695 5.642 51.247 19.747 99.673 47.486 143.398 61.59 96.382 187.592 96.852 248.242 0 15.045-23.978 27.269-51.247 34.792-78.986 23.508-81.337 23.508-165.025 10.814-248.713zM1846.303 870.259c-8.933 40.904-31.971 60.18-59.24 60.18s-48.896-19.276-61.12-59.24c-21.627-70.994-19.747-143.868-13.635-216.742 2.351-31.030 9.873-61.59 19.276-91.21 7.522-24.918 24.448-45.135 54.068-45.135 29.15 0 44.665 19.747 55.008 44.195 22.097 52.657 22.567 108.136 27.739 164.555-7.522 47.956-11.754 96.382-22.097 143.398z"></path>
    <path fill="transparent" stroke="#fff" stroke-width="20" stroke-miterlimit="10" class="draw l" d="M2162.718 579.232c0 133.054-0.47 266.579 0.47 399.633 0 22.097-5.172 31.5-28.68 29.15-16.455-1.881-32.911-1.41-49.366 0-16.926 1.41-21.157-6.112-21.157-21.627 0.47-271.28 0.47-542.090 0-813.37 0-17.866 6.112-23.508 23.038-22.097 16.455 1.41 32.911 1.41 49.366 0 21.157-2.351 26.329 6.582 26.329 26.799-0.47 133.994 0 267.989 0 401.513z"></path>
    <path fill="transparent" stroke="#fff" stroke-width="20" stroke-miterlimit="10" class="draw u" d="M2606.545 1006.134c-31.5 0-62.531 0-96.382 0 0-18.336 0-35.732 0-53.128-1.881-0.47-3.761-1.41-5.642-1.881-4.231 5.642-8.463 11.754-13.164 17.396-51.717 68.643-149.98 62.061-189.943-14.575-11.754-22.097-20.217-48.896-20.687-73.815-1.881-141.517-1.41-283.504-1.41-425.021 0-3.761 0.94-7.522 1.881-12.694 31.030 0 61.12 0 94.972 0 0 9.403 0 18.336 0 27.269 0 126.002-0.47 252.004 0.47 378.476 0 17.396 3.291 35.732 9.403 52.187 7.993 22.097 30.56 32.441 53.598 28.68 35.262-5.642 70.523-47.486 70.994-83.218 0-124.591 0-249.183 0-373.774 0-9.403 0-18.336 0-29.62 32.911 0 63.471 0 95.912 0 0 188.533 0 375.185 0 563.717z"></path>
    <path fill="transparent" stroke="#fff" stroke-width="20" stroke-miterlimit="10" class="draw s" d="M2936.125 548.202c-20.217-10.814-37.142-21.627-55.008-28.68-20.217-7.993-41.844-12.224-59.24 5.642-16.455 16.926-15.045 38.553-6.112 57.359 15.045 30.56 32.911 60.18 50.777 89.33 22.567 36.672 48.426 71.464 68.173 109.546 26.329 50.777 36.202 105.315 12.224 160.793-37.612 87.919-142.927 109.546-226.145 39.963-4.231-3.291-6.582-10.814-6.582-16.455-0.47-28.68-0.47-57.829-0.47-91.68 7.993 6.582 12.694 10.814 17.866 14.575 17.866 12.224 34.792 26.799 54.068 36.202 20.687 10.343 42.784 8.933 61.12-7.993 17.866-15.985 21.627-37.612 12.224-58.299-15.515-33.851-32.441-67.702-51.717-99.673-32.441-54.068-71.464-104.845-83.688-169.256-12.694-67.702 14.575-131.644 69.113-154.681 47.486-19.747 92.151-9.873 133.054 18.806 4.702 3.291 8.933 11.284 8.933 16.926 1.881 25.859 1.41 50.777 1.41 77.576z"></path>
    <path fill="transparent" stroke="#fff" stroke-width="20" stroke-miterlimit="10" class="draw i" d="M3064.007 1008.015c0-11.754 0-19.276 0-27.269 0-170.667 0.47-341.333-0.47-512 0-23.508 7.522-30.090 29.62-28.209 20.687 1.881 42.314 0.47 65.822 0.47 0.94 9.403 2.351 17.396 2.351 25.859 0 171.607-0.47 342.744 0.47 514.351 0 22.097-7.052 28.68-28.209 26.799-22.097-1.41-43.725 0-69.583 0z"></path>
    <path fill="transparent" stroke="#fff" stroke-width="20" stroke-miterlimit="10" class="draw i-dot" d="M3167.442 267.519c0 32.911-23.508 55.949-56.419 55.008-31.030-0.47-54.538-24.448-55.008-55.478-0.47-31.971 23.978-56.419 55.949-56.419 32.911 0.47 55.478 23.508 55.478 56.889z"></path>
    <path fill="transparent" stroke="#fff" stroke-width="20" stroke-miterlimit="10" class="draw second-o" d="M3617.851 636.121c-7.522-57.359-23.508-111.897-61.12-157.502-57.829-70.053-159.853-73.344-216.742-2.821-23.978 30.090-41.844 68.173-53.128 105.785-22.567 75.225-20.687 152.801-11.754 230.376 6.112 53.598 20.687 104.375 52.657 148.569 38.553 53.128 97.792 74.755 158.913 56.889 40.904-11.754 68.643-39.493 89.33-75.225 38.553-66.762 46.075-140.107 48.426-215.331-1.881-30.090-2.821-60.65-6.582-90.74zM3511.596 853.803c-4.231 17.866-11.284 36.202-21.157 51.717-22.567 34.792-66.292 35.732-86.509-0.47-15.045-26.329-23.038-57.829-28.68-87.919-6.112-30.56-5.172-62.061-8.463-106.255 4.231-33.381 9.873-78.986 16.926-124.591 1.881-12.694 7.993-25.388 14.575-36.672 23.978-41.374 71.464-43.254 93.091-1.41 15.045 28.209 23.508 61.59 27.269 93.561 8.933 70.523 8.933 141.987-7.052 212.040z"></path>
    <path fill="transparent" stroke="#fff" stroke-width="20" stroke-miterlimit="10" class="draw n" d="M3829.421 1006.134c-32.441 0-63.001 0-94.972 0 0-187.122 0-373.774 0-562.777 30.090 0 60.65 0 94.031 0 0 17.396 0 35.262 0 52.657 1.881 0.94 3.291 1.41 5.172 2.351 4.231-4.702 8.463-8.933 12.224-14.105 28.209-38.553 64.882-58.77 113.308-51.247 47.486 7.522 76.165 39.493 90.27 82.747 7.993 24.918 11.754 52.187 11.754 78.516 0.94 129.293 0 258.586 0.94 387.409 0 20.687-6.112 28.209-26.799 26.329-22.567-2.351-54.538 6.582-64.882-5.172-12.224-13.164-6.112-43.725-6.112-67.232-0.47-112.837 0-225.675-0.47-338.512 0-14.575-1.41-30.090-6.112-43.725-11.754-34.792-47.486-48.426-77.576-27.269s-52.187 47.016-51.247 88.86c1.881 120.36 0.47 241.19 0.47 361.55 0 9.873 0 19.276 0 29.62z"></path>
    <path fill="#fff" stroke="#fff" stroke-width="1" stroke-miterlimit="10" class="r-outline" d="M4245.51 386.468c36.202 0 63.001 26.799 63.001 62.531 0 34.792-27.739 61.59-63.471 61.59-36.202 0-63.471-27.269-63.001-63.471 0-33.851 27.739-60.65 63.471-60.65zM4198.024 448.059c0 27.739 20.687 49.366 47.956 49.366 26.329 0 47.016-21.627 47.016-48.896 0-27.739-20.687-49.366-47.486-49.366-26.799-0.47-47.486 21.157-47.486 48.896z"></path>
    <path fill="#fff" stroke="#fff" stroke-width="1" stroke-miterlimit="10" class="draw r" d="M4221.532 417.499c12.224 0 23.508-0.94 35.262 0.47 9.873 0.94 14.575 6.112 15.515 14.105s-2.351 12.694-12.224 17.396c12.694 6.582 10.343 19.747 15.515 31.030-5.172 0-9.403 0-13.635 0-1.41 0-2.821-1.881-3.291-2.821-0.94-2.821-1.881-5.642-2.351-8.463-2.821-12.224-7.052-14.575-20.217-12.694 0 7.522 0 15.515 0 23.978-4.702 0-9.403 0-14.105 0-0.47-20.687-0.47-40.904-0.47-63.001zM4236.107 446.178c5.642-0.94 10.343-0.94 14.575-1.881 5.172-1.41 7.522-6.582 5.172-11.284-1.881-4.702-9.873-7.052-16.926-5.172-5.172 1.41-1.881 5.642-2.821 8.463-0.47 2.351 0 5.642 0 9.873z"></path>
</svg>




            
          
!
            
              body {
    background: #045d84;
    text-align: center;
}
.no-smil {
    .icon {
        display: none;
    }
}
.smil {
    #fallback,
    .button {
        display: none;
    }
}
.icon {
    width: 300px;
    height: 200px;
    display: block;
    margin: 0 auto;
}

.draw {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
/*  animation: draw 4s linear alternate infinite;*/
-webkit-animation: draw 4s linear alternate infinite;
   -moz-animation: draw 4s linear alternate infinite;
    -ms-animation: draw 4s linear alternate infinite;
     -o-animation: draw 4s linear alternate infinite;
        animation: draw 4s linear alternate infinite;
}

/*@keyframes draw {
  from {
    stroke-dashoffset: 3000;
  }
  to {
    stroke-dashoffset: 0;
  }
}*/
@-webkit-keyframes draw {
   from { stroke-dashoffset: 3000;}
     to { stroke-dashoffset: 0; }
}

@-moz-keyframes draw {
   from { stroke-dashoffset: 3000;}
     to { stroke-dashoffset: 0; }
}

@-ms-keyframes draw {
   from { stroke-dashoffset: 3000;}
     to { stroke-dashoffset: 0; }
}

@-o-keyframes draw {
   from { stroke-dashoffset: 3000;}
     to { stroke-dashoffset: 0; }
}

@keyframes draw {
   from { stroke-dashoffset: 3000;}
     to { stroke-dashoffset: 0; }
}

.button {
    background: #333;
    color: #fff;
    border: none;
    font-size: 20px;
    padding: 10px;
}
            
          
!
            
              //IE Fallback using Snap.js
console.clear();
var tailLeft = "M0 0c97.792 2.821 186.182 18.336 270.81 53.598 90.27 38.083 158.913 101.084 217.212 178.189 62.531 82.277 110.957 172.077 149.039 267.989 3.761 9.403 5.172 22.097 2.351 31.030-31.5 94.031-63.941 188.062-96.382 282.094-0.94 1.881-2.351 3.761-3.761 5.642-19.747-60.65-39.023-121.3-60.18-181.48-60.65-173.017-155.152-326.758-274.101-464.514-47.486-55.008-110.957-96.382-166.905-143.398-10.814-8.933-22.097-16.926-38.083-29.15z";
var tailRight = "M1288.228 160.323c-36.672 20.687-70.994 39.023-103.904 59.24-122.241 74.285-218.623 176.309-306.542 287.736-97.322 123.181-194.174 247.302-292.907 373.304 10.343-32.911 20.217-64.411 30.56-95.442 46.075-141.517 95.912-281.153 164.084-413.737 13.635-26.329 29.15-51.717 44.195-77.576 35.262-59.71 86.979-96.382 153.271-115.188 101.554-29.15 204.048-32.441 311.243-18.336z";
var tailBottom = "M737.675 785.161c8.933 95.442 37.612 174.428 111.897 235.548-21.627 0.47-43.254 2.821-64.882 1.41-59.24-3.291-113.308-21.157-156.562-64.882-11.284-11.754-15.515-20.217-2.821-34.792 37.142-42.784 72.404-87.919 112.367-137.286z";

var loopLength = Snap.path.getTotalLength(tailLeft);

var s = Snap();
circle = s.attr({
 viewBox: "0 0 4309 1024",
 id: "fallback",
});
circle = s.path({
 path: tailLeft,
 fill: "transparent",
 stroke: "#fff",
 strokeWidth: 0,
 strokeLinecap: "round",

});
circleOutline =  s.path({
 path: Snap.path.getSubpath(tailLeft, 0, 0),
 stroke: "#fff",
 fillOpacity: 0,
 strokeWidth: 0,
 strokeLinecap: "round",
});

circle2 = s.attr({
 viewBox: "0 0 4309 1024",
 id: "fallback",

});
circle2 = s.path({
 path: tailRight,
 fill: "transparent",
 stroke: "#fff",
 strokeWidth: 0,
 strokeLinecap: "round",

});
circleOutline2 =  s.path({
 path: Snap.path.getSubpath(tailRight, 0, 0),
 stroke: "#fff",
 fillOpacity: 0,
 strokeWidth: 0,
 strokeLinecap: "round",
});

circle3 = s.attr({
 viewBox: "0 0 4309 1024",
 id: "fallback",

});
circle3 = s.path({
 path: tailBottom,
 fill: "transparent",
 stroke: "#fff",
 strokeWidth: 0,
 strokeLinecap: "round",

});
circleOutline3 =  s.path({
 path: Snap.path.getSubpath(tailBottom, 0, 0),
 stroke: "#fff",
 fillOpacity: 0,
 strokeWidth: 0,
 strokeLinecap: "round",
});


Snap.animate(0, loopLength,
    function(step){ //step function
  
      circleOutline.attr({
        path: Snap.path.getSubpath(tailLeft, 0, step),
        strokeWidth: 10
      });
      circleOutline2.attr({
        path: Snap.path.getSubpath(tailRight, 0, step),
        strokeWidth: 10
      });
      circleOutline3.attr({
        path: Snap.path.getSubpath(tailBottom, 0, step),
        strokeWidth: 10
      });
    }, // end of step function
    1000, //duration
    mina.easeInOut, //easing
    function(){ //callback
      setTimeout(function(){
        
      }, 1000);//setTimeout
    }//callback
  );//Snap.animate

$(".button").click(function(e){
  Snap.animate(0, loopLength,
    function(step){ //step function
      console.log('step', step);
      circleOutline.attr({
        path: Snap.path.getSubpath(tailLeft, 0, step),
        strokeWidth: 10
      });
      circleOutline2.attr({
        path: Snap.path.getSubpath(tailRight, 0, step),
        strokeWidth: 10
      });
      circleOutline3.attr({
        path: Snap.path.getSubpath(tailBottom, 0, step),
        strokeWidth: 10
      });
      
    }, // end of step function
    800, //duration
    mina.easeInOut, //easing
    function(){ //callback
      setTimeout(function(){
        
      }, 1000);//setTimeout
    }//callback
  );//Snap.animate
});//click the circle
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console