Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>SVG Animation with <a href="https://maxwellito.github.io/vivus/">vivus.js</a></h1>
<p><a href="#" id="replay">Replay</a></p>
<svg id="meter" width="246px" height="246px" viewBox="0 0 246 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <path d="M89.5724153,55.4572034 C90.7330508,55.4572034 91.8625424,55.2205085 92.9276695,54.7471186 C97.1155085,52.8992373 99.0173729,47.9847034 97.1674153,43.7968644 C95.840678,40.7883475 92.8570763,38.8449576 89.5682627,38.8449576 C88.4076271,38.8449576 87.2802119,39.0837288 86.2109322,39.5550424 C82.0272458,41.4070763 80.1274576,46.3216102 81.9732627,50.5032203 C83.3,53.5117373 86.2836017,55.4572034 89.5724153,55.4572034 M47.1541949,148.370339 C45.9935593,148.370339 44.8661441,148.60911 43.8030932,149.080424 C39.613178,150.928305 37.7092373,155.844915 39.5591949,160.036907 C40.8880085,163.039195 43.8716102,164.982585 47.1583475,164.982585 C48.3189831,164.982585 49.4463983,164.743814 50.5115254,164.274576 C54.6972881,162.428771 56.6033051,157.514237 54.7533475,153.320169 C53.4245339,150.313729 50.4409322,148.370339 47.1541949,148.370339 M199.09572,97.8754237 C200.256356,97.8754237 201.385847,97.6366525 202.448898,97.1674153 C204.479492,96.2704661 206.038771,94.6364407 206.840212,92.5684746 C207.639576,90.5005085 207.587669,88.245678 206.69072,86.217161 C205.363983,83.2065678 202.380381,81.2652542 199.091568,81.2652542 C197.930932,81.2652542 196.803517,81.5019492 195.736314,81.975339 C191.552627,83.8232203 189.650763,88.735678 191.498644,92.9255932 C192.825381,95.9320339 195.808983,97.8754237 199.09572,97.8754237 M150.114407,53.4224576 C151.077797,53.7941102 152.086864,53.9851271 153.114619,53.9851271 C156.519703,53.9851271 159.632034,51.8486441 160.85911,48.6740254 C161.662627,46.6060593 161.608644,44.3491525 160.713771,42.3206356 C159.816822,40.2900424 158.182797,38.732839 156.116907,37.9355508 C155.153517,37.5597458 154.144449,37.3708051 153.114619,37.3708051 C149.713686,37.3708051 146.601356,39.5031356 145.372203,42.6798305 C143.719492,46.9465678 145.847669,51.7655932 150.114407,53.4224576 M42.6819068,100.886017 C43.6432203,101.257669 44.6502119,101.44661 45.6779661,101.44661 C49.0809746,101.44661 52.1953814,99.3122034 53.4224576,96.139661 C54.2259746,94.0716949 54.1719915,91.8147881 53.2771186,89.7841949 C52.3801695,87.755678 50.7461441,86.1963983 48.6802542,85.3949576 C47.7168644,85.0212288 46.7077966,84.8343644 45.6800424,84.8343644 C42.2770339,84.8343644 39.1626271,86.9666949 37.9334746,90.1413136 C36.2807627,94.4101271 38.4089407,99.2291525 42.6819068,100.886017 M203.572161,145.359746 C202.610847,144.988093 201.60178,144.797076 200.576102,144.797076 C197.173093,144.797076 194.058686,146.931483 192.827458,150.106102 C192.028093,152.174068 192.08,154.430975 192.976949,156.459492 C193.873898,158.490085 195.505847,160.049364 197.57589,160.850805 C198.537203,161.220381 199.546271,161.411398 200.571949,161.411398 C203.974958,161.411398 207.089364,159.279068 208.318517,156.104449 C209.119958,154.034407 209.068051,151.779576 208.171102,149.748983 C207.274153,147.71839 205.640127,146.15911 203.572161,145.359746 M175.349407,57.9072034 C172.114576,61.1441102 172.114576,66.4136864 175.351483,69.6505932 C176.919068,71.2202542 179.00572,72.0839831 181.225254,72.0839831 C183.442712,72.0839831 185.529364,71.2202542 187.096949,69.6505932 C190.333856,66.4136864 190.333856,61.1441102 187.096949,57.9072034 C183.957627,54.7678814 178.488729,54.7678814 175.349407,57.9072034 M122.5,47.7542373 C127.078178,47.7542373 130.805085,44.0294068 130.805085,39.4491525 C130.805085,34.8688983 127.078178,31.1440678 122.5,31.1440678 C117.919746,31.1440678 114.194915,34.8688983 114.194915,39.4491525 C114.194915,44.0294068 117.919746,47.7542373 122.5,47.7542373 M47.7542373,122.5 C47.7542373,117.919746 44.0273305,114.194915 39.4491525,114.194915 C34.8688983,114.194915 31.1440678,117.919746 31.1440678,122.5 C31.1440678,127.080254 34.8688983,130.805085 39.4491525,130.805085 C44.0273305,130.805085 47.7542373,127.080254 47.7542373,122.5 M205.550847,114.194915 C200.970593,114.194915 197.245763,117.919746 197.245763,122.5 C197.245763,127.080254 200.970593,130.805085 205.550847,130.805085 C210.129025,130.805085 213.855932,127.080254 213.855932,122.5 C213.855932,117.919746 210.129025,114.194915 205.550847,114.194915" id="Shape" stroke="#9B9B9B" stroke-width="3" sketch:type="MSShapeGroup"></path>
        <circle id="Oval-1" stroke="#717171" stroke-width="20" sketch:type="MSShapeGroup" cx="123" cy="123" r="113"></circle>
        <circle id="Oval-2" stroke="#970012" stroke-width="8" sketch:type="MSShapeGroup" cx="122.5" cy="122.5" r="24.5"></circle>
        <path d="M115.46365,85.659073 C117.742785,85.226408 120.094953,85 122.5,85 C143.210678,85 160,101.789322 160,122.5 C160,143.210678 143.210678,160 122.5,160 C101.789322,160 85,143.210678 85,122.5 C85,120.550394 85.1487779,118.635536 85.4355995,116.766162 L56.5662004,57.1416892 L115.46365,85.659073 Z" id="Oval-3" stroke="#F0001D" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" sketch:type="MSShapeGroup"></path>
    </g>
</svg>
<svg id="boxes" width="482px" height="352px" viewBox="0 0 482 352" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <rect id="Rectangle-1" stroke="#979797" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" sketch:type="MSShapeGroup" x="3" y="28" width="301" height="258" rx="10"></rect>
        <rect id="Rectangle-2" stroke="#979797" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" sketch:type="MSShapeGroup" x="178" y="91" width="301" height="258" rx="10"></rect>
        <rect id="Rectangle-3" stroke="#979797" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" sketch:type="MSShapeGroup" x="79" y="3" width="249" height="217" rx="10"></rect>
    </g>
</svg>
              
            
!

CSS

              
                body {
  background: #c0ffee;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  text-align: center;
}
h1, a {
  font-weight: 200;
  color: #222;
}

svg {
  vertical-align: top;
  margin-right: 20px;
}
              
            
!

JS

              
                var mySvg = new Vivus('boxes', {
  type: 'delayed',
  duration: 100,
  start: 'autostart'
});

var meter = new Vivus('meter', {
  type: 'scenario',
  duration: 80,
  start: 'autostart'
});

document.getElementById("replay").addEventListener("click", function(){
  mySvg.stop().reset().play(2);
  meter.stop().reset().play(2);
});
              
            
!
999px

Console