Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                //PEN HEADER
header.header
  h1.header__title SVG icon animations with Anime.js
  .header__btns.btns
    a.header__btn.btn(href="https://github.com/nat-davydova/svg-animations-1" title="Check on Github" target="_blank") Check on Github
    
//PEN CONTENT     
.content
  
  //content inner
  .content__inner
  
    //single icon
    .icon-block
      
      //icon
      .cart-icon.icon
        svg(height="426pt" viewBox="-6 0 426 426.82755" width="426pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink")
          path(class="arrow" fill="#fff" stroke="#000" stroke-width="3" d="m207.859375 80.316406 35 30c.007813.007813.023437.015625.035156.023438.289063.246094.597657.464844.925781.660156.042969.027344.085938.054688.128907.078125.320312.179687.648437.335937.992187.464844l.160156.058593c.339844.121094.6875.210938 1.042969.277344l.15625.023438c.738281.128906 1.488281.128906 2.226563 0l.15625-.023438c.355468-.066406.703125-.15625 1.042968-.277344l.160157-.058593c.339843-.128907.671875-.285157.988281-.464844.046875-.023437.089844-.050781.132812-.078125.328126-.195312.636719-.414062.925782-.660156.011718-.007813.023437-.015625.035156-.023438l35-30c2.9375-2.519531 3.277344-6.9375.757812-9.871094-2.515624-2.9375-6.933593-3.277343-9.867187-.757812l-23.445313 20.09375v-82.78125c0-3.867188-3.132812-7-7-7-3.867187 0-7 3.132812-7 7v82.78125l-23.445312-20.09375c-2.933594-2.519531-7.351562-2.179688-9.871094.757812-2.515625 2.933594-2.175781 7.351563.761719 9.871094zm0 0")
          path(class="cart" fill="#fff" stroke="#000" stroke-width="3" d="m407.414062 133.679688h-312l-3.277343-24.574219c-.007813-.054688-.015625-.109375-.023438-.167969-3.195312-20.703125-21.050781-35.957031-42-35.871094h-42.699219c-3.867187 0-7 3.132813-7 7 0 3.863282 3.132813 7 7 7h42.699219c14.019531-.058594 25.980469 10.128906 28.160157 23.980469l33.792968 253.425781c.007813.054688.015625.113282.023438.167969 3.195312 20.703125 21.050781 35.957031 42 35.875h5.875c2.578125 15.195313 15.742187 26.3125 31.152344 26.3125 15.414062 0 28.578124-11.117187 31.15625-26.3125h58.46875c2.707031 15.863281 16.902343 27.160156 32.96875 26.242187 16.070312-.921874 28.878906-13.765624 29.757812-29.835937s-10.457031-30.234375-26.328125-32.898437c-15.871094-2.667969-31.210937 7.015624-35.632813 22.492187h-60c-3.871093-13.574219-16.273437-22.933594-30.386718-22.933594-14.117188 0-26.519532 9.359375-30.390625 22.933594h-6.640625c-14.019532.058594-25.984375-10.128906-28.164063-23.980469l-10.183593-76.382812h218.40625c18.117187-.007813 34.242187-11.484375 40.179687-28.597656l39.703125-114.578126c.742188-2.140624.402344-4.507812-.910156-6.355468s-3.441406-2.945313-5.707032-2.941406zm-95.523437 243.90625c9.726563 0 17.613281 7.882812 17.613281 17.609374 0 9.726563-7.886718 17.613282-17.613281 17.613282s-17.609375-7.886719-17.609375-17.613282c.011719-9.722656 7.890625-17.597656 17.609375-17.609374zm-120.777344 0c9.726563 0 17.609375 7.882812 17.613281 17.609374 0 9.726563-7.886718 17.613282-17.613281 17.613282-9.726562 0-17.609375-7.886719-17.609375-17.613282.011719-9.722656 7.886719-17.597656 17.609375-17.609374zm169.988281-124.621094c-3.984374 11.480468-14.800781 19.179687-26.953124 19.183594h-220.273438l-16.601562-124.46875h300.300781zm0 0")
          
      //replay btn
      button.icon-block__replay.btn(type="button") Replay
      
    //single icon
    .icon-block
      
      //icon
      .signal-icon.icon
      
        svg(height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink")
          path(class="signal signal--sm" fill="#fff" stroke="#000" stroke-width="3" d="m422.586 85.984a42.127 42.127 0 0 0 -22.26-6.96 6 6 0 0 0 -.287 12 30.132 30.132 0 0 1 15.928 4.973 28.881 28.881 0 0 1 12.582 18.974 29.8 29.8 0 0 1 -1.726 16.691 6 6 0 1 0 11.114 4.526 41.772 41.772 0 0 0 2.411-23.4 40.791 40.791 0 0 0 -17.762-26.804z")
          path(class="signal signal--md" fill="#fff" stroke="#000" stroke-width="3" d="m444.156 59.57a69 69 0 0 0 -35-11.34 6 6 0 1 0 -.531 11.989 56.984 56.984 0 0 1 28.911 9.361 55.114 55.114 0 0 1 19.464 22.375 56.478 56.478 0 0 1 -1.773 51.231 6 6 0 1 0 10.513 5.785 68.509 68.509 0 0 0 2.108-62.147 67.114 67.114 0 0 0 -23.692-27.254z")
          path(class="signal signal--lg" fill="#fff" stroke="#000" stroke-width="3" d="m465.391 33.644a94.837 94.837 0 0 0 -58.084-15.6 6 6 0 1 0 .67 11.98 82.972 82.972 0 0 1 50.794 13.625 80.683 80.683 0 0 1 33.038 44.863 83.017 83.017 0 0 1 -9.1 66.031 6 6 0 1 0 10.244 6.248 95.042 95.042 0 0 0 10.381-75.6 92.691 92.691 0 0 0 -37.943-51.547z")
          path(class="signal-body" fill="#fff" stroke="#000" stroke-width="3" d="m341.338 207.37 42.671-53.581a26.106 26.106 0 1 0 -22.871-27.274l-60.646 40.5c-28.212-25.363-56.689-46.771-80.271-60.327-28.208-16.215-46.312-19.72-55.349-10.713l-3.326 3.315a171.935 171.935 0 0 0 0 243.718q3.429 3.418 7.006 6.6l-58.5 89.234h-65.5a39.6 39.6 0 0 0 -39.552 39.552v9.711a6 6 0 0 0 6 6h378.1a6 6 0 0 0 6-6v-9.711a39.6 39.6 0 0 0 -39.55-39.551h-62.212l-38.425-47.843a174.888 174.888 0 0 0 28.863 2.4 172.621 172.621 0 0 0 122.235-50.384l3.322-3.311.009-.009c8.961-8.93 5.941-26.96-8.973-53.586-12.847-22.94-33.8-50.881-59.031-78.74zm45.943-93.6a14.114 14.114 0 1 1 -14.181 14.117 14.163 14.163 0 0 1 14.181-14.114zm-23.581 25.46a26.292 26.292 0 0 0 8.568 10.033l-89.53 112.421q-10.136-9.3-20.244-19.351-11.045-11.013-20.785-21.633zm-190.36-34.755c2.574-2.568 14.084-2.8 40.9 12.616 22.243 12.786 49.1 32.891 75.944 56.808l-56.584 37.79c-40.8-46.165-61.991-84.351-61.991-101.254-.004-2.806.581-4.811 1.735-5.96zm182.212 346.368a27.582 27.582 0 0 1 27.55 27.551v3.711h-366.102v-3.711a27.582 27.582 0 0 1 27.551-27.551h311zm-77.6-12h-153.552l53.433-81.508a171.778 171.778 0 0 0 58.286 29.42zm-107.939-104.331a159.923 159.923 0 0 1 -9.561-216.312c5.826 29.625 41.948 81.178 93.575 132.635 31.849 31.742 64.882 58.6 93.016 75.624q24.1 14.583 39.959 17.656c-63.145 52.723-157.659 49.53-216.989-9.603zm230.858-3.321c-2.176 2.17-7.541 2.316-14.72.4-8.7-2.322-20.08-7.647-32.9-15.4-18.849-11.406-40.026-27.42-61.584-46.455l42.087-52.847c24.053 26.718 43.946 53.311 56.146 75.081 17.523 31.284 11.694 38.502 10.971 39.221z")

      //replay btn
      button.icon-block__replay.btn(type="button") Replay
      
    //single icon
    .icon-block
      
      //icon
      .progress-icon.icon
      
        svg(height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink")
          path(class="progress-arrow" fill="#fff" stroke="#000" stroke-width="3" d="m163.024 87.4a6 6 0 0 0 6-6v-33.625c80.134 96.113 173.933 168.582 279.042 215.5 15 6.7 30.434 12.952 45.875 18.595a6 6 0 1 0 4.119-11.27c-15.181-5.548-30.355-11.7-45.1-18.282-104.55-46.668-197.788-119.077-277.305-215.318h37.1a6 6 0 0 0 0-12h-49.731c-.07 0-.138.008-.207.011-.117 0-.234.006-.35.017-.093.009-.182.024-.273.036s-.206.027-.308.047-.2.044-.293.068-.185.044-.276.071-.2.065-.3.1-.172.06-.257.094-.2.087-.294.134c-.08.037-.16.073-.239.114-.1.053-.2.112-.294.171-.072.043-.144.084-.214.13-.1.067-.2.14-.294.212-.054.04-.109.075-.162.117-.01.008-.018.018-.028.026-.089.072-.173.151-.257.228-.064.059-.131.114-.192.175s-.093.1-.14.152a5.975 5.975 0 0 0 -.882 1.206l-.019.032c-.053.1-.1.2-.144.3-.037.079-.078.156-.112.237-.017.039-.029.081-.045.121a5.972 5.972 0 0 0 -.348 1.3c-.014.088-.031.176-.04.264s-.009.151-.014.226c-.009.125-.019.251-.019.377v.034 50.4a6 6 0 0 0 6.001 6z")
          path(class="progress-diagram" fill="#fff" stroke="#000" stroke-width="3" d="m496 348.02h-105.881v-72.557a6 6 0 0 0 -6-6h-121.08v-82.763a6 6 0 0 0 -6-6h-117.03v-88.044a6 6 0 0 0 -6-6h-114.226a6 6 0 0 0 -6 5.941l-3.783 388.345a6 6 0 0 0 6 6.058h480a6 6 0 0 0 6-6v-126.98a6 6 0 0 0 -6-6zm-117.881-66.557v72.557l-1.542 120.98h-113.538v-193.537zm-127.08-88.763v282.3h-111.03v-282.3zm-225.315-94.044h102.285v376.344h-105.95zm464.276 376.344h-101.423l1.466-114.98h99.957z")
      
        
      //replay btn
      button.icon-block__replay.btn(type="button") Replay
      
    //single icon
    .icon-block
      
      //icon
      .rocket-icon.icon
         
        svg(height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink")
          path(fill="#fff" stroke="#000" stroke-width="3" d="m452.8 19.007a10.8 10.8 0 0 0 -11.663-8.945l-65.18 7.294c-2.961.332-5.893.747-8.8 1.227h-.017c-35.022 5.783-66.014 22.223-87.987 46.864l-77.925 101.575-126.7-17.47a7.99 7.99 0 0 0 -8.466 4.835 7.859 7.859 0 0 0 2.524 9.377l85.26 65.017-38.23 49.83 19.225 14.661-15.741 20.22-.01.012-68.324 87.764a6 6 0 1 0 9.468 7.371l65.75-84.456 108.557 82.782-66.441 85.349a6 6 0 1 0 9.468 7.372l68.326-87.764 16.593-21.314 14.593 11.128 38.24-49.824 78.44 59.815a8.008 8.008 0 0 0 9.749-.041 7.86 7.86 0 0 0 2.453-9.377l-45.93-108.653 72.687-94.706.21-.292c24.568-36.323 34.292-82.09 27.379-128.87zm-79.323 10.753c1.266-.173 2.537-.335 3.814-.478l63.841-7.144 7.3 49.4a189.65 189.65 0 0 1 1.924 21.143c-18.154 5.184-37.308 1.383-53.156-10.7a59.973 59.973 0 0 1 -23.723-52.221zm-285.402 133.774 104.748 14.443-31.672 41.282zm153.838 233.966-108.557-82.786 11.028-14.166 108.556 82.782zm147.087-4.493-66.376-50.616 29-37.791zm34.086-201.22-148.247 193.151-142.376-108.571 155.792-203.094c18.506-20.673 44.045-35.049 73.091-41.373a72.052 72.052 0 0 0 28.577 59.624 73.647 73.647 0 0 0 44.638 15.339 70.149 70.149 0 0 0 15.805-1.813c-1.043 31.669-10.358 61.65-27.282 86.737z")
          path(fill="#fff" stroke="#000" stroke-width="3" d="m339.963 153.373c-29.539-22.524-72.093-17.061-94.858 12.18a66.613 66.613 0 0 0 12.307 94.047 68.186 68.186 0 0 0 94.858-12.18 66.613 66.613 0 0 0 -12.307-94.051zm2.838 86.68a56.147 56.147 0 0 1 -78.112 10.009 54.614 54.614 0 0 1 -10.115-77.137 56.15 56.15 0 0 1 78.113-10.01 54.615 54.615 0 0 1 10.113 77.138z")
          path(fill="#fff" stroke="#000" stroke-width="3" d="m321.145 177.545a37.1 37.1 0 0 0 -51.616 6.633 36.307 36.307 0 0 0 6.7 51.254 37.1 37.1 0 0 0 51.616-6.633 36.307 36.307 0 0 0 -6.7-51.254zm-2.768 43.882a25.063 25.063 0 0 1 -34.869 4.462 24.306 24.306 0 0 1 -4.508-34.339 25.064 25.064 0 0 1 34.869-4.463 24.306 24.306 0 0 1 4.51 34.34z")
          path(class="rocket-smoke" fill="#fff" stroke="#000" stroke-width="3" d="m176.345 448.711a6 6 0 0 0 8.42-1.049l28.035-36.011a6 6 0 1 0 -9.469-7.371l-28.031 36.011a6 6 0 0 0 1.045 8.42z")
          path(class="rocket-smoke" fill="#fff" stroke="#000" stroke-width="3" d="m170.972 455.611a6 6 0 0 0 -8.42 1.049l-8.071 10.367a6 6 0 1 0 9.469 7.371l8.071-10.367a6 6 0 0 0 -1.049-8.42z")
          path(class="rocket-smoke" fill="#fff" stroke="#000" stroke-width="3" d="m177.8 377.34a6 6 0 0 0 -8.42 1.049l-54.29 69.732a6 6 0 1 0 9.469 7.371l54.288-69.732a6 6 0 0 0 -1.047-8.42z")
          path(class="rocket-smoke" fill="#fff" stroke="#000" stroke-width="3" d="m133.236 364.011a5.99 5.99 0 0 0 4.739-2.315l3.469-4.457a6 6 0 1 0 -9.468-7.371l-3.47 4.457a6 6 0 0 0 4.73 9.686z")
          path(class="rocket-smoke" fill="#fff" stroke="#000" stroke-width="3" d="m115.958 389.978 2.728-3.5a6 6 0 0 0 -9.469-7.373l-2.728 3.5a6 6 0 0 0 9.469 7.374z")
          path(class="rocket-smoke" fill="#fff" stroke="#000" stroke-width="3" d="m97.747 403.6a6 6 0 0 0 -8.42 1.048l-6.059 7.784a6 6 0 1 0 9.468 7.371l6.06-7.784a6 6 0 0 0 -1.049-8.419z")
      
        
      //replay btn
      button.icon-block__replay.btn(type="button") Replay
      
    //single icon
    .icon-block
      
      //icon
      .chat-icon.icon
        
        svg(xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 591.6 591.6" style="enable-background:new 0 0 591.6 591.6;" xml:space="preserve")
          path(fill="#fff" stroke="#000" stroke-width="3" d="M541.008,91.392C508.368,58.752,464.712,40.8,418.2,40.8H173.4c-46.512,0-89.964,17.952-122.808,50.592C17.952,124.236,0,167.688,0,214.2s17.952,89.964,50.592,122.808c30.396,30.192,69.972,47.94,112.608,50.388V540.6c0,3.876,2.244,7.344,5.508,9.18c1.428,0.816,3.06,1.02,4.692,1.02c2.04,0,4.284-0.612,5.916-2.04L401.064,387.6H418.2c46.512,0,89.964-17.952,122.808-50.592c32.64-32.64,50.592-76.296,50.592-122.808S573.648,124.236,541.008,91.392z M418.2,367.2h-20.4c-2.244,0-4.284,0.612-5.916,2.04L183.6,520.608V377.4c0-5.712-4.488-10.2-10.2-10.2c-84.456,0-153-68.544-153-153s68.544-153,153-153h244.8c84.456,0,153,68.544,153,153S502.656,367.2,418.2,367.2z")
          path(fill="#fff" stroke="#000" stroke-width="3" d="M178.5,81.6c0-2.856-2.244-5.1-5.1-5.1c-75.888,0-137.7,61.812-137.7,137.7c0,2.856,2.244,5.1,5.1,5.1s5.1-2.244,5.1-5.1c0-70.38,57.12-127.5,127.5-127.5C176.256,86.7,178.5,84.456,178.5,81.6z")
          path(class="chat-dot" fill="#fff" stroke="#000" stroke-width="3" d="M153,163.2c-28.152,0-51,22.848-51,51s22.848,51,51,51s51-22.848,51-51S181.152,163.2,153,163.2z M153,244.8c-16.932,0-30.6-13.668-30.6-30.6s13.668-30.6,30.6-30.6s30.6,13.668,30.6,30.6S169.932,244.8,153,244.8z")
          path(class="chat-dot" fill="#fff" stroke="#000" stroke-width="3" d="M295.8,163.2c-28.152,0-51,22.848-51,51s22.848,51,51,51s51-22.848,51-51S323.952,163.2,295.8,163.2z M295.8,244.8c-16.932,0-30.6-13.668-30.6-30.6s13.668-30.6,30.6-30.6s30.6,13.668,30.6,30.6S312.732,244.8,295.8,244.8z")
          path(class="chat-dot" fill="#fff" stroke="#000" stroke-width="3" d="M438.6,163.2c-28.152,0-51,22.848-51,51s22.848,51,51,51c28.152,0,51-22.848,51-51S466.752,163.2,438.6,163.2zM438.6,244.8c-16.932,0-30.6-13.668-30.6-30.6s13.668-30.6,30.6-30.6s30.6,13.668,30.6,30.6S455.532,244.8,438.6,244.8z")
      
        
      //replay btn
      button.icon-block__replay.btn(type="button") Replay
!

CSS 

              
                //mixins
@mixin transition-mix ($property: all, $duration: 0.2s, $timing: linear, $delay: 0s) {
  transition-property: $property;
  transition-duration: $duration;
  transition-timing-function: $timing;
  transition-delay: $delay;
}

@mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
  position: absolute;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;
}

//basic variables
$theme-font-color: #2c2c2c;

//common styles
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: {
    family: 'Fira Sans', sans-serif;
    size: 16px;
  }
  color: $theme-font-color;
  
  a {
    color: inherit;
    text-decoration: none;
  }
}

.btn {
  @include transition-mix;
  
  padding: 10px 20px;
  display: inline-block;
  margin-right: 10px;
  
  background-color: #fff;
  border: 1px solid $theme-font-color;
  border-radius: 3px;
  
  cursor: pointer;
  
  outline: none;
  
  &:last-child {
    margin-right: 0;
  }
  
  &:hover,
  &.js-active{
    color: #fff;
    
    background-color: $theme-font-color;
  }
}

//header styles
.header {
  max-width: 600px;
  margin: 50px auto;
  
  text-align: center;
}

.header__title {
  margin-bottom: 30px;
  
   font: {
    size: 2.1rem;
  }
}

//content styles
.content {
  width: 95%;
  margin: 0 auto 50px;
}

.content__inner {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-gap: 60px;
  justify-content: center;
}

.icon-block {
  width: 100px;
  
  text-align: center;

  .icon {
    width: 100%;
    height: 100px;
  }
  
  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
}

.icon-block__replay {
  margin-top: 15px;
}
!

JS 

              
                const cartIcon = '.cart-icon';
const signalIcon = '.signal-icon';
const progressIcon = '.progress-icon';
const rocketIcon = '.rocket-icon';
const chatIcon = '.chat-icon';

//*** ICONS ANIMATIONS

//stroke animation
const strokeAnim = {
  strokeDashoffset: {
    value: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    duration: 1000,
    direction: 'alternate',
  }
};

//fill animation
const fillAnim =  {
  fill: {
    value: '#000',
    easing: 'linear',
    duration: 400,
    delay: 1000,
  }
};

//common animations
const baseAnims = {
  ...strokeAnim,
  ...fillAnim
};

// cart animation
let cartBounceAnimation;

const cartIconAnimation = anime({
  targets: `${cartIcon} path`,
  
  ...baseAnims,
  
  complete: function() {
    
   cartBounceAnimation = anime({
      targets: `${cartIcon} .arrow`,
      translateY: [-30, 0],
      duration: 700,
      easing: 'easeOutElastic',
      direction: 'alternate',
      loop: true
    });
    
  }
  
});

//signal animation

let signalOpacityAnimation;

const signalIconAnimation = anime({
  targets: `${signalIcon} path`,
  
  ...baseAnims,
  
  complete: function() {
    
   signalOpacityAnimation = anime({
      targets: `${signalIcon} .signal`,
      opacity: [0, 1],
      duration: 700,
      delay: anime.stagger(150),
      easing: 'linear',
      direction: 'normal',
      loop: true
    });
    
  }
  
});

//progress animation
let arrowMoveAnimation;

const progressIconAnimation = anime({
  targets: `${progressIcon} path`,
  
  ...baseAnims,
  
  complete: function() {
    
    arrowMoveAnimation = anime({
      targets: `${progressIcon} .progress-arrow`,
      translateY: [120, 0],
      translateX: [120, 0],
      duration: 1100,
      easing: 'easeOutElastic',
      direction: 'normal',
      loop: true
    });
    
  }
});

//rocket animation
let rocketSmokeAnimation;

const rocketIconAnimation = anime({
  targets: `${rocketIcon} path`,
  
  ...baseAnims,
  
  complete: function() {
    
    rocketSmokeAnimation = anime({
      targets: `${rocketIcon} .rocket-smoke`,
      translateY: [0, 20],
      translateX: [0, -20],
      opacity: [1, 0],
      duration: 250,
      delay: anime.stagger(150),
      easing: 'linear',
      direction: 'normal',
      loop: true
    });
    
  }
  
});

//chat animation
let chatDotsAnimation;

const chatIconAnimation = anime({
  targets: `${chatIcon} path`,
  
  ...baseAnims,
  
  complete: function() {
    
    chatDotsAnimation = anime({
      targets: `${chatIcon} .chat-dot`,
      opacity: [1, 0],
      duration: 450,
      delay: anime.stagger(150),
      easing: 'linear',
      direction: 'alternate',
      loop: true
    });
    
  }
  
});

//*** REPLAYS INIT

//common replay function
const replay = ({initTarget, initValues}, cbPause, cbRestart) => {
  
  anime.set(initTarget, {...initValues});
  
  cbPause.pause();
  cbRestart.restart();
}

//cart replay init
const cartReplay = document.querySelector('.cart-icon').nextElementSibling;

cartReplay.addEventListener('click', function() {
  
  replay(
    {
      initTarget: `${cartIcon} .arrow`,
      initValues: {translateY: 0}
    },
    cartBounceAnimation, 
    cartIconAnimation
  );
  
});

//signal replay init
const signalReplay = document.querySelector('.signal-icon').nextElementSibling;

signalReplay.addEventListener('click', function() {
  
  replay(
    {
      initTarget: `${signalIcon} .signal`,
      initValues: {opacity: 1}
    },
    signalOpacityAnimation, 
    signalIconAnimation
  );
  
});

//progress replay init
const progressReplay = document.querySelector('.progress-icon').nextElementSibling;

progressReplay.addEventListener('click', function() {

  replay(
    {
      initTarget: `${progressIcon} .progress-arrow`,
      initValues: {
        translateX: 0,
        translateY: 0
      }
    },
    arrowMoveAnimation, 
    progressIconAnimation
  );
  
});

//rocket icon replay init
const rocketReplay = document.querySelector('.rocket-icon').nextElementSibling;

rocketReplay.addEventListener('click', function() {
  
  replay(
    {
      initTarget: `${rocketIcon} .rocket-smoke`,
      initValues: {
        translateX: 0,
        translateY: 0,
        opacity: 1
      }
    },
    rocketSmokeAnimation, 
    rocketIconAnimation
  );
});

//chat icon replay init
const chatReplay = document.querySelector('.chat-icon').nextElementSibling;

chatReplay.addEventListener('click', function() {
  
  replay(
    {
      initTarget: `${chatIcon} .chat-dot`,
      initValues: {opacity: 1}
    },
    chatDotsAnimation, 
    chatIconAnimation
  );
  
});
!
999px

Console