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

              
                <div class="svglogo">
  <p>クリックで再生</p>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" width="400" height="300">
    <defs>
      <style>
        .cls-1 {
          stroke: #000;
          stroke-miterlimit: 10;
        }
      </style>
    </defs>
    <g>
      <path class="cls-1 svg-elem-1" d="M100.58,93.81a.32.32,0,0,1,.25,0c.91.26,2.22,1.2.89,3.13a1.09,1.09,0,0,1-.22.2,44,44,0,0,0-5.26,1.78,40.64,40.64,0,0,0-6.62,3.42A34.75,34.75,0,0,0,83.91,107c-3.3,3.53-5.78,8-5.81,12.7a13.52,13.52,0,0,0,1.49,6.67A24.32,24.32,0,0,0,84,132.17c3.46,3.64,7.76,7.07,10.42,12.14a17.81,17.81,0,0,1,2.15,8.21,15.13,15.13,0,0,1-2,8.36A22.3,22.3,0,0,1,89,167.17a38.28,38.28,0,0,1-6.9,4.32,73.82,73.82,0,0,1-15,5.32l-2.31.54-1.69.36s-1.34.19-3.15.33a49.71,49.71,0,0,1-6,.16c-3.22-.08-4.17-.55-3.84-.87s1.89-.66,3.77-1.06c-.2,0,2.07-.39,4.36-.91s4.61-1.14,4.61-1.14l1.6-.35.8-.18.94-.23L68,173a64.71,64.71,0,0,0,13.9-5.31c4.27-2.32,8.3-5.42,10.18-9.55a11.9,11.9,0,0,0,1-6.58,15.82,15.82,0,0,0-2.14-6.48C88.47,141,84.57,137.81,81,134a27.42,27.42,0,0,1-4.78-6.62l-.78-2c-.22-.68-.34-1.39-.5-2.09a11.64,11.64,0,0,1-.23-2.11c0-.35-.06-.7-.06-1l.06-1.05a20.25,20.25,0,0,1,2.16-8,28.38,28.38,0,0,1,4.78-6.62,38.7,38.7,0,0,1,6.24-5.06,44.82,44.82,0,0,1,7.09-3.65A46.92,46.92,0,0,1,100.58,93.81Z"></path>
      <path class="cls-1 svg-elem-2" d="M113,139.55a.32.32,0,0,1-.24-.12,1.93,1.93,0,0,1-.81-1.45c0-.59.44-1.18,1.31-1.76a1,1,0,0,1,.25-.11,14.26,14.26,0,0,0,5.07-.26c1.92-.44,3.81-1.42,4.29-2.62,0-.16.1-.3.14-.45a3.89,3.89,0,0,1,0-.49l-.05-.6c0-.19-.08-.38-.14-.56a3.72,3.72,0,0,0-1.38-1.83,7.67,7.67,0,0,0-5.29-1.1,10.38,10.38,0,0,0-5.31,2.22,10.21,10.21,0,0,0-3.27,4.74,14.85,14.85,0,0,0-.65,6,7.69,7.69,0,0,0,2.26,5,1.33,1.33,0,0,0,.24.2l.13.11a2.65,2.65,0,0,0,.26.21l.58.39a10,10,0,0,0,1.27.62l.7.32a14.63,14.63,0,0,0,1.89.61,25.68,25.68,0,0,0,5.54.69c3.08,0,4-.25,3.87.19s-1.77,1.3-3.77,1.73a18.33,18.33,0,0,1-4.75.44,15.89,15.89,0,0,1-3.59-.46,12.09,12.09,0,0,1-1.65-.51,11.09,11.09,0,0,1-1.72-.94,7.38,7.38,0,0,1-.8-.58l-.53-.45-.71-.72a11.75,11.75,0,0,1-2.72-7.21,17.48,17.48,0,0,1,1.09-7.31,13.81,13.81,0,0,1,4.56-6,14,14,0,0,1,7.07-2.68,10.82,10.82,0,0,1,7.57,2,7.07,7.07,0,0,1,2.48,3.58,7.56,7.56,0,0,1,.28,2.17,7.88,7.88,0,0,1-.13,1.19,11.72,11.72,0,0,1-.38,1.14,7.12,7.12,0,0,1-3,3.11,14.28,14.28,0,0,1-3.59,1.38A17.73,17.73,0,0,1,113,139.55Z"></path>
      <path class="cls-1 svg-elem-3" d="M136.28,128.13a.29.29,0,0,1-.23-.08c-.76-.49-1.87-1.76,0-3.25a.76.76,0,0,1,.27-.14H147a5.43,5.43,0,0,1,1,0l.45.08.27.16a3.75,3.75,0,0,1,.53.35,2,2,0,0,1,.37.56,2.2,2.2,0,0,1,.1,1.38,6.42,6.42,0,0,1-.76,1.7c-.87,1.4-1.13,1.7-1.57,2.32l-1.25,1.69-2.53,3.3c-1.68,2.18-3.36,4.35-4.94,6.56-.78,1.1-1.54,2.21-2.23,3.33a18.58,18.58,0,0,0-.92,1.67c-.12.24-.28.6-.31.69v0h1.13s4.84.36,8.4.89c6.08.73,3.77,1.51-.36,1.91.21,0-2.22.19-4.75.33l-5.15.26h-.72a2.76,2.76,0,0,1-1.09-.44,2.63,2.63,0,0,1-1.11-2.08,5.47,5.47,0,0,1,.34-1.92c.2-.56.34-.83.51-1.21.34-.69.71-1.33,1.08-2,.76-1.24,1.56-2.4,2.37-3.54,1.63-2.29,3.33-4.48,5-6.67l2.51-3.27,1.21-1.63.76-1.08h-9.07Z"></path>
      <path class="cls-1 svg-elem-4" d="M176.37,147.71a4.08,4.08,0,0,1-1.9-2,13.28,13.28,0,0,1-.74-5.27c0-1.7.15-3,.15-3l0-1.66L174,134c0-1,.08-2.06.09-3.14v-.83c0-.27,0-.42,0-.8l.67-1.75a1.74,1.74,0,0,0-3.13-1.51,8.12,8.12,0,0,0-2.31-1.07,7.52,7.52,0,0,0-3.94,0,11.31,11.31,0,0,0-5.87,4.11,17.44,17.44,0,0,0-3,6.13,19.42,19.42,0,0,0-.63,6.72,12.65,12.65,0,0,0,2.38,6.64,8.66,8.66,0,0,0,6.58,3.4,12.58,12.58,0,0,0,3.34-.24,6.76,6.76,0,0,0,3.41-1.76,1.38,1.38,0,0,0,.18-.41,1.85,1.85,0,0,0-.31-1.6,1.34,1.34,0,0,0-.88-.34c-.57,0-1.05-.06-1.35-.09-.1,0-.11,0-.13,0-.64.69-2.47,1.07-4.07,1a5.13,5.13,0,0,1-4-2,9.23,9.23,0,0,1-1.71-4.72A15.7,15.7,0,0,1,162,131.48a8.29,8.29,0,0,1,3.87-3,4.11,4.11,0,0,1,4.09.65,3.91,3.91,0,0,1,.44.37l.22.22,0,.58c0,.92,0,1.92-.06,2.93l-.07,2.15,0,1.7a34.85,34.85,0,0,0,.54,5,13.69,13.69,0,0,0,1,3.39,4.26,4.26,0,0,0,.79,1.28,4.49,4.49,0,0,0,2.54,1.72,2.13,2.13,0,0,0,1.55-.12C177.06,148.16,176.89,148,176.37,147.71Z"></path>
      <path class="cls-1 svg-elem-5" d="M196.45,147.14c-2.43-2.85-6.15-6.62-6.15-6.62l-.19-.17h0l5.16-7.25,3.34-4.69a1.25,1.25,0,0,0,0-.31c-.16-2.35-1.83-2.18-2.68-1.84-.13,0-.15.06-.2.13l-3.33,4.7-3.6,5.06,0-1.84,0-10.92c0-1.94,0-3.84-.08-5.84a1.21,1.21,0,0,0-.15-.28c-.36-.35-.84-1-1.2-1a.76.76,0,0,0-.47.1l-.2.11-.08.07,0,0,0,0h0l.29-.17a5.29,5.29,0,0,0-.48.31,1,1,0,0,1-.19.12.9.9,0,0,1-.36.12c-.1,0-.19.11-.27.2a2.73,2.73,0,0,0-.21.3c-.08.11-.08.13-.07.21.06,1.85.07,3.79.07,5.7l0,10.89V137s.08,1.74.19,3.71l-.1.14.11.1c.15,2.65.32,5.61.37,5.38.37,3.9,1.11,6.43,1.92.14.15-1,.29-2.1.41-3.2l.57.45,2.61,2c1.89,1.46,3.75,2.88,3.62,2.72C198.28,150.77,200.68,151.86,196.45,147.14Z"></path>
      <path class="cls-1 svg-elem-6" d="M209,127.61c0-.08,0-.11.09-.22.49-.77,1.75-1.87,3.25,0a.86.86,0,0,1,.14.27v9.89s-.36,5.29-.89,9c-.74,6.3-1.51,3.78-1.92-.12-.08.41-.66-9.33-.66-9.33v-9.43Z"></path>
      <path class="cls-1 svg-elem-7" d="M210.73,117.22c-1.87-.17-2.86,3.49-.16,3.49A1.75,1.75,0,1,0,210.73,117.22Z"></path>
      <path class="cls-1 svg-elem-8" d="M251.25,183.79a.41.41,0,0,1-.25-.12,2,2,0,0,1-.8-1.46c0-.58.43-1.17,1.3-1.76a.88.88,0,0,1,.26-.1,14.8,14.8,0,0,0,5.08-.25c1.93-.44,3.86-1.41,4.36-2.62a4,4,0,0,1,.15-.45,2.63,2.63,0,0,1,0-.49l-.05-.6c0-.19-.08-.38-.14-.56a3.88,3.88,0,0,0-1.39-1.84,7.85,7.85,0,0,0-5.34-1.11,10.53,10.53,0,0,0-5.36,2.23,10.13,10.13,0,0,0-3.3,4.76,14.67,14.67,0,0,0-.64,6,7.63,7.63,0,0,0,2.32,5l.38.31a1.89,1.89,0,0,0,.27.2c.2.12.37.27.58.38a10.91,10.91,0,0,0,1.29.61,12.28,12.28,0,0,0,2.6.92,25.7,25.7,0,0,0,5.54.67c3.08,0,4-.25,3.88.2s-1.77,1.29-3.77,1.72a18.65,18.65,0,0,1-4.75.45,17.23,17.23,0,0,1-3.59-.43,13.89,13.89,0,0,1-1.65-.5,11.81,11.81,0,0,1-1.72-.91c-.27-.19-.55-.36-.81-.58l-.54-.44-.72-.72a11.51,11.51,0,0,1-2.81-7.23,17.41,17.41,0,0,1,1.08-7.36,13.69,13.69,0,0,1,4.61-6.06,14.1,14.1,0,0,1,7.11-2.67,10.86,10.86,0,0,1,7.6,2,7.12,7.12,0,0,1,2.5,3.6,7.65,7.65,0,0,1,.28,2.19,7.89,7.89,0,0,1-.14,1.19,11.15,11.15,0,0,1-.4,1.15,7.17,7.17,0,0,1-3.08,3.09,14.73,14.73,0,0,1-3.61,1.36A18.13,18.13,0,0,1,251.25,183.79Z"></path>
      <path class="cls-1 svg-elem-9" d="M282.71,170.72a.38.38,0,0,1,.2.2,2,2,0,0,1,.36,1.59c-.15.57-.72,1-1.75,1.35a.8.8,0,0,1-.27,0,5.1,5.1,0,0,0-4.15-.36,3.28,3.28,0,0,0-2,2.64,3,3,0,0,0,.25,1.63,3.82,3.82,0,0,0,1.21,1.31c1.22.92,2.87,1.8,4.39,3.11a10.25,10.25,0,0,1,2.05,2.44,8.15,8.15,0,0,1,1,3.16,6.6,6.6,0,0,1-1,4.18s-.26.35-.74.88c-.25.23-.56.51-.92.8a11.53,11.53,0,0,1-1.27.77,10.54,10.54,0,0,1-3.19,1,9.42,9.42,0,0,1-3.33-.17,4.53,4.53,0,0,1-2.94-1.88c-.34-.56-.27-.78,0-.77s.62.25,1.21.41a5.94,5.94,0,0,0,2.13.34,9.2,9.2,0,0,0,3.71-1,6.21,6.21,0,0,0,2.06-1.64,5,5,0,0,0,.43-.66,1,1,0,0,0,.11-.25,2.85,2.85,0,0,0,.31-1.68,4.93,4.93,0,0,0-.58-1.81,6.82,6.82,0,0,0-1.33-1.56c-1.14-1-2.62-1.78-4.21-3a7,7,0,0,1-2.26-2.59,6.42,6.42,0,0,1-.55-3.5,6.76,6.76,0,0,1,4-5.43A8.48,8.48,0,0,1,282.71,170.72Z"></path>
      <g>
        <path class="cls-1 svg-elem-10" d="M292.41,171.85c0-.08,0-.11.09-.22.49-.77,1.75-1.88,3.25,0a.76.76,0,0,1,.14.27v9.89s-.36,5.28-.89,9c-.74,6.29-1.51,3.78-1.92-.12-.08.41-.66-9.33-.66-9.33v-9.43Z"></path>
        <path class="cls-1 svg-elem-11" d="M294.14,161.45c-1.89-.16-2.88,3.5-.17,3.5S296.35,161.65,294.14,161.45Z"></path>
      </g>
      <path class="cls-1 svg-elem-12" d="M321.12,189.79c-.19-4.49-.19-9,0-13.5.08-1.88.17-3.83.41-5.53a.71.71,0,0,0-.1-.26L321,170c-.16-.09-.35-.09-.47-.25s-.37-.57-.65-.71a.56.56,0,0,0-.46,0c-.17,0-.42.28-.53.33a2.44,2.44,0,0,0-.66.62.35.35,0,0,0-.12.23l-.06.5a11.35,11.35,0,0,0-5.54-1.12,10,10,0,0,0-5,1.72,9.15,9.15,0,0,0-3.33,4.15,5.18,5.18,0,0,0-.44,1.23c-.11.41-.23.83-.33,1.24a20.83,20.83,0,0,0-.25,2.48,14.26,14.26,0,0,0,.64,5,7.13,7.13,0,0,0,.26.78l.4.76c.14.25.27.51.43.75l.55.68.36.39a11.8,11.8,0,0,0,1.11.85,9.39,9.39,0,0,0,1.71.84,10.42,10.42,0,0,0,7-.23,7.26,7.26,0,0,0,2-1.13l0,.87c.05,1.15.12,2.31.21,3.47a17.57,17.57,0,0,1,0,3.08,7.17,7.17,0,0,1-2.21,4.9,5.74,5.74,0,0,1-1.83,1.06,7.51,7.51,0,0,1-1.17.43,10.3,10.3,0,0,1-2.84.35,5.78,5.78,0,0,1-2.53-.56c-.61-.3-.94-.6-.9-.52-1.29-1-1.93-2.43-2.29-2.65-.18-.14-.38,0-.39.67a5.34,5.34,0,0,0,1.24,3.24,6.5,6.5,0,0,0,2.75,2.09,10,10,0,0,0,3.28.68,12.11,12.11,0,0,0,2.52-.1c.63-.1,1-.2,1-.2a9.69,9.69,0,0,0,3.41-1.87,10.65,10.65,0,0,0,3.39-7.16,21,21,0,0,0,0-3.72C321.23,192,321.17,190.91,321.12,189.79Zm-5.94-1.47a11.64,11.64,0,0,1-2.71.06,7.65,7.65,0,0,1-2.39-.64l-.47-.21-.38-.26a2.33,2.33,0,0,1-.57-.46,5.77,5.77,0,0,1-1.65-2.54,10.83,10.83,0,0,1-.45-3.76c0-.67.14-1.29.18-1.94l.25-.89a3,3,0,0,1,.31-.86,6,6,0,0,1,5.38-3.77,7.7,7.7,0,0,1,4.43,1.12,2.08,2.08,0,0,0,.25,0l.34-.08-.09,2.07c-.13,3.85-.14,7.67,0,11.51A11.48,11.48,0,0,1,315.18,188.32Z"></path>
      <path class="cls-1 svg-elem-13" d="M350,182.23a25.16,25.16,0,0,0-.47-3.41,15.33,15.33,0,0,0-1.89-4.86,10.29,10.29,0,0,0-4.06-3.73,12.67,12.67,0,0,0-5.2-1.22,10.87,10.87,0,0,0-5.35,1.16,10.06,10.06,0,0,0-1.36.86v-.63a1.21,1.21,0,0,0-.15-.28c-1.55-1.83-2.77-.61-3.25.12a.29.29,0,0,0-.08.22l0,5.73v2.26l0,2.74s.11,2.41.23,4.81.19,4.7.23,4.5c.14,1.94.33,3.54.65,3.9s.77-.56,1.27-3.71c.67-3.7,1.08-9,1.08-9l0-3.22,0-1.87h0c.1-.05.11-.07.13-.13a5.61,5.61,0,0,1,2.81-3.21,7.46,7.46,0,0,1,3.63-.77,9.15,9.15,0,0,1,3.76.86c2.22,1.06,3.52,3.47,4.12,6.22a23.16,23.16,0,0,1,.36,2.52s.1.57.21,1.42.21,2,.2,3.17c.1,2.32-.08,4.62,0,4.43-.1,3.84.28,6.53,1.9.34.22-.92.46-1.94.65-3s.31-2.06.4-3,.1-1.75.14-2.32Z"></path>
      <g>
        <path class="cls-1 svg-elem-14" d="M269.76,121.86a.16.16,0,0,0-.2-.08,1.93,1.93,0,0,0-1.09-1.61.28.28,0,0,0-.24-.07,41.53,41.53,0,0,0-5.86.65l-.89.18a17.78,17.78,0,0,0-1.89.43l-1.87.52c-.61.2-1.22.44-1.83.66a33.91,33.91,0,0,0-3.56,1.55c-1.17.56-2.25,1.28-3.38,1.92A38.87,38.87,0,0,0,238,136.84a37.5,37.5,0,0,0-2,3.24l-1,1.65-.83,1.71c-.54,1.15-1.15,2.28-1.62,3.45l-1.35,3.55A35,35,0,0,0,230,154L229,157.66l-1,4.13c-2.2.29-4.42.46-6.66.54-2,0-4,.06-6.1,0l-1.55,0-1.59.06-3.19.14h0a28.13,28.13,0,0,0-3.43.39c-1.14.18-2.29.27-3.42.54l-.86.22-.81.21a35,35,0,0,0-13.93,6.65,27.25,27.25,0,0,0-8.82,12.86,22,22,0,0,0-1,7.92,9.45,9.45,0,0,0,.24,2,10.34,10.34,0,0,0,.49,2l.7,2a6,6,0,0,0,1.69,2,12.44,12.44,0,0,0,1.81,1.18l.36.19h0a.51.51,0,0,0,0,.17,1.71,1.71,0,0,0,.13.34,3.44,3.44,0,0,0,.31.64,5.77,5.77,0,0,0,.8,1.06,8.11,8.11,0,0,0,1.93,1.42A19.31,19.31,0,0,0,193,206a46.92,46.92,0,0,0,7.67-.36l1.92-.23c.64-.1,1.28-.3,1.91-.45l1.91-.48a14.19,14.19,0,0,0,1.85-.68A25.93,25.93,0,0,0,220.34,194a52.73,52.73,0,0,0,6.31-13.89c1.51-4.79,2.68-9.62,3.86-14.41l.21-.81c.69-.12,1.38-.25,2.07-.4a41.25,41.25,0,0,0,11.48-4.28,36.42,36.42,0,0,0,9.55-7.73,77.72,77.72,0,0,0,7.09-9.75C262,141,263,139.34,264,137.6l.55-1,1.09-2s1-2.24,1.94-4.49a38,38,0,0,0,1.55-4.31C269.7,123.93,270,122.29,269.76,121.86Zm-46.42,57.19a49.12,49.12,0,0,1-5.87,13A22.41,22.41,0,0,1,207,200.6a11.21,11.21,0,0,1-1.62.6l-1.68.42c-.57.13-1.12.31-1.7.4l-1.75.2a43.1,43.1,0,0,1-7.1.34,16.35,16.35,0,0,1-6.44-1.32,4.66,4.66,0,0,1-1.05-.76,2.55,2.55,0,0,1-.31-.4.7.7,0,0,1-.08-.14,12.48,12.48,0,0,0,3.7-2.66,1.4,1.4,0,0,0-2.09-1.86,9.36,9.36,0,0,1-3,2.08l-.28.16h0l-.29-.14-.17-.09a8.69,8.69,0,0,1-1.29-.84,3.39,3.39,0,0,1-.74-.77c-.17-.55-.34-1-.52-1.53a7.2,7.2,0,0,1-.37-1.57,6.82,6.82,0,0,1-.2-1.64,18.56,18.56,0,0,1,.84-6.67,23.77,23.77,0,0,1,7.7-11.19,31.51,31.51,0,0,1,12.58-6l.75-.19.79-.2c1-.25,2.13-.33,3.18-.51a24.83,24.83,0,0,1,3.21-.36h0l2.84-.13a27.67,27.67,0,0,1,2.89,0c2,0,4,0,6,0s4.16-.18,6.24-.4C225.87,170,224.74,174.6,223.34,179.05ZM267.4,125c-1.88,3.2-4.61,7.64-4.61,7.64l-1.11,2-.29.51-.32.57c-.5.88-1,1.76-1.54,2.63a98.28,98.28,0,0,1-6.82,10,35,35,0,0,1-8.69,7.88,36.43,36.43,0,0,1-10.86,4.52c-.5.13-1,.24-1.5.35l.66-2.63,1-3.48a31.44,31.44,0,0,1,1.13-3.44l1.28-3.37c.45-1.11,1-2.16,1.53-3.25l.78-1.62.91-1.53c.64-1,1.17-2.09,1.9-3a35.6,35.6,0,0,1,10-9.9c1-.57,2-1.23,3-1.73a31.64,31.64,0,0,1,3.22-1.4c.55-.2,1.1-.41,1.66-.59l1.7-.47a14.15,14.15,0,0,1,1.71-.4l.82-.17a39.21,39.21,0,0,1,5.2-.58C268,124,267.7,124.42,267.4,125Z"></path>
        <path class="cls-1 svg-elem-15" d="M205.44,179.15a5.41,5.41,0,0,0-4.54,5.06c.88,1.82,1.9,2.69,3.25,3l.6-.17a2.46,2.46,0,0,1-.63-1.64,2.5,2.5,0,0,1,5,0,2.56,2.56,0,0,1,0,.39l.47-.14a8.17,8.17,0,0,0,2-3.52C211.49,180.92,209.2,178.45,205.44,179.15Z"></path>
      </g>
    </g>
  </svg>
</div>
              
            
!

CSS

              
                /***************************************************
 * Generated by SVG Artista on 10/1/2020, 4:31:44 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
  stroke-dashoffset: 270.15484619140625px;
  stroke-dasharray: 270.15484619140625px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-2 {
  stroke-dashoffset: 146.8171844482422px;
  stroke-dasharray: 146.8171844482422px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-3 {
  stroke-dashoffset: 114.41284942626953px;
  stroke-dasharray: 114.41284942626953px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg-elem-3 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-4 {
  stroke-dashoffset: 140.8094940185547px;
  stroke-dasharray: 140.8094940185547px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .svg-elem-4 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-5 {
  stroke-dashoffset: 123.22618865966797px;
  stroke-dasharray: 123.22618865966797px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .svg-elem-5 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-6 {
  stroke-dashoffset: 52.53276062011719px;
  stroke-dasharray: 52.53276062011719px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .svg-elem-6 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-7 {
  stroke-dashoffset: 13.253755569458008px;
  stroke-dasharray: 13.253755569458008px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

svg.active .svg-elem-7 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-8 {
  stroke-dashoffset: 147.4235382080078px;
  stroke-dasharray: 147.4235382080078px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .svg-elem-8 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-9 {
  stroke-dashoffset: 92.5419921875px;
  stroke-dasharray: 92.5419921875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.active .svg-elem-9 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-10 {
  stroke-dashoffset: 52.530372619628906px;
  stroke-dasharray: 52.530372619628906px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}

svg.active .svg-elem-10 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-11 {
  stroke-dashoffset: 13.233956336975098px;
  stroke-dasharray: 13.233956336975098px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}

svg.active .svg-elem-11 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-12 {
  stroke-dashoffset: 175.90859985351562px;
  stroke-dasharray: 175.90859985351562px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
}

svg.active .svg-elem-12 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-13 {
  stroke-dashoffset: 125.40436553955078px;
  stroke-dasharray: 125.40436553955078px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

svg.active .svg-elem-13 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-14 {
  stroke-dashoffset: 540.846435546875px;
  stroke-dasharray: 540.846435546875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}

svg.active .svg-elem-14 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-15 {
  stroke-dashoffset: 36.68265151977539px;
  stroke-dasharray: 36.68265151977539px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}

svg.active .svg-elem-15 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

.svglogo {
  width: 100%;
  position: rerative;
}

.svglogo p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.svglogo svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
              
            
!

JS

              
                $(function(){
  $('.svglogo').on('click', function(){
    $('svg', $(this)).addClass('active');
    $('p', $(this)).remove();
  });
});
              
            
!
999px

Console