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

              
                <p>Art by <a href="https://twitter.com/helenvholmes">@helenvholmes</a> (available on <a href="https://github.com/helenvholmes/design-stuff/blob/master/swag/motherfuckingdevtools.svg">Github</a> )</p>
<div class="card">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="40 10 160 120" style="enable-background:new 0 0 252 144;" xml:space="preserve" preserveAspectRatio="none">
  <defs>
    <radialGradient id="gradient" gradientUnits="userSpaceOnUse" cx="120" cy="70" r="540">
      <animate attributeName="cy" values="-290; -140; 280; 430; 280; -140; -290" dur="4s" repeatCount="indefinite" />
      <stop offset="0%" stop-color="white"/>
      <stop offset="50%" stop-color="gold"/>
      <stop offset="100%" stop-color="black"/>
    </radialGradient>
  </defs>
<g>
  <g>
    <path d="M102.8,71.7c-0.4,0-0.8,0-1.3,0c-3.8-0.2-7.6-1.1-10.9-2.6c-3.8-1.8-6.8-4.3-8.5-7.4c-2.6-4.5-1.4-7.2,0-8.6      c1.6-1.7,4.6-2.6,8.1-2.7c3.4,0,6.9,0.8,9.5,2.2c3.4,1.9,12.2,6.7,12.3,6.7c0.1,0,0.1,0.2,0.1,0.3c0,0.1-0.2,0.1-0.3,0.1      c-0.1,0-8.9-4.9-12.3-6.7c-2.6-1.4-5.9-2.2-9.3-2.2c-3.4,0-6.3,1-7.8,2.6c-1.9,1.9-1.9,4.7,0,8.1c1.7,3,4.6,5.5,8.3,7.2      c3.2,1.5,7,2.4,10.7,2.5c4.8,0.2,8.7-0.8,9.9-2.6c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3C110.6,70.6,107.2,71.7,102.8,71.7z      " data-position="12"></path>
  </g>
  <g>
    <path d="M93.7,88c-0.1,0-0.2,0-0.4-0.1c-0.6-0.3-0.7-1.5-0.2-3.6c0.7-2.8,3.3-8,7.8-15.4c3.3-5.5,6.5-10.2,6.5-10.3      c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0.1,0.1,0.2,0.1,0.3c-0.1,0.2-12.6,18.9-14.2,25.5c-0.6,2.5-0.3,3.1,0,3.2c0.3,0.2,1.3-0.2,2.7-1.8      c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3C96.3,86.3,94.8,88,93.7,88z" data-position="7" style=""></path>
  </g>
  <g>
    <path d="M58.9,72.6c-3,0-5.5-0.9-7.4-2.8c-2.5-2.3-3.5-5.6-3.9-7.9c-0.4-2.6-0.4-5.5,0.2-7.6c0.7-2.6,2.2-6.4,6.1-10      c4.3-4,10.8-6.8,19.4-8.6c5.3-1.1,11.2-1.2,17.5-0.3c5.1,0.7,10.4,2.1,15.9,4c9.3,3.3,15.9,7.2,16,7.3c0.1,0.1,0.1,0.2,0.1,0.3      c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-6.6-4-15.9-7.3c-5.5-1.9-10.8-3.3-15.8-4c-6.3-0.9-12.1-0.8-17.4,0.3      c-19,3.9-23.5,12.3-25.2,18.3c-0.6,2-0.6,4.8-0.2,7.4c0.4,2.3,1.4,5.5,3.7,7.7c3.2,3,7.9,3.5,14,1.4c7.8-2.7,13.1-8.3,13.2-8.3      c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3c-0.1,0.1-5.4,5.7-13.3,8.4C63.3,72.2,61,72.6,58.9,72.6z" data-position="4" style=""></path>
  </g>
  <g>
    <path d="M115.7,54.2c-1.9,0-4.5-0.7-7.6-2.2c-2.5-1.2-4.5-2.4-4.5-2.5c-0.1-0.1-0.1-0.2-0.1-0.3c0.1-0.1,0.2-0.1,0.3-0.1      c0.1,0,7.8,5,12.5,4.5c0.1,0,0.2,0.1,0.2,0.2s-0.1,0.2-0.2,0.2C116.1,54.2,115.9,54.2,115.7,54.2z" data-position="8"></path>
  </g>
  <g>
    <path d="M95.8,88.2C95.7,88.2,95.7,88.2,95.8,88.2c-0.1,0-0.2-0.1-0.2-0.2c1.3-4.8,5.4-14.3,9.6-19.9c14.2-18.8,23.7-28.9,29-30.9      c2.6-1,5.8-0.5,7.3,1.2c1,1,1.8,3,0.4,6.2c-1.1,2.4-3,4.4-5.7,6c-2.2,1.2-4.9,2.2-8,2.9c-5.3,1.1-10.1,0.9-10.2,0.9      c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0.1-0.2,0.2-0.2c0,0,4.8,0.2,10.1-0.9c4.8-1,11.1-3.3,13.4-8.6c1.1-2.4,1-4.5-0.3-5.8      c-1.5-1.6-4.5-2-6.9-1.1c-5.2,2-14.6,12-28.8,30.8c-4.2,5.6-8.2,15.1-9.5,19.8C95.9,88.2,95.8,88.2,95.8,88.2z" data-position="9" style=""></path>
  </g>
  <g>
    <path d="M133,52C132.9,52,132.9,52,133,52c-1.8-0.5-7.5-2.7-9.3-3.9c-0.1-0.1-0.1-0.2,0-0.3c0.1-0.1,0.2-0.1,0.3,0      c1.7,1.2,7.4,3.4,9.1,3.8c0.1,0,0.2,0.1,0.1,0.2C133.1,51.9,133,52,133,52z" data-position="3"></path>
  </g>
  <g>
    <path d="M143.7,55C143.7,55,143.7,55,143.7,55c-3.5-0.3-9-2.5-9-2.5c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0.1-0.1,0.2-0.1      c0.1,0,5.5,2.2,8.9,2.4c0.1,0,0.2,0.1,0.2,0.2C143.9,54.9,143.8,55,143.7,55z" data-position="2"></path>
  </g>
  <g>
    <path style="" d="M122.2,90.2c0,0-0.1,0-0.1,0c-0.1-0.1-0.1-0.2,0-0.3c2.4-3.2,4.9-7.7,7.8-12.9c4.6-8.3,9.8-17.6,16.5-25.7      c3.9-4.7,7.4-6.9,10.4-6.5c2.5,0.3,3.8,2.4,4.2,3.3c0,0.1,0,0.2-0.1,0.2c-0.1,0-0.2,0-0.2-0.1c-0.4-0.8-1.6-2.8-3.9-3.1      c-2.8-0.4-6.3,1.9-10.1,6.4c-6.7,8-11.9,17.4-16.5,25.6c-2.9,5.2-5.4,9.7-7.8,12.9C122.3,90.2,122.2,90.2,122.2,90.2z" data-position="13"></path>
  </g>
  <g>
    <path d="M147.7,55.4c-0.7,0-1.5,0-2.2-0.1c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0.1-0.2,0.2-0.2c0.1,0,0.1,0,0.3,0      c6.5,0.8,12.2-2,15.8-7.9c4.3-6.9,0.2-16.8-2.5-21c-1-1.5-3.8-4.8-8-7.2c-5-2.9-10.5-3.6-15.9-2.3c-7.5,1.9-11.1,6.6-12.9,10.3      c-3,6.3-2.5,13.3-0.7,17.2c0,0.1,0,0.2-0.1,0.2c-0.1,0-0.2,0-0.2-0.1c-1.8-3.9-2.3-11.1,0.8-17.5c1.8-3.7,5.5-8.6,13.1-10.5      c5.5-1.4,11.1-0.6,16.2,2.3c4.3,2.4,7.1,5.7,8.1,7.3c1.3,2,3,5.4,3.8,9.2c1.1,4.9,0.7,9-1.3,12.2      C158.4,52.5,153.5,55.4,147.7,55.4z" data-position="1" style=""></path>
  </g>
  <g>
    <path style="" d="M138.6,64.7c-13.7,0-23.8-3.7-25.1-4.2c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0.1-0.1,0.2-0.1c1.3,0.5,11.3,4.1,25,4.1      c3,0,6.1-0.2,9.3-0.6c6.3-0.8,10.6-2.9,12.6-6.2c2.3-3.7,0.9-7.6,0.9-7.7c0-0.1,0-0.2,0.1-0.2c0.1,0,0.2,0,0.2,0.1      c0,0,1.4,4.2-0.9,8c-2.1,3.4-6.4,5.6-12.9,6.4C144.7,64.6,141.5,64.7,138.6,64.7z" data-position="12"></path>
  </g>
  <g>
    <path d="M63.7,91.6C63.6,91.6,63.6,91.6,63.7,91.6c-0.2-0.1-0.2-0.2-0.2-0.3L79,62.4c0-0.1,0.2-0.1,0.3-0.1c0.1,0,0.1,0.2,0.1,0.3      L69.2,81.5c2.9-4.8,7-11,10-13.8c0.5-0.4,1.1-0.9,1.6-1.1c0.7-0.4,1.2-0.4,1.5-0.2c0.5,0.3,0.4,1.3-0.3,2.8      c-1.2,2.7-5.4,10.7-8.1,15.9c3-4.7,7.8-11.6,10.9-13.3c2.4-1.4,3-1.2,3.2-0.9c0.4,0.5-0.5,1.7-0.7,2c0,0-1.9,2.3-3.8,5.2      c-2.6,3.8-4.1,7-4.5,9.1c-0.2,1.3,0,1.6,0.2,1.7c0.2,0.1,0.8,0.1,2.6-1.6c1-1,1.9-2.1,1.9-2.1c0.1-0.1,0.2-0.1,0.3,0      c0.1,0.1,0.1,0.2,0,0.3c-0.6,0.7-3.8,4.4-5,3.8c-0.5-0.2-0.6-0.9-0.4-2.1c1-5.3,8.1-14.2,8.4-14.5c0.5-0.7,0.9-1.4,0.7-1.5      c0,0-0.4-0.3-2.8,1c-1.9,1.1-4.9,4.5-8.6,9.9c-2.8,4.1-5.1,7.9-5.1,7.9C71.2,90,71.1,90,71,90c-0.1,0-0.1-0.2-0.1-0.3      C71,89.6,79.8,73.1,81.6,69c0.8-1.8,0.6-2.3,0.4-2.4c-0.4-0.3-1.7,0.5-2.6,1.3c-5.7,5.4-15.5,23.4-15.6,23.5      C63.8,91.6,63.7,91.6,63.7,91.6z" data-position="5"></path>
  </g>
  <g>
    <path d="M85.3,88.1C85.3,88.1,85.3,88.1,85.3,88.1c-0.6,0-1.1-0.4-1.4-1.1c-0.7-1.6-0.2-3.6,1.4-6c1.2-1.8,2.5-3.1,2.5-3.1      c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3c-0.1,0.1-5.3,5.1-3.8,8.7c0.2,0.6,0.6,0.8,1,0.8c0,0,0,0,0,0c1.9,0,5.3-4.4,6.5-6.6      c-0.8-0.1-1.5-0.4-1.9-0.9c-0.6-0.7-0.8-2,0.6-3.2c1-0.8,1.7-1.1,2.2-0.7c0.8,0.6,0.4,2.9-0.2,4.3c0,0.1-0.1,0.1-0.1,0.2      c0.7-0.1,1.6-0.4,2.4-1c0.1-0.1,0.2,0,0.3,0c0.1,0.1,0,0.2,0,0.3c-1,0.8-2,1.1-2.9,1.1C91.1,83.2,87.5,88.1,85.3,88.1z M92.3,76.5      c-0.3,0-0.8,0.3-1.4,0.8c-1,0.9-1.2,1.9-0.6,2.7c0.4,0.5,1,0.8,1.8,0.8c0.1-0.1,0.1-0.2,0.2-0.3c0.6-1.4,0.9-3.5,0.3-3.9      C92.5,76.5,92.4,76.5,92.3,76.5z" data-position="6"></path>
  </g>
  <g>
    <path d="M95.8,88.2C95.7,88.2,95.7,88.2,95.8,88.2c-0.2-0.1-0.2-0.2-0.2-0.3c0,0,1.7-3.3,4-6.5c3.2-4.3,5.9-6.2,8.3-5.9      c0.1,0,0.1,0.1,0.1,0.1s0,0.1,0,0.2c-0.1,0.1-6,7.1-5,10c0.1,0.2,0.2,0.2,0.3,0.2c0.6-0.1,1.9-1.4,3.4-3.4c1.4-1.8,2.3-3.6,2.4-4      c0-0.1,0.1-0.2,0.2-0.2c0.1,0,0.2,0.1,0.2,0.2c0,0,0.2,1.2,0.8,2.1c0.2-0.6,0.5-1.2,0.9-1.9c1.4-2.5,2.8-3.4,3.8-3.6      c1.1-0.3,1.8,0.1,2,0.2c0.4,0.3,0.6,1.2,0.5,2.2c-0.1,0.8-0.7,3.4-3.6,4.3c-1.1,0.4-2.1,0.3-2.9-0.2c-0.2-0.1-0.3-0.2-0.4-0.3      c-0.6,1.7-0.6,3.2-0.1,3.9c0.3,0.4,0.8,0.5,1.5,0.3c1.7-0.5,5.6-4.2,8.2-6.9c-0.4-0.5-0.7-1-0.7-1.6c-0.1-0.8,0.2-1.6,1-2.3      c0.4-0.4,1.4-1.1,2.1-0.6c0.5,0.4,0.7,1.3,0.4,1.9c-0.2,0.4-1,1.4-2.2,2.6c0.8,0.9,1.7,1.4,1.8,1.5c0.1,0,0.1,0.1,0.1,0.2      c0,0.1-0.1,0.1-0.1,0.2c0,0-2.4,0.8-3.1,3.7c-0.1,0.6,0.1,0.8,0.3,0.9c1.5,0.6,6.8-2.1,7.2-2.7c0.1-0.1,0.2-0.1,0.3-0.1      c0.1,0.1,0.1,0.2,0.1,0.3c-0.5,0.7-6,3.6-7.7,2.9c-0.3-0.1-0.7-0.5-0.5-1.3c0.6-2.5,2.2-3.5,3-3.9c-0.4-0.2-1-0.7-1.5-1.3      c-2.6,2.7-6.5,6.4-8.3,6.9c-1,0.3-1.6,0-1.9-0.4c-0.7-0.8-0.6-2.5,0.1-4.4c-0.5-0.6-0.8-1.3-0.9-1.9c-0.9,2-4.4,6.8-5.8,7      c-0.3,0-0.6-0.1-0.7-0.5c-1-2.8,3.7-8.8,4.8-10.1c-5.2-0.3-11.5,12-11.6,12.2C95.9,88.2,95.8,88.2,95.8,88.2z M110.5,81.3      c0.1,0.2,0.3,0.3,0.5,0.4c0.7,0.4,1.6,0.5,2.6,0.2c2.8-0.9,3.3-3.3,3.4-4c0.1-0.9-0.1-1.7-0.3-1.8c-0.2-0.1-0.8-0.4-1.7-0.2      c-0.9,0.2-2.2,1-3.5,3.4C111.1,79.9,110.8,80.6,110.5,81.3z M121.7,74.6c-0.3,0-0.8,0.2-1.2,0.7c-0.7,0.6-0.9,1.3-0.9,2      c0.1,0.5,0.3,1,0.6,1.4c1.1-1.2,1.9-2.2,2.1-2.5c0.2-0.5,0.1-1.2-0.2-1.4C122,74.6,121.8,74.6,121.7,74.6z" data-position="10" style=""></path>
  </g>
  <g>
    <path d="M129.9,81.7c-1.3,0-2.2-0.5-2.2-0.5c-0.1-0.1-0.1-0.2-0.1-0.3c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0.1,3.5,1.9,6.6-2.2      c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3C133.1,81.2,131.2,81.7,129.9,81.7z" data-position="14"></path>
  </g>
  <g>
    <path d="M135.4,84.6c-0.1,0-0.3,0-0.4,0c-0.9-0.2-1.7-1-1.8-1.9c-0.2-2.5,3.8-8.2,4-8.4c0.1-0.1,0.2-0.1,0.3,0      c0.1,0.1,0.1,0.2,0,0.3c0,0.1-4.1,5.8-3.9,8.2c0.1,0.7,0.7,1.4,1.5,1.6c1,0.2,2.1-0.5,2.8-2c0-0.1,0.2-0.1,0.3-0.1      c0.1,0,0.1,0.2,0.1,0.3C137.8,83.1,136.9,84.6,135.4,84.6z" data-position="14"></path>
  </g>
  <g>
    <path d="M139.6,84.3c-0.3,0-0.6-0.1-0.9-0.2c-0.5-0.2-0.7-0.7-0.8-1.3c-0.4-2.4,3.8-7.7,3.9-7.9c0.1-0.1,0.2-0.1,0.3,0      c0.1,0.1,0.1,0.2,0,0.3c0,0.1-4.2,5.4-3.9,7.6c0.1,0.5,0.3,0.8,0.6,1c1,0.5,2.9-0.5,2.9-0.5c0.1,0,0.2,0,0.3,0.1      c0,0.1,0,0.2-0.1,0.3C142,83.6,140.7,84.3,139.6,84.3z" data-position="15"></path>
  </g>
  <g>
    <path d="M143.7,84.8c-0.4,0-0.7-0.1-0.9-0.2c-0.6-0.3-1-1-1-1.9c0-2.5,2.5-6.4,5.1-7.8c1.2-0.6,2-0.7,2.5-0.4      c0.7,0.6,0.3,2.1,0.3,2.2c0,0.1-0.1,0.2-0.2,0.1c-0.1,0-0.2-0.1-0.1-0.2c0.1-0.4,0.3-1.4-0.2-1.8c-0.4-0.3-1.1-0.1-2.1,0.4      c-2.4,1.3-4.9,5.1-4.9,7.5c0,0.8,0.3,1.3,0.8,1.5c1,0.5,3.3-0.3,5.9-2c2.7-1.8,5.4-4.4,7.1-6.9c0.1-0.1,0.2-0.1,0.3,0      c0.1,0.1,0.1,0.2,0,0.3c-1.7,2.5-4.4,5.2-7.2,7C146.9,84,145,84.8,143.7,84.8z" data-position="15"></path>
  </g>
  <g>
    <path data-position="17" style="" d="M150.4,84.7C150.4,84.7,150.3,84.7,150.4,84.7c-0.2-0.1-0.2-0.2-0.2-0.3c0.7-1,16-25.7,18.1-27.8c0.1-0.1,0.3-0.3,0.5-0.5      c2.5-2.7,8.2-8.9,18-9.6c3.4-0.2,5.5,0.5,6.2,2.2c0.6,1.4,0.2,3.1-0.3,4.3c-0.5,1.4-1.3,2.5-1.7,2.9c-0.7,0.7-3.4,2.9-7.7,4.8      c-5.7,2.5-11.7,3.5-17.9,2.9c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0.1-0.2,0.2-0.2c6.2,0.5,12.1-0.4,17.7-2.9c5-2.2,7.6-4.7,7.6-4.7      c0.6-0.6,3-4.3,1.9-6.8c-0.7-1.5-2.7-2.2-5.9-1.9c-9.6,0.7-15.3,6.9-17.8,9.5c-0.2,0.2-0.3,0.3-0.5,0.5c-2,2.1-17.9,27.5-18,27.8      C150.5,84.6,150.5,84.7,150.4,84.7z"></path>
  </g>
  <g>
    <path d="M163.7,63.4C163.7,63.4,163.7,63.4,163.7,63.4c-0.1,0-2.7-0.2-3.6-0.6c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0.1-0.1,0.2-0.1      c0.9,0.4,3.5,0.5,3.5,0.5c0.1,0,0.2,0.1,0.2,0.2C163.9,63.3,163.8,63.4,163.7,63.4z" data-position="16"></path>
  </g>
  <g>
    <path d="M155.4,79.5c-0.4,0-0.8,0-1.2-0.1c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0.1-0.2,0.2-0.2c3,0.4,5.7-0.9,7-2.3      c0.3-0.4,0.5-0.8,0.3-1.1c-0.2-0.4-0.9-0.6-2-0.5c-2.8,0.2-5.6,3.8-5.6,3.8c-0.1,0.1-0.2,0.1-0.3,0c-0.1-0.1-0.1-0.2,0-0.3      c0,0,0.7-0.9,1.8-1.9c1.4-1.3,2.8-2,4.1-2.1c1.6-0.1,2.1,0.3,2.3,0.7c0.2,0.4,0.1,1-0.4,1.5C160.4,78.2,158.1,79.5,155.4,79.5z" data-position="18"></path>
  </g>
  <g>
    <path style="" d="M157.4,84.5c-0.4,0-0.9,0-1.2-0.4c-0.3-0.4-0.2-1.2,0.3-2.7c0.2-0.5,0.2-0.9-0.1-1.2c-0.6-0.8-2.2-0.8-2.2-0.8      c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0.1-0.2,0.2-0.2h0c0.1,0,1.9,0,2.5,1c0.3,0.4,0.3,0.9,0.1,1.5c-0.5,1.3-0.6,2-0.3,2.3      c0.1,0.2,0.4,0.3,0.9,0.3c1.2,0,5.9-2.8,7.4-4.6c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3C163.6,81.5,158.8,84.5,157.4,84.5z" data-position="19"></path>
  </g>
  <g>
    <path d="M166,83c-0.4,0-0.8-0.1-1.1-0.2c-0.6-0.3-0.9-0.8-0.8-1.5c0.4-2.1,4-6.1,4.1-6.3c0.1-0.1,0.2-0.1,0.3,0      c0.1,0.1,0.1,0.2,0,0.3c0,0-3.7,4.1-4,6.1c-0.1,0.7,0.3,1,0.6,1.1c1.2,0.6,3.1-0.2,4-1.2c0.1-0.1,0.2-0.1,0.3,0      c0.1,0.1,0.1,0.2,0,0.3C168.5,82.4,167.1,83,166,83z" data-position="20"></path>
  </g>
  <g>
    <ellipse cx="170.7" data-position="21" cy="72.1" rx="0.4" ry="0.4"></ellipse>
  </g>
  <g>
    <path data-position="21" d="M168.2,82.9c0,0-0.1,0-0.1,0c-0.1-0.1-0.1-0.2,0-0.3l5.7-8c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3l-5.7,8      C168.3,82.9,168.3,82.9,168.2,82.9z"></path>
  </g>
  <g>
    <path d="M174.4,83.2c-1,0-1.5-0.2-1.7-0.7c-0.2-0.6,0.3-1.6,1.4-2.8c0.8-0.9,1.9-1.8,2.3-2.1c0.8-0.6,2.6-2.1,2.4-2.9      c0-0.1-0.1-0.3-0.5-0.4c-2.8-0.8-7.1,4.6-7.2,4.7c-0.1,0.1-0.2,0.1-0.3,0c-0.1-0.1-0.1-0.2,0-0.3c0,0,1.1-1.4,2.6-2.7      c2-1.7,3.7-2.4,5-2.1c0.5,0.1,0.7,0.4,0.8,0.7c0.2,1.3-2.6,3.2-2.6,3.3c-1,0.7-3.9,3.4-3.6,4.5c0.2,0.5,1,0.5,1.7,0.5      c2.5-0.1,5.9-3,5.9-3.1c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3c0,0-0.9,0.8-2.1,1.5c-1.6,1-3,1.6-4.1,1.6      C174.6,83.2,174.5,83.2,174.4,83.2z" data-position="22"></path>
  </g>
  <g>
    <path d="M182.8,81.4c-0.6,0-1-0.1-1.3-0.2c-0.5-0.2-0.8-0.6-0.9-1c-0.2-1,1-4.6,4.6-6.4c1.2-0.6,2.1-0.7,2.8-0.3      c1.1,0.7,1,2.3,1,2.4c0,0.1-0.1,0.2-0.2,0.2c0,0,0,0,0,0c-0.1,0-0.2-0.1-0.2-0.2c0,0,0-1.5-0.9-2.1c-0.6-0.4-1.4-0.3-2.5,0.3      c-3.3,1.7-4.6,5-4.4,6c0,0.2,0.2,0.5,0.7,0.7c0.5,0.2,2,0.6,4.5-1c0.1-0.1,0.2,0,0.3,0.1c0.1,0.1,0,0.2-0.1,0.3      C184.9,81.1,183.7,81.4,182.8,81.4z" data-position="23"></path>
  </g>
  <g>
    <path d="M178.5,91.2c0,0-0.1,0-0.1-0.1c-0.1-0.1-0.1-0.2,0-0.3c3-3,12-17.6,12.1-17.8c0.1-0.1,0.2-0.1,0.3-0.1      c0.1,0.1,0.1,0.2,0.1,0.3c-0.4,0.6-9.1,14.8-12.1,17.8C178.6,91.1,178.6,91.2,178.5,91.2z" data-position="24"></path>
  </g>
  <g>
    <path d="M107.7,100.1c-0.2,0-0.4,0-0.7,0c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0.1-0.2,0.2-0.2c7,0.5,13.8-7.9,13.9-8      c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3c0,0-1.8,2.2-4.4,4.3C114.6,98,111.2,100.1,107.7,100.1z" data-position="13"></path>
  </g>
  <g>
    <path d="M87.2,119.9c-0.4,0-0.7-0.1-1-0.3c-1.4-1.1-1.1-4.5,0.6-7.1c1.9-3,4.4-4.8,6.2-4.6c1,0.1,1.7,0.8,2.2,1.9      c0,0.1,0,0.2-0.1,0.2c-0.1,0-0.2,0-0.2-0.1c-0.4-1-1-1.6-1.8-1.7c-1.7-0.2-4,1.6-5.8,4.5c-1.6,2.4-1.9,5.7-0.7,6.6      c1,0.7,2.8-0.2,5-2.6c4.7-5.1,6.9-12,8.1-16.5c-0.1-0.1-0.2-0.3-0.4-0.5c-4-5.6-15-5.6-15.1-5.6c-0.1,0-4.1-0.2-8.3,1.2      c-2.5,0.8-4.6,2-6.2,3.6c-2,1.9-3.4,4.4-3.9,7.4c-0.9,4.5-0.4,7.8,1.5,9.7c2.1,2.2,5.4,1.7,5.5,1.7c0.1,0,0.2,0.1,0.2,0.2      c0,0.1-0.1,0.2-0.2,0.2c-0.1,0-3.5,0.5-5.8-1.8c-1.9-2-2.4-5.3-1.6-10c0.6-3.1,1.9-5.6,4-7.6c1.7-1.6,3.8-2.8,6.4-3.7      c4.3-1.4,8.4-1.2,8.5-1.2c0,0,2.8,0,6.1,0.7c5.5,1.2,8.1,3.4,9.3,5.1c0.1,0.1,0.1,0.1,0.2,0.2c0.2-0.8,0.4-1.5,0.5-2.1      c0.1-0.3,0.1-0.6,0.2-0.8c0.4-1.6,1.4-3.2,3-4.8c1.5-1.4,3.4-2.7,5.4-3.6c3.4-1.5,6.5-1.7,8.6-0.5c2.6,1.4,4.1,3.1,4.4,5      c0.4,2.1-0.6,4.4-2.8,7c-2.6,3-6.4,4.7-10.3,4.5c-3.4-0.1-6.6-1.6-8.7-4c-1.2,4.5-3.5,11.4-8.1,16.4      C90.6,118.2,88.7,119.9,87.2,119.9z M99.9,100.1c2,2.4,5.2,3.9,8.6,4c3.9,0.2,7.5-1.4,10-4.4c2.2-2.5,3.1-4.8,2.7-6.7      c-0.3-1.8-1.7-3.4-4.2-4.8c-2-1.1-5-0.9-8.2,0.6c-4.2,1.8-7.5,5.1-8.2,8.1c-0.1,0.2-0.1,0.5-0.2,0.8      C100.3,98.4,100.1,99.2,99.9,100.1z" data-position="26" style=""></path>
  </g>
  <g>
    <path data-position="27" d="M101.7,119.5c-0.3,0-0.6-0.1-0.9-0.2c-0.5-0.2-0.8-0.7-1-1.4c-0.1-0.4,0.1-1.3,0.4-2.5c-0.3-0.1-0.5-0.3-0.6-0.5      c-0.2-0.3-0.3-0.8-0.3-1.1c-1.1,1.7-3.1,4-4.4,4.2c-0.4,0.1-0.7,0-0.9-0.3c-0.6-0.6-0.4-2.1,0.5-4.4c0.6-1.7,1.4-3.2,1.4-3.2      c0-0.1,0.2-0.1,0.3-0.1c0.1,0,0.1,0.2,0.1,0.3c-0.9,1.6-2.9,6.1-1.9,7.2c0.1,0.2,0.3,0.2,0.6,0.2c1.4-0.2,4-3.6,4.8-5.2      c0-0.1,0.1-0.1,0.1-0.2c0-0.1,0.2-0.1,0.2-0.1c0.1,0,0.1,0.1,0.1,0.2c0,0,0,0.1-0.1,0.1c-0.1,0.4-0.5,1.5-0.1,2.1      c0.1,0.2,0.2,0.3,0.4,0.4c0.4-1.3,1.1-2.8,1.9-4c1-1.4,2-2.2,3.1-2.3c1.2-0.1,2,0.1,2.4,0.6c0.5,0.6,0.4,1.6-0.2,3      c-0.5,1.2-2.6,3.1-6,3.2c-0.4,0-0.7,0-1-0.1c-0.3,1.1-0.5,2-0.4,2.3c0.1,0.6,0.4,1,0.8,1.2c0.7,0.3,1.7,0.1,3.2-0.6      c3.2-1.6,5.8-3.9,5.8-3.9c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3c0,0-2.6,2.4-5.9,4C103.3,119.2,102.4,119.5,101.7,119.5z       M100.7,115.1c0.3,0.1,0.6,0.1,0.9,0.1c3.2-0.1,5.2-1.9,5.7-3c0.7-1.5,0.5-2.3,0.2-2.6c-0.3-0.4-1-0.6-2.1-0.5      c-1,0.1-2,0.8-2.9,2.1C101.8,112.4,101.1,113.9,100.7,115.1z" style=""></path>
  </g>
  <g>
    <path d="M109,119.8C109,119.8,108.9,119.8,109,119.8c-0.2-0.1-0.2-0.1-0.2-0.2l2.5-10.7c0-0.1,0.1-0.2,0.2-0.1      c0.1,0,0.2,0.1,0.1,0.2l-2.4,10c1.7-1.6,7.2-7.1,7.9-8.1c0.1-0.1,0.2-0.2,0.2-0.3c-0.5-0.3-0.7-0.7-0.7-0.9      c-0.2-0.6-0.1-1.7,0.4-2.3c0.3-0.3,0.7-0.5,1.2-0.4c0.4,0.1,0.6,0.3,0.6,0.5c0.2,0.6-0.1,1.5-1,2.9c0.1,0.1,0.3,0.1,0.4,0.1      c1,0.3,2.7,0.1,5.4-2.4c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3c-1.6,1.4-3.9,3-5.8,2.5c-0.2,0-0.3-0.1-0.5-0.2      c-0.1,0.1-0.2,0.2-0.2,0.4c-0.8,1.2-8.1,8.3-8.4,8.6C109.1,119.8,109,119.8,109,119.8z M118,107.4c-0.2,0-0.4,0.1-0.6,0.3      c-0.4,0.5-0.5,1.5-0.4,1.9c0.1,0.2,0.2,0.5,0.6,0.7c1-1.6,1.1-2.3,0.9-2.6c0-0.1-0.1-0.2-0.4-0.3C118.1,107.4,118,107.4,118,107.4      z" data-position="28"></path>
  </g>
  <g>
    <path style="" d="M122.8,119.2c-0.1,0-0.2,0-0.3,0c-0.7-0.2-1.1-0.9-1.3-2.1c-0.3-2.1,1.5-7.2,5.5-15.2c3-5.9,6.1-11.3,6.1-11.4      c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0.1,0.1,0.2,0.1,0.3c-0.1,0.2-12.4,21.5-11.7,26.3c0.2,1.1,0.5,1.7,1,1.8c1.1,0.2,2.8-1.8,3.3-2.6      c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3c0,0-0.5,0.8-1.2,1.5C124.2,118.8,123.4,119.2,122.8,119.2z" data-position="29"></path>
  </g>
  <g>
    <path d="M158.9,118.7c-0.8,0-1.5-0.1-2.2-0.4c-1.3-0.5-2.1-1.3-2.5-1.8c-0.2-0.2-0.3-0.4-0.3-0.5c0-0.1,0-0.2,0.1-0.2      c0.1,0,0.2,0,0.2,0.1c0,0,0.1,0.2,0.3,0.4c0.4,0.5,1.2,1.1,2.6,0.7c1.4-0.4,2.2-1.1,2.6-2c0.5-1.3-0.2-2.8-0.7-3.6      c-0.2-0.2-0.4-0.5-0.7-0.9c-0.3-0.3-0.5-0.6-0.8-1c-2.1,3.6-5.9,8.7-9,8.9c-0.6,0-1-0.2-1.3-0.6c-1.7-2.8,4.4-14.4,4.4-14.5      c0-0.1,0.1-0.2,0.2-0.3c0.6-1,1.8-3.2,3.7-5.6c2.4-3,5.2-5.4,8.2-7c7.1-3.8,12.1-0.3,13.5,0.8c0.2,0.2,0.7,0.7,1.1,1.6      c0.3,0.7,0.7,1.9,0.5,3.2c-0.4,2.8-2.7,5.2-7,7.3c-3,1.4-7.5,2.8-11.7,1.2c-2.5-1-3.7-2.5-3.8-2.6c-0.1-0.1,0-0.2,0-0.3      c0.1-0.1,0.2,0,0.3,0c0,0,1.2,1.5,3.6,2.5c4.1,1.5,8.4,0.2,11.4-1.2c4.2-2,6.4-4.3,6.8-7c0.3-2.4-1.1-4.2-1.4-4.5      c-1.3-1.1-6.2-4.5-13.1-0.8c-3,1.6-5.7,3.9-8.1,6.9c-1.9,2.4-3.1,4.5-3.7,5.6c-0.1,0.1-0.1,0.2-0.2,0.3c-0.4,0.7-1.9,3.6-3.1,6.7      c-1.5,3.9-2,6.4-1.4,7.4c0.2,0.3,0.5,0.5,1,0.4c3-0.1,6.8-5.3,8.8-8.8c-0.7-1-1.1-2.2-0.5-3.5c0.6-1.4,1.2-1.4,1.6-1.3      c0.6,0.2,1,1.1,0.8,1.9c-0.1,0.5-0.6,1.6-1.4,3c0.3,0.4,0.6,0.8,0.9,1.1c0.3,0.4,0.6,0.7,0.7,0.9c0.5,0.8,1.3,2.5,0.7,4      c-0.4,1-1.3,1.8-2.8,2.2c-0.6,0.2-1.1,0.2-1.5,0.1c0.2,0.1,0.4,0.2,0.6,0.3c1.9,1,4.5,0.7,7.5-0.7c7.2-3.5,7.9-6.8,7.9-6.8      c0-0.1,0.1-0.2,0.2-0.2c0.1,0,0.2,0.1,0.2,0.2c0,0.1-0.6,3.5-8.1,7.1C162.1,118.3,160.4,118.7,158.9,118.7z M158.1,104.6      c-0.3,0-0.7,0.4-1,1.1c-0.5,1.1-0.1,2.1,0.4,3c0.7-1.3,1.2-2.3,1.2-2.7c0.1-0.6-0.1-1.3-0.5-1.5      C158.2,104.6,158.1,104.6,158.1,104.6z" data-position="32"></path>
  </g>
  <g>
    <path d="M165.1,97.3c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0.1-0.2,0.2-0.2c7.3-0.5,12.2-5.3,12.2-5.4c0.1-0.1,0.2-0.1,0.3,0      c0.1,0.1,0.1,0.2,0,0.3C177.5,91.8,172.5,96.8,165.1,97.3C165.1,97.3,165.1,97.3,165.1,97.3z" data-position="25"></path>
  </g>
  <g>
    <path d="M130.4,104.9C130.3,104.9,130.3,104.9,130.4,104.9c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0.6-2,3.7-4.8      c-4.5-2.2-11.4,0.5-11.4,0.5c-0.1,0-0.2,0-0.2-0.1c0-0.1,0-0.2,0.1-0.2c0,0,1.9-0.7,4.3-1.1c3.8-0.6,6.2,0,7.6,0.7      c1.7-1.5,4-3.2,7.3-5.1c10.7-6.1,15.8-2.3,15.8-2.3l0,0c1,0.8,1.6,1.8,1.6,2.9c0.1,1.6-0.8,3.4-2.6,5.2      c-5.3,5.4-17.2,2.5-22.2-0.3c-0.8,0.7-1.4,1.4-1.9,1.9c-1.5,1.8-1.8,2.8-1.8,2.9C130.5,104.9,130.4,104.9,130.4,104.9z       M134.5,99.8c2.3,1.2,6.4,2.7,10.5,3.1c3.5,0.4,8.2,0.2,11.1-2.8c1.8-1.8,2.6-3.5,2.5-4.9c-0.1-1-0.6-1.9-1.5-2.6l0,0      c0,0-4.9-3.7-15.4,2.3C138.4,96.7,136.1,98.4,134.5,99.8z" data-position="33" style=""></path>
  </g>
  <g>
    <path d="M127.7,118.7c-0.2,0-0.5,0-0.7-0.1c-1.5-0.7-1.5-2.7-0.2-5.7c2.3-5.2,4.4-5.2,4.5-5.2c0.1,0,0.2,0.1,0.2,0.2      c0,0.1-0.1,0.2-0.2,0.2c0,0-2,0-4.1,4.9c-0.7,1.6-1.7,4.4,0,5.3c0.3,0.2,0.7,0.1,1.2,0c1.8-0.7,3.9-3.5,5.3-7.2      c-0.4,0-0.8-0.1-1.2-0.2c-0.8-0.4-1-0.9-1.1-1.3c-0.1-0.9,0.7-1.9,1.1-2.2c0.3-0.2,1.3-0.7,1.9-0.3c0.6,0.5,0.5,1.6-0.2,3.6      c1.3-0.3,2.4-1.4,2.4-1.4c0.1-0.1,0.2-0.1,0.3,0c0.1,0.1,0.1,0.2,0,0.3c-0.1,0.1-1.4,1.3-2.8,1.5c0,0,0,0,0,0.1      c-1.5,3.9-3.7,6.8-5.6,7.6C128.3,118.6,128,118.7,127.7,118.7z M134,107.1c-0.4,0-0.9,0.2-1.1,0.4c-0.3,0.2-1,1.1-1,1.9      c0,0.4,0.3,0.8,0.9,1c0.4,0.2,0.8,0.2,1.1,0.2c0.9-2.5,0.7-3.2,0.4-3.4C134.2,107.1,134.1,107.1,134,107.1z" data-position="30"></path>
  </g>
  <g>
    <path d="M137.5,118.4c-0.3,0-0.6-0.1-0.8-0.2c-0.6-0.3-1-0.8-1.2-1.5c-0.6-2.2,1.1-5.7,2-7.2c2.4-3.8,4.3-2.9,4.4-2.8      c0.1,0,0.1,0.2,0.1,0.2c0,0.1-0.2,0.1-0.2,0.1c0,0-0.4-0.2-1.1,0c-0.6,0.2-1.7,0.9-2.8,2.7c-1.1,1.7-2.5,5-2,6.9      c0.2,0.6,0.5,1,1,1.2c0.4,0.2,0.9,0.2,1.4,0c1.2-0.4,2.4-1.8,3.2-2.9c0.9-1.3,1.6-2.6,1.9-3.1c0-0.1,0.1-0.2,0.1-0.3      c-0.4-0.1-0.8-0.4-1-0.8c-1-1.6-0.2-3.8,0.8-4.6c0.6-0.5,1.2-0.6,1.7-0.2c1.2,1-0.1,3.6-0.9,5.3c0,0,0,0,0,0c0.2,0,0.3,0,0.5,0      c1.9-0.2,4.3-1.8,4.5-2.1c0-0.1,0.1-0.2,0.2-0.1c0.1,0,0.2,0.1,0.1,0.2c-0.2,0.5-2.7,2.1-4.5,2.3c-0.4,0-0.7,0-1,0      c-0.1,0.1-0.1,0.2-0.2,0.3c-0.5,1.1-2.9,5.3-5.3,6.2C138,118.3,137.8,118.4,137.5,118.4z M144.2,106.1c-0.3,0-0.6,0.2-0.8,0.3      c-1.4,1.2-1.3,3.2-0.7,4.1c0.2,0.3,0.5,0.5,0.9,0.6c0,0,0-0.1,0.1-0.1c0.7-1.4,1.9-4,1-4.8C144.4,106.2,144.3,106.1,144.2,106.1z" data-position="31"></path>
  </g>
</g>
</svg>
</div>
              
            
!

CSS

              
                body {
  perspective: 500px;
}

svg {
  width: 500px;
  height: 400px;
}

.card {
  margin: 0 auto;
  width: 500px;
  height: 400px;
  background: hsl(0, 0, 95%);
}

path, ellipse {
  fill: transparent;
  stroke: url(#gradient);
  stroke-width: 0.7;
}

[data-position] {
  opacity: 0;
  stroke-dasharray: 300;
  stroke-width: 0.7;
}

p {
  text-align: center;
  padding: 1em;
  display: block;
}
              
            
!

JS

              
                document.querySelector(".card").animate({
  transform: ["rotateX(-10deg)", "rotateX(10deg)"]
}, {
  duration: 2000,
  iterations: Infinity,
  direction: "alternate",
  easing: "ease-in-out"
});

/**
 This should work per spec I think, but it doesn't look like
 it's implemented anywhere yet.
 https://youtu.be/z9uN9tOK02A?t=17m40s
 
 So the animations of cx and transform aren't really in sync now.
 
document.querySelector("#gradient").animate({
  cy: [-290, 430]
}, {
  duration: 2000,
  iterations: Infinity,
  direction: "alternate",
  easing: "ease-in-out"
});
*/

var svg = document.querySelector("svg");
if(svg.animate){
  var parts = Array.from(document.querySelectorAll("[data-position]")).sort(function(el1, el2){
    return parseInt(el1.getAttribute("data-position"),10) < parseInt(el2.getAttribute("data-position"),10) ? -1 : 1;
  });

  function loop(){
    var finished = parts.reduce(function(previous, currentValue, index, array){
      return new Promise(function(resolve, reject){
        previous.then(function(){
          if(currentValue.getTotalLength){
            currentValue.style.opacity = 1;
            var length = currentValue.getTotalLength();
            currentValue.style.strokeDasharray = length;
            var anim = currentValue.animate([{
              "strokeDashoffset" : length
            },{
              "strokeDashoffset" : 0
            }], {
              duration: length * 3,
              fill: 'forwards'
            });
            currentValue.classList.add("animate");
            anim.finished.then(resolve);
          } else {
            setTimeout(function(){
              currentValue.style.opacity = 1;
              resolve();
            }, 100);
          }
        });
      });

    }, Promise.resolve());

    finished.then(function(){
      setTimeout(function(){
        parts.forEach(function(part){
          part.style.opacity = 0;
        });
        loop();
      },4000);
    }); 
  }

  loop();
} else {
var img = document.createElement("img");
  img.setAttribute("src","https://nicolaschevobbe.com/images/mthfckn.gif");
  document.body.appendChild(img);
  img.setAttribute("alt","Your browser does not support element.animate. This is a gif fallback");
  svg.style.display = "none";
  var txt = document.createElement("span");
  txt.textContent = "Your browser does not support element.animate. This is a gif fallback";
  document.body.appendChild(txt);
}
              
            
!
999px

Console