Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

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.

+ 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

              
                //PEN HEADER
header.header
  h1.header__title Animated Easter SVG Icons
  .header__subtitle (via anime.js)
  .header__btns.btns
    a.header__btn.btn(
      href="https://github.com/nat-davydova/easter-icons-svg",
      title="Check on Github",
      target="_blank"
    ) Check on Github
    a.header__btn.btn(
      href="https://www.flaticon.com/packs/easter-day-41",
      title="Check on Github",
      target="_blank"
    ) Check original icons

//PEN CONTENT     
.content
  //content inner
  .content__inner
    //single icon
    .icon-block
      .icon.gift-icon
        svg(
          enable-background="new 0 0 512 512",
          height="512",
          viewBox="0 0 512 512",
          width="512",
          xmlns="http://www.w3.org/2000/svg"
        ) 
          g.gift-icon__gift
            path(
              d="m351.219 66.184h-9.198v-21.945c0-15.434-16.427-25.319-30.064-18.091l-63.618 33.721c-7.197 3.815-15.154 5.932-23.275 6.25-8.121-.319-16.078-2.436-23.275-6.25l-63.619-33.721c-13.637-7.228-30.064 2.657-30.064 18.091v21.945h-9.198c-18.552 0-33.592 15.04-33.592 33.592v14.187h319.495v-14.187c0-18.552-15.04-33.592-33.592-33.592z",
              fill="#df646e"
            )
            path(
              d="m351.219 66.184h-9.198v-21.945c0-15.434-16.427-25.319-30.064-18.091l-5.885 3.119c3.941 3.652 6.51 8.876 6.51 14.971v21.945h9.198c18.552 0 33.592 15.04 33.592 33.592v14.187h29.439v-14.186c0-18.552-15.04-33.592-33.592-33.592z",
              fill="#dc4955"
            )
            path(
              d="m48.775 451.919v-139.169l53.535-28.111-53.535-54.569v-43.806h352.576v265.655c0 13.607-11.031 24.638-24.638 24.638h-85.941l-71.057-68.727-4.825 68.727h-141.477c-13.607.001-24.638-11.03-24.638-24.638z",
              fill="#e27c48"
            )
            path(
              d="m48.775 319.833 156.725 156.725h96.575l-253.3-253.3z",
              fill="#f7f3f1"
            )
            path(
              d="m48.775 186.264v31.175h295.722c13.952 0 25.263 11.31 25.263 25.263v209.218c0 13.607-11.031 24.638-24.638 24.638h31.592c13.607 0 24.638-11.031 24.638-24.638v-265.656z",
              fill="#dd552d"
            )
            path(
              d="m401.352 351.029-164.766-164.765h-96.575l261.341 261.341z",
              fill="#f7f3f1"
            )
            path(
              d="m401.352 447.605v-96.576l-31.593-31.592v96.576z",
              fill="#dc4955"
            )
            path(
              d="m267.761 217.439-31.175-31.175h-96.575l31.175 31.175z",
              fill="#ebe1dc"
            )
            path(
              d="m303.874 66.184h38.146v-15.452h-38.146c-4.268 0-7.726 3.459-7.726  7.726s3.459 7.726 7.726 7.726z",
              fill="#dc4955"
            )
            path(d="m312.581 50.732h29.439v15.453h-29.439z", fill="#d82f3c")
            path(
              d="m108.106 50.732v15.453h38.146c4.267 0 7.726-3.459 7.726-7.726s-3.459-7.726-7.726-7.726h-38.146z",
              fill="#dc4955"
            )
            path(
              d="m225.063 30.332c-13.983 0-25.318 11.335-25.318 25.318v58.313h50.636v-58.313c.001-13.983-11.335-25.318-25.318-25.318z",
              fill="#dc4955"
            )
            path(
              d="m0 128.028v44.171c0 7.768 6.297 14.065 14.065 14.065h421.997c7.768 0 14.065-6.297 14.065-14.065v-44.171c0-7.768-6.297-14.065-14.065-14.065h-421.997c-7.768 0-14.065 6.297-14.065 14.065z",
              fill="#94d4a2"
            )
            path(
              d="m436.062 113.963h-31.592c7.768 0 14.065 6.297 14.065 14.065v44.172c0 7.768-6.297 14.065-14.065 14.065h31.592c7.768 0 14.065-6.297 14.065-14.065v-44.171c0-7.769-6.297-14.066-14.065-14.066z",
              fill="#6dc17d"
            )
          g.gift-icon__egg
            path(
              d="m414.922 244.441c-30.052-.362-63.408 28.51-83.182 71.158-10.478 22.599 5.277 38.084 4.94 66.119-.096 7.969-21.664 26.614-19.972 33.895 9.906 42.606 48.648 72.082 95.28 72.643 47.007.566 86.706-28.435 97.259-71.354 1.705-6.933-15.613-25.262-15.522-32.855.341-28.301 12.459-44.127 2.359-67.115-18.786-42.76-51.262-72.131-81.162-72.491z",
              fill="#f1cd88"
            )
            path(
              d="m414.922 244.441c-5.426-.065-10.961.834-16.503 2.584 41.488 13.281 82.661 75.99 81.794 148.054-.587 48.734-36.294 85.223-82.785 92.035 4.748.693 9.609 1.082 14.56 1.142 54.601.657 99.342-38.576 99.999-93.177.974-80.943-51.09-150.084-97.065-150.638z",
              fill="#ebb34c"
            )
            path(
              d="m488.525 307.994c-3.533-2.159-7.977-2.159-11.51 0l-23.317 14.252c-3.533 2.16-7.977 2.16-11.511 0l-23.318-14.252c-3.533-2.159-7.978-2.159-11.511 0l-23.316 14.251c-3.533 2.16-7.978 2.16-11.511 0l-23.315-14.251c-3.533-2.16-7.978-2.16-11.511 0l-3.24 1.981c-12.037 23.777-19.84 52.329-20.206 82.724-.133 11.012 1.545 21.442 4.752 31.082l18.694-11.428c3.533-2.16 7.978-2.16 11.511 0l23.315 14.251c3.533 2.16 7.978 2.16 11.511 0l23.316-14.251c3.533-2.159 7.978-2.159 11.511 0l23.318 14.252c3.533 2.16 7.978 2.159 11.511 0l23.317-14.252c3.533-2.159 7.977-2.16 11.51 0l18.734 11.449c2.954-8.937 4.605-18.564 4.727-28.723.371-30.812-6.949-59.908-18.688-84.168z",
              fill="#80b6fc"
            )
            path(
              d="m504.485 340.14c-.018-.063-.037-.125-.055-.187-2.93-10.073-6.661-19.805-11.131-29.042l-4.773-2.917c-3.533-2.159-7.977-2.159-11.51 0l-13.118 8.018c10.343 23.191 16.661 50.386 16.316 79.066-.068 5.674-.632 11.174-1.614 16.488 3.216-1.315 6.903-1.061 9.926.786l18.734 11.449c8.302-25.119 4.48-58.621-2.775-83.661z",
              fill="#62a4fb"
            )

      //replay btn
      button.icon-block__replay.btn(type="button") Replay

    //single icon
    .icon-block
      .icon.chick-icon
        svg(
          enable-background="new 0 0 512 512",
          height="512",
          viewBox="0 0 512 512",
          width="512",
          xmlns="http://www.w3.org/2000/svg"
        )
          path(
            d="m207.983 47.935c5.71 6.271 8.68 14.434 11.519 22.374 5.831-9.696 14.035-18.953 23.01-27.431-.745-.984-1.534-1.938-2.385-2.846-5.884-6.275-15.223-10.121-23.273-7.091-5.515 2.076-9.41 7.085-11.147 12.778.806.698 1.568 1.44 2.276 2.216z",
            fill="#ebb34c"
          )
          path(
            d="m308.957 89.069c14.469-7.03 27.135-17.333 35.181-29.978 6.096-9.579 10.479-20.742 9.605-32.063s-7.976-22.615-18.827-25.957c-12.608-3.883-25.833 3.434-36.147 11.659-16.926 13.498-35.954 31.019-46.548 49.898-3.036-8.048-6.21-16.321-12.093-22.596-5.884-6.275-15.223-10.121-23.273-7.091-7.588 2.856-12.13 11.258-12.167 19.366s3.719 15.825 8.652 22.258c2.587 3.374 5.532 6.463 8.752 9.236-88.278 29.991-159.159 160.667-159.07 264.331.06 70.148 38.615 119.749 96.543 144.92 27.714 12.042 164.129 13.244 193.249.949 57.303-24.196 96.222-72.263 96.163-141.027-.087-102.318-59.412-226.002-140.02-263.905z",
            fill="#f1cd88"
          )
          path(
            d="m255.299 98.763c-16.431-2.141-31.877-11.048-41.96-24.198-4.934-6.434-8.69-14.151-8.652-22.258s4.579-16.51 12.167-19.366c8.05-3.03 17.39.817 23.273 7.091s9.057 14.548 12.093 22.596c10.594-18.879 29.623-36.4 46.548-49.898 10.314-8.226 23.539-15.542 36.147-11.659 10.851 3.342 17.952 14.636 18.827 25.957s-3.509 22.484-9.605 32.063c-17.45 27.424-56.604 43.872-88.838 39.672z",
            fill="#f1cd88"
          )
          path(
            d="m308.957 89.069c14.469-7.03 27.135-17.333 35.181-29.978 6.096-9.579 10.479-20.742 9.605-32.063-.875-11.321-7.975-22.615-18.827-25.957-11.879-3.658-24.306 2.626-34.33 10.245.846.179 1.689.401 2.528.676 10.716 3.515 17.524 14.723 18.14 25.814s-3.993 21.909-10.27 31.138c-8.285 12.183-21.111 21.971-35.656 28.517 79.308 38.906 135.528 161.219 133.322 261.287-2.148 97.42-84.662 150.492-185.064 151.222 9.863 1.2 100.109-3.673 129.229-15.969 57.303-24.196 96.222-72.263 96.163-141.027-.088-102.318-59.413-226.002-140.021-263.905z",
            fill="#ebb34c"
          )
          path(
            d="m253.917 511.977c36.007.452 69.952-5.723 99.124-18.084-13.346-36.905-51.735-63.577-97.041-63.577-44.912 0-83.022 26.213-96.683 62.62 27.772 12.112 60.006 18.607 94.6 19.041z",
            fill="#ebe1dc"
          )
          path(
            d="m344.513 476.627c-32.497 21.621-74.797 32.998-120.874 33.342.293.035.589.067.882.101 9.909 1.171 20.165 1.791 29.396 1.907 33.627.422 68.158-4.962 99.124-18.084-2.19-6.058-5.068-11.833-8.528-17.266z",
            fill="#dcd2cd"
          )
          path(
            d="m193.735 219.071c-4.268 0-7.726-3.459-7.726-7.726v-5.299c0-4.267 3.459-7.726 7.726-7.726s7.726 3.459 7.726 7.726v5.299c.001 4.267-3.458 7.726-7.726 7.726z",
            fill="#655e67"
          )
          path(
            d="m318.265 219.071c-4.268 0-7.726-3.459-7.726-7.726v-5.299c0-4.267 3.459-7.726 7.726-7.726 4.268 0 7.726 3.459 7.726 7.726v5.299c0 4.267-3.459 7.726-7.726 7.726z",
            fill="#655e67"
          )
          path(
            d="m224.457 260.196 21.321 28.436c5.11 6.816 15.334 6.816 20.444 0l21.321-28.436c2.396-3.195 2.074-7.699-.794-10.478-20.499-19.856-40.998-19.856-61.497 0-2.869 2.779-3.191 7.282-.795 10.478z",
            fill="#e27c48"
          )
          path(
            d="m450.83 317.02c-2.201-5.825-9.625-7.557-14.181-3.312-17.983 16.758-30.586 39.52-35.602 63.61-2.713 13.031-2.416 27.01 3.001 39.168 11.436 25.663 47.782 34.828 63.784 7.73 5.563-9.421 6.879-20.877 5.692-31.753-2.768-25.363-13.733-51.723-22.694-75.443z",
            fill="#e9a52d"
          )
          g(fill="#e18720")
            path(
              d="m471.533 379.943c-7.004-3.57-13.051-8.859-17.319-15.231-2.374-3.546-7.175-4.495-10.718-2.12-3.546 2.374-4.495 7.173-2.121 10.719 6.884 10.28 17.168 18.45 28.956 23.006.917.354 1.857.522 2.784.522.25 0 .495-.032.742-.056-.066-1.446-.175-2.888-.332-4.32-.453-4.152-1.144-8.331-1.992-12.52z"
            )
            path(
              d="m471.087 417.211c-.869-.404-1.825-.657-2.841-.711-10.622-.568-20.547-6.177-25.903-14.638-2.283-3.606-7.055-4.678-10.661-2.395-3.606 2.282-4.678 7.055-2.395 10.661 7.11 11.232 19.473 19.07 33.059 21.246 2.006-2.03 3.857-4.396 5.488-7.158 1.316-2.232 2.388-4.58 3.253-7.005z"
            )
          path(
            d="m61.17 317.02c2.201-5.825 9.625-7.557 14.181-3.312 17.983 16.758 30.586 39.52 35.602 63.61 2.713 13.031 2.416 27.01-3.001 39.168-11.436 25.663-47.782 34.828-63.784 7.73-5.563-9.421-6.879-20.877-5.692-31.753 2.768-25.363 13.733-51.723 22.694-75.443z",
            fill="#e9a52d"
          )
          g(fill="#e18720")
            path(
              d="m80.319 399.466c-3.607-2.283-8.378-1.211-10.661 2.395-5.356 8.461-15.282 14.07-25.903 14.638-1.016.054-1.972.307-2.841.711.864 2.425 1.936 4.773 3.254 7.004 1.631 2.762 3.482 5.128 5.488 7.158 13.586-2.176 25.948-10.014 33.059-21.246 2.282-3.604 1.21-8.377-2.396-10.66z"
            )
            path(
              d="m38.885 396.838c.926 0 1.867-.168 2.784-.522 11.788-4.556 22.071-12.726 28.956-23.006 2.374-3.546 1.426-8.345-2.121-10.719-3.545-2.375-8.345-1.426-10.718 2.12-4.267 6.372-10.314 11.661-17.319 15.231-.848 4.189-1.539 8.368-1.992 12.52-.156 1.432-.266 2.874-.332 4.32.247.024.493.056.742.056z"
            )
      //replay btn
      button.icon-block__replay.btn(type="button") Replay

    //single icon
    .icon-block
      .icon.basket-icon
        svg(
          enable-background="new 0 0 512 512",
          height="512",
          viewBox="0 0 512 512",
          width="512",
          xmlns="http://www.w3.org/2000/svg"
        )
          g.basket-icon__top
            path(
              d="m362.336 328.721c-4.268 0-7.726-3.459-7.726-7.726v-166.979c0-64.681-52.623-117.303-117.304-117.303s-117.303 52.621-117.303 117.303v166.979c0 4.267-3.459 7.726-7.726 7.726-4.268 0-7.726-3.459-7.726-7.726v-166.979c0-73.202 59.554-132.756 132.756-132.756s132.757 59.554 132.757 132.756v166.979c-.002 4.267-3.46 7.726-7.728 7.726z",
              fill="#766d78"
            )
          g.basket-icon__egg-1
            path(
              d="m409.603 154.951c43 15.067 70.013 96.471 43.487 172.174-17.894 51.066-72.323 73.753-123.39 55.859s-79.432-69.591-61.538-120.658c26.526-75.703 98.441-122.442 141.441-107.375z",
              fill="#f7f3f1"
            )
            path(
              d="m409.603 154.951c-2.503-.877-5.107-1.536-7.791-2.001 32.42 19.059 48.294 93.078 23.312 164.375-17.001 48.519-61.333 73.395-102.889 62.729 2.431 1.056 4.919 2.037 7.466 2.929 51.066 17.894 105.496-4.792 123.39-55.859 26.525-75.702-.489-157.106-43.488-172.173z",
              fill="#ebe1dc"
            )
            ellipse(
              cx="383.738",
              cy="297.364",
              fill="#94d4a2",
              rx="33.994",
              ry="33.994",
              transform="matrix(.707 -.707 .707 .707 -97.874 358.44)"
            )
            path(
              d="m451.064 208.509c1.132 0 2.246.078 3.341.214 5.305 15.088 8.539 32.321 9.107 50.563-3.724 1.947-7.955 3.053-12.448 3.053-14.865 0-26.915-12.05-26.915-26.915s12.05-26.915 26.915-26.915z",
              fill="#94d4a2"
            )
            path(
              d="m451.064 262.339c4.493 0 8.725-1.107 12.448-3.053-.493-15.835-3.052-32.231-8.137-47.709-.315-.958-.97-2.854-.97-2.854-1.096-.136-2.209-.214-3.341-.214-6.143 0-11.803 2.062-16.332 5.527 2.366 13.608 3.225 28.622 2.279 44.344 4.09 2.51 8.902 3.959 14.053 3.959z",
              fill="#6dc17d"
            )
            ellipse(
              cx="370.341",
              cy="206.005",
              fill="#94d4a2",
              rx="18.307",
              ry="18.307",
              transform="matrix(.707 -.707 .707 .707 -37.197 322.208)"
            )
          g.basket-icon__egg-2
            path(
              d="m225.555 141.395c45.56-.548 98.786 66.707 99.751 146.917.651 54.107-42.737 94.041-96.844 94.692s-98.443-38.227-99.094-92.334c-.965-80.21 50.627-148.726 96.187-149.275z",
              fill="#80b6fc"
            )
            path(
              d="m225.555 141.395c-4.178.05-8.406.677-12.641 1.827 37.624 10.283 76.981 72.582 77.859 145.555.6 49.813-32.043 87.537-74.798 93.667 4.092.42 8.26.611 12.487.56 54.107-.651 97.495-40.585 96.844-94.692-.965-80.21-54.192-147.465-99.751-146.917z",
              fill="#62a4fb"
            )
            path(
              d="m151.068 201.012c3.372.276 6.685 1.249 9.619 2.94l15.769 9.104c7.015 4.055 16.18 4.055 23.195 0l15.769-9.104c7.015-4.042 16.18-4.042 23.195 0l15.769 9.104c7.015 4.055 16.18 4.055 23.195 0l15.769-9.104c2.797-1.612 5.937-2.569 9.146-2.896 10.41 18.94 18.097 41.286 21.249 65.384l-7.2-4.163c-7.015-4.042-16.18-4.042-23.195 0l-15.769 9.117c-7.015 4.042-16.18 4.042-23.195 0l-15.769-9.117c-7.015-4.042-16.18-4.042-23.195 0l-15.769 9.117c-7.015 4.042-16.18 4.042-23.195 0l-15.769-9.117c-7.015-4.042-16.18-4.042-23.195 0l-6.791 3.922c2.887-23.984 10.26-46.274 20.367-65.187z",
              fill="#f1cd88"
            )
            path(
              d="m316.542 262.278 7.2 4.163c-2.939-22.449-10.082-45.066-21.249-65.384-3.208.326-6.349 1.284-9.146 2.896 0 0-16.881 9.703-17.453 9.97 6.223 15.422 10.856 32.602 13.192 50.819l4.261-2.463c7.015-4.043 16.181-4.043 23.195-.001z",
              fill="#ebb34c"
            )
          g.basket-icon__bottom
            path(
              d="m512 315.623v12.901c0 10.549-9.191 19.101-20.529 19.101h-470.942c-11.338 0-20.529-8.552-20.529-19.101v-12.901c0-10.549 9.191-19.101 20.529-19.101h470.942c11.338 0 20.529 8.552 20.529 19.101z",
              fill="#ecb880"
            )
            path(
              d="m491.471 296.522h-38.582c11.338 0 20.529 8.552 20.529 19.101v12.901c0 10.549-9.191 19.101-20.529 19.101h38.582c11.338 0 20.529-8.552 20.529-19.101v-12.901c0-10.549-9.191-19.101-20.529-19.101z",
              fill="#e69642"
            )
            path(
              d="m467.409 347.625-30.725 95.209c-9.198 28.501-36.449 47.906-67.276 47.906h-226.816c-30.827 0-58.078-19.405-67.276-47.906l-30.725-95.209z",
              fill="#ecb880"
            )
            path(
              d="m431.763 347.625h-387.172l9.038 28.007h344.16c12.319 0 21.061 12.007 17.277 23.731l-14.029 43.472c-9.198 28.501-36.449 47.906-67.276 47.906h35.646c30.827 0 58.078-19.405 67.276-47.906l30.725-95.209h-35.645z",
              fill="#e69642"
            )
          g.ribbon(fill="#df646e")
            path(
              d="m54.863 336.296c4.415-8.497 10.576-15.965 15.366-24.257s8.235-17.962 6.432-27.366l35.991 3.73c1.804 9.405-1.642 19.074-6.432 27.366-4.789 8.292-10.95 15.76-15.366 24.257-8.665 16.675-9.881 37.012-3.477 54.655.765 2.108-.956 4.284-3.186 4.053l-29.164-3.023c-1.099-.114-2.066-.806-2.493-1.824-7.665-18.292-6.821-39.983 2.329-57.591z"
            )
            path(
              d="m169.69 336.296c-4.415-8.497-10.576-15.965-15.366-24.257s-8.235-17.962-6.432-27.366l-35.991 3.73c-1.804 9.405 1.642 19.074 6.432 27.366 4.789 8.292 10.95 15.76 15.366 24.257 8.665 16.675 9.881 37.012 3.477 54.655-.765 2.108.956 4.284 3.186 4.053l29.164-3.023c1.099-.114 2.066-.806 2.493-1.824 7.665-18.292 6.82-39.983-2.329-57.591z"
            )
            path(
              d="m41.734 283.716c2.037-2.572 2.037-6.191 0-8.763-2.393-3.021-4.572-6.19-6.125-9.705-2.442-5.529-3.152-12.138-.447-17.543 2.917-5.828 9.398-9.295 15.886-9.913s12.979 1.245 18.955 3.846c16.56 7.207 30.409 20.419 38.47 36.574v2.244c-8.062 16.155-21.91 29.367-38.47 36.574-5.976 2.601-12.467 4.463-18.955 3.846s-12.969-4.085-15.886-9.913c-2.705-5.405-1.995-12.014.447-17.543 1.552-3.515 3.732-6.684 6.125-9.704z",
              fill="#dc4955"
            )
            path(
              d="m182.819 283.716c-2.037-2.572-2.037-6.191 0-8.763 2.393-3.021 4.572-6.19 6.125-9.705 2.442-5.529 3.152-12.138.447-17.543-2.917-5.828-9.398-9.295-15.886-9.913s-12.979 1.245-18.955 3.846c-16.56 7.207-30.409 20.419-38.47 36.574v2.244c8.062 16.155 21.91 29.367 38.47 36.574 5.976 2.601 12.467 4.463 18.955 3.846s12.969-4.085 15.886-9.913c2.705-5.405 1.995-12.014-.447-17.543-1.553-3.515-3.732-6.684-6.125-9.704z",
              fill="#dc4955"
            )
            path(
              d="m112.276 250.908c12.461 0 22.563 10.102 22.563 22.563v11.726c0 12.461-10.102 22.563-22.563 22.563s-22.563-10.102-22.563-22.563v-11.726c0-12.461 10.102-22.563 22.563-22.563z",
              fill="#df646e"
            )
      //replay btn
      button.icon-block__replay.btn(type="button") Replay

    //single icon
    .icon-block
      .icon.painting-icon
        svg(
          enable-background="new 0 0 512 512",
          height="512",
          viewBox="0 0 512 512",
          width="512",
          xmlns="http://www.w3.org/2000/svg"
        )
          g.painting-icon__egg
            path(
              d="m174.233 41.593c82.515-.993 178.916 120.817 180.664 266.089 1.179 97.995-77.403 170.322-175.398 171.501-97.996 1.18-178.296-69.235-179.475-167.23-1.748-145.273 91.693-269.367 174.209-270.36z",
              fill="#f1cd88"
            )
            path(
              d="m174.233 41.593c-7.254.087-14.592 1.145-21.942 3.066 76.061 19.681 154.906 131.769 156.485 263.023 1.095 90.996-66.589 159.847-154.724 170.164 8.318.978 16.811 1.441 25.446 1.337 97.995-1.179 176.577-73.506 175.398-171.501-1.747-145.272-98.148-267.082-180.663-266.089z",
              fill="#ebb34c"
            )
            g.painting-icon__egg-top.egg-top
              path.egg-top__main(
                d="m174.233 41.593c-51.847.624-108 49.855-142.151 122.395h21.135c23.712 0 42.934 19.222 42.934 42.934v112.7c0 16.066 13.024 29.091 29.091 29.091s29.091-13.024 29.091-29.091v-111.88c0-13.136 10.649-23.785 23.785-23.785s23.785 10.649 23.785 23.785v19.501c0 10.004 8.11 18.114 18.114 18.114s18.114-8.11 18.114-18.114v-24.116c0-31.227 25.315-56.542 56.542-56.542h17.192c-36.051-63.885-89.226-105.574-137.632-104.992z",
                fill="#80b6fc"
              )
              path.egg-top__shadow(
                d="m269.115 152.695c7.678-3.899 16.357-6.111 25.557-6.111h17.192c-9.042-16.022-19.656-31.524-31.786-45.649-.141-.164-.283-.328-.424-.491-21.474-24.876-49.943-47.782-81.52-55.86-.21-.054-.42-.11-.63-.163-15.88-3.956-30.328-3.651-45.214.238 42.821 11.08 86.523 51.449 116.825 108.036z",
                fill="#62a4fb"
              )
          g.painting-icon__basket
            path(
              d="m416.187 479.198h-137.091c-11.242 0-20.355-9.113-20.355-20.355v-111.1h177.801v111.1c0 11.242-9.113 20.355-20.355 20.355z",
              fill="#766d78"
            )
            path(
              d="m405.767 347.743v111.1c0 11.242-9.113 20.355-20.355 20.355h30.775c11.242 0 20.355-9.113 20.355-20.355v-111.1z",
              fill="#655e67"
            )
            path(
              d="m238.131 314.955v40.948c0 5.394 4.373 9.767 9.767 9.767h199.488c5.394 0 9.767-4.373 9.767-9.767v-40.948c0-5.394-4.373-9.767-9.767-9.767h-199.488c-5.394 0-9.767 4.373-9.767 9.767z",
              fill="#f7f3f1"
            )
            path(
              d="m447.386 305.188h-30.776c5.394 0 9.767 4.373 9.767 9.767v40.948c0 5.394-4.373 9.767-9.767 9.767h30.775c5.394 0 9.767-4.373 9.767-9.767v-40.948c.001-5.394-4.372-9.767-9.766-9.767z",
              fill="#ebe1dc"
            )
            ellipse(
              cx="347.642",
              cy="419.499",
              fill="#80b6fc",
              rx="39.651",
              ry="24.365"
            )
          g.painting-icon__brush
            path(
              d="m378.767 166.038c-20.7-20.702-54.483-20.672-75.149.065-8.107 8.135-13.015 18.246-14.755 28.778 0 0-5.274 29.198-20.47 44.545-4.268 4.31-3.721 11.409 1.321 14.781 32.361 21.645 81.521 14.441 109.052-13.09 20.732-20.733 20.733-54.346.001-75.079z",
              fill="#766d78"
            )
            path(
              d="m378.767 166.038c-1.585-1.585-3.255-3.034-4.981-4.376 5.761 18.278 1.412 39.054-13.077 53.543-22.6 22.6-59.767 31.486-90.26 21.977-.666.772-1.347 1.527-2.056 2.243-4.268 4.31-3.721 11.409 1.321 14.781 32.361 21.645 81.521 14.441 109.052-13.09 20.732-20.731 20.733-54.345.001-75.078z",
              fill="#655e67"
            )
            path(
              d="m351.356 193.446c-14.285-14.285-13.235-37.749 2.269-50.701l126.132-105.374c7.805-6.521 19.297-6.007 26.489 1.185s7.706 18.683 1.185 26.489l-105.374 126.132c-12.952 15.504-36.415 16.554-50.701 2.269z",
              fill="#94d4a2"
            )
            path(
              d="m506.245 38.557c-2.857-2.857-6.394-4.641-10.107-5.369.247 4.778-1.705 10.224-5.734 14.831l-108.011 123.493c-10.756 12.298-26.327 17.188-37.517 12.938 1.613 3.239 3.769 6.283 6.481 8.995 14.285 14.285 37.749 13.235 50.701-2.269l105.373-126.131c6.52-7.805 6.006-19.297-1.186-26.488z",
              fill="#6dc17d"
            )

      //replay btn
      button.icon-block__replay.btn(type="button") Replay

    //single icon
    .icon-block
      .icon.hatch-icon
        svg(
          enable-background="new 0 0 512 512",
          height="512",
          viewBox="0 0 512 512",
          width="512",
          xmlns="http://www.w3.org/2000/svg"
        )
          g.hatch-icon__rabbit
            g.hatch-icon__rabbit-head
              path(
                d="m410.918.379c-23.083 2.906-42.641 18.623-57.571 36.466-23.673 28.292-38.952 63.521-43.431 100.138l32.746 25.33c.465-21.045 17.442-38.245 35.839-48.476 18.396-10.231 39.17-15.917 56.855-27.333 17.686-11.415 32.513-31.359 28.852-52.088-4.045-22.91-30.207-36.943-53.29-34.037z",
                fill="#c5bec6"
              )
              path(
                d="m437.547 42.091c-6.672-4.224-15.151-4.919-22.863-3.223s-14.77 5.588-21.313 10.009c-33.68 22.759-56.022 61.509-58.844 102.059l9.019 3.858c3.747-17.615 18.802-31.974 34.956-40.957 18.396-10.231 39.17-15.917 56.855-27.333 4.914-3.172 9.604-7.003 13.742-11.325 2.436-12.465-.999-26.405-11.552-33.088z",
                fill="#e6989e"
              )
              path(
                d="m101.082.379c23.083 2.906 42.641 18.623 57.571 36.466 23.673 28.292 38.952 63.521 43.431 100.138l-32.746 25.33c-.465-21.045-17.442-38.245-35.839-48.476-18.396-10.231-39.17-15.917-56.855-27.333s-32.513-31.359-28.852-52.088c4.045-22.91 30.207-36.943 53.29-34.037z",
                fill="#c5bec6"
              )
              path(
                d="m101.082.379c23.083 2.906 42.641 18.623 57.571 36.466 23.673 28.292 38.952 63.521 43.431 100.138l-32.746 25.33c-.465-21.045-17.442-38.245-35.839-48.476-18.396-10.231-39.17-15.917-56.855-27.333s-32.513-31.359-28.852-52.088c4.045-22.91 30.207-36.943 53.29-34.037z",
                fill="#c5bec6"
              )
              path(
                d="m202.084 136.983c-2.455-20.071-8.162-39.721-16.71-58.044-.574 1.71-1.217 3.397-1.95 5.049-2.93 6.605-7.463 12.724-13.762 16.266-7.258 4.08-16.114 4.345-24.311 2.883-8.197-1.461-16.013-4.51-24.032-6.748-11.507-3.213-23.479-4.71-35.424-4.526 15.423 8.109 32.331 13.48 47.605 21.975 18.396 10.231 35.374 27.431 35.839 48.476z",
                fill="#b5adb7"
              )
              path(
                d="m74.453 42.091c6.672-4.224 15.151-4.919 22.863-3.223s14.77 5.588 21.313 10.009c33.68 22.759 56.022 61.509 58.844 102.059l-9.019 3.858c-3.747-17.615-18.802-31.973-34.956-40.957-18.396-10.231-39.17-15.917-56.855-27.333-4.914-3.172-9.604-7.003-13.742-11.325-2.436-12.465.999-26.405 11.552-33.088z",
                fill="#e6989e"
              )
              path(
                d="m164.481 102.462c-6.077 1.893-12.799 1.803-19.13.675-8.197-1.461-16.013-4.51-24.032-6.748-11.507-3.213-23.479-4.71-35.424-4.526.946.497 2.922 1.496 2.957 1.513 9.898 4.94 20.313 8.93 30.451 13.462.053.024.105.048.158.071 4.662 2.087 9.603 4.461 14.03 6.923 8.472 4.711 16.814 11.032 23.239 18.495.018.021.036.041.054.062 5.523 6.431 9.892 14.048 11.671 22.405l9.019-3.858c-1.17-16.805-5.701-33.297-12.993-48.474z",
                fill="#e27f86"
              )
              path(
                d="m258.216 81.911c-70.18-.055-131.652 92.495-131.584 163.876.06 62.788 56.523 98.387 127.971 99.196s130.824-33.477 130.764-96.265c-.07-74.109-56.971-166.752-127.151-166.807z",
                fill="#c5bec6"
              )
              path(
                d="m258.216 81.911c-5.59-.004-11.123.584-16.576 1.697 60.54 13.017 107.275 96.853 107.313 165.027.032 57.21-47.851 90.769-108.844 95.686 4.753.381 9.587.607 14.494.663 71.448.809 130.824-33.477 130.764-96.265-.07-74.11-56.971-166.753-127.151-166.808z",
                fill="#b5adb7"
              )
              g(fill="#766d78")
                path(
                  d="m206.238 175.732c-4.267 0-7.726-3.459-7.726-7.726v-3.407c0-4.267 3.459-7.726 7.726-7.726s7.726 3.459 7.726 7.726v3.407c0 4.267-3.459 7.726-7.726 7.726z"
                )
                path(
                  d="m305.762 175.732c-4.267 0-7.726-3.459-7.726-7.726v-3.407c0-4.267 3.459-7.726 7.726-7.726s7.726 3.459 7.726 7.726v3.407c0 4.267-3.459 7.726-7.726 7.726z"
                )
              path(
                d="m256 170.843c-9.553 0-17.298 2.661-17.298 10.138 0 7.478 7.744 18.074 17.298 18.074s17.298-10.597 17.298-18.074-7.745-10.138-17.298-10.138z",
                fill="#e6989e"
              )
              path(
                d="m242.02 237.606c-1.105 0-2.217-.08-3.305-.238-10.987-1.599-19.317-11.201-19.377-22.335-.023-4.267 3.418-7.745 7.685-7.768h.043c4.247 0 7.702 3.432 7.725 7.685.019 3.556 2.662 6.62 6.148 7.127.367.053.765.078 1.128.077 1.963-.01 3.793-.79 5.157-2.195 2.26-2.323 5.423-3.663 8.682-3.681h.064c3.237 0 6.387 1.304 8.652 3.583 1.383 1.395 3.194 2.18 5.182 2.144.382-.002.764-.032 1.131-.09 3.48-.545 6.091-3.636 6.072-7.192-.023-4.267 3.418-7.744 7.686-7.767h.042c4.248 0 7.703 3.432 7.725 7.685.059 11.135-8.168 20.825-19.136 22.541-1.125.176-2.28.269-3.433.276-5.113-.021-9.929-1.607-13.895-4.65-3.933 3.085-8.749 4.771-13.843 4.798-.044 0-.088 0-.133 0z",
                fill="#8c818f"
              )
            g.hatch-icon__rabbit-paws
              g(fill="#c5bec6")
                path(
                  d="m400.359 277.053c-18.743 0-33.937 7.539-33.937 21.922s15.194 26.042 33.937 26.042 33.937-11.659 33.937-26.042c-.001-14.383-15.195-21.922-33.937-21.922z"
                )
                path(
                  d="m111.641 277.053c-18.743 0-33.937 7.539-33.937 21.922s15.194 26.042 33.937 26.042 33.937-11.659 33.937-26.042-15.194-21.922-33.937-21.922z"
                )
          g.hatch-icon__egg
            path(
              d="m431.451 343.415c-1.192 98.767-81.078 169.747-178.546 168.57-97.469-1.177-175.618-74.06-174.426-172.826.138-11.248.827-22.167 2.023-32.742.762-6.735 8.967-9.59 13.694-4.733l13.004 13.358c4.83 4.965 12.814 4.965 17.643 0l29.053-29.868c4.845-4.966 12.814-4.966 17.643 0l29.069 29.868c4.83 4.965 12.814 4.965 17.643 0l29.053-29.868c4.832-4.968 12.811-4.968 17.643 0l29.053 29.868c4.845 4.965 12.814 4.965 17.643 0l29.053-29.868c4.845-4.966 12.814-4.966 17.643 0l29.053 29.868c4.83 4.965 12.814 4.965 17.643 0l11.261-11.573c4.762-4.894 13.063-1.962 13.711 4.835 1.084 11.331 1.585 23.041 1.444 35.111z",
              fill="#f7f3f1"
            )
            path(
              d="m430.011 308.304c-.648-6.797-8.949-9.729-13.711-4.835l-11.261 11.573c-3.79 3.896-9.517 4.721-14.143 2.502.538 8.428.776 17.051.677 25.872-1.072 92.129-68.124 160.07-153.358 167.833 4.842.424 9.739.678 14.689.738 97.469 1.177 177.354-69.804 178.546-168.57.142-12.072-.359-23.782-1.439-35.113z",
              fill="#ebe1dc"
            )

      //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;
}

// COMMON STYLES !!!YOU DON'T NEED THEM

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

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

body {
  padding-top: 50px;

  font: {
    family: "Poppins", 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;

  font: {
    family: inherit;
    size: inherit;
  }

  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: 0 auto 50px;

  text-align: center;
}

.header__title {
  font: {
    size: 2.1rem;
    weight: 600;
  }
}

.header__subtitle {
  margin-bottom: 30px;

  font: {
    weight: 600;
  }
  text-align: center;
}

//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;
  margin-top: 50px;
}

.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

              
                let PATH = {
  giftIcon: {
    icon: ".gift-icon",
    gift: ".gift-icon__gift",
    egg: ".gift-icon__egg"
  },
  chickIcon: ".chick-icon",
  basketIcon: {
    icon: ".basket-icon",
    egg1: ".basket-icon__egg-1",
    egg2: ".basket-icon__egg-2"
  },
  paintingIcon: {
    icon: ".painting-icon",
    allComponents: ".painting-icon svg > g",
    brush: ".painting-icon__brush",
    eggTop: ".painting-icon__egg-top",
    eggTopParts: ".painting-icon__egg-top path",
    eggTopColored: ".painting-icon__egg-top .egg-top__main"
  },
  hatchIcon: {
    icon: ".hatch-icon",
    rabbit: ".hatch-icon__rabbit",
    rabbitPaws: ".hatch-icon__rabbit-paws",
    rabbitHead: ".hatch-icon__rabbit-head",
    egg: ".hatch-icon__egg"
  }
};

//*** HELPER ANIMATION
const _revealVert = (bottomY, easing, delay) => ({
  translateY: [bottomY, 0],
  opacity: [0, 1],
  easing: easing,
  delay: anime.stagger(delay)
});

const _shiver = () => ({
  keyframes: [
    { rotate: -10 },
    { rotate: 10 },
    { rotate: 0 },
    { rotate: 0 },
    { rotate: 0 },
    { rotate: 0 },
    { rotate: 0 },
    { rotate: 0 },
    { rotate: 0 },
    { rotate: 0 }
  ],
  loop: true,
  easing: "linear",
  duration: 1200
});

const _hideElem = (elemPath) => {
  const elem = document.querySelector(elemPath);
  elem.style.opacity = 0;
};

const _showElem = (elemPath) => {
  const elem = document.querySelector(elemPath);
  elem.style.opacity = 1;
};

//*** ICONS ANIMATIONS

//gift icon animation
let giftEggAnimation;

const giftIconAnimation = anime({
  targets: [`${PATH.giftIcon.gift}`, `${PATH.giftIcon.egg}`],
  ..._revealVert(150, "easeOutElastic", 100),

  complete: function () {
    const egg = document.querySelector(PATH.giftIcon.egg);
    egg.style.transformOrigin = "75% bottom";

    giftEggAnimation = anime({
      targets: `${PATH.giftIcon.egg}`,
      ..._shiver()
    });
  }
});

//chick icon animation
let chickJumpAnimation;

const jumpKeyframes = {
  scaleY: [
    { value: 0.9, duration: 170 },
    { value: 1, duration: 170, delay: 120 }
  ],
  translateY: [
    { value: -20, duration: 170, delay: 170 },
    { value: 0, duration: 170, delay: 220 }
  ]
};

const chickIconAnimation = anime({
  targets: `${PATH.chickIcon}`,
  ..._revealVert(25, "easeOutElastic", 100),

  complete: function () {
    const chick = document.querySelector(PATH.chickIcon);
    chick.style.transformOrigin = "center bottom";

    chickJumpAnimation = anime({
      targets: `${PATH.chickIcon}`,
      ...jumpKeyframes,
      loop: true,
      easing: "linear"
    });
  }
});

//basket icon animation
let eggsRevealAnimation;

const basketIconAnimation = anime({
  targets: `${PATH.basketIcon.icon}`,
  ..._revealVert(25, "easeOutElastic", 100),

  complete: function () {
    eggsRevealAnimation = anime({
      targets: [`${PATH.basketIcon.egg1}`, `${PATH.basketIcon.egg2}`],
      ..._revealVert(50, "easeOutElastic", 150),
      loop: true
    });
  }
});

//painting icon animation
let paintingAnimation;
let paintedPartAnimation;

_hideElem(PATH.paintingIcon.eggTop);

const brushKeyframes = {
  translateX: [
    { value: -150, duration: 150 },
    { value: -180, duration: 150, delay: 100 },
    { value: 0, duration: 150, delay: 100 },
    { value: 0, duration: 150, delay: 1850 }
  ],
  translateY: [
    { value: -160, duration: 150 },
    { value: 0, duration: 150, delay: 100 },
    { value: 0, duration: 150, delay: 1800 }
  ]
};

const paintKeyframes = {
  opacity: [
    { value: 1, duration: 200, delay: 200 },
    { value: 0, duration: 200, delay: 900 },
    { value: 0, duration: 150, delay: 1000 }
  ]
};

const paintingIconAnimation = anime({
  targets: `${PATH.paintingIcon.allComponents}`,
  ..._revealVert(150, "easeOutElastic", 100),

  complete: function () {
    paintingAnimation = anime({
      targets: `${PATH.paintingIcon.brush}`,
      ...brushKeyframes,
      easing: "linear",
      loop: true
    });

    paintedPartAnimation = anime({
      targets: `${PATH.paintingIcon.eggTop}`,
      ...paintKeyframes,
      easing: "linear",
      loop: true
    });
  }
});

//hatch icon animation
let jumpRabbitAnimation;

_hideElem(PATH.hatchIcon.rabbit);

const jumpRabbitKeyframes = {
  translateY: [
    { value: 50, duration: 50, delay: 100 },
    { value: -90, duration: 150, delay: 100 },
    { value: 0, duration: 100, delay: 100 },
    { value: 0, duration: 100, delay: 1200 }
  ]
};

const hatchIconAnimation = anime({
  targets: `${PATH.hatchIcon.icon}`,
  ..._revealVert(25, "easeOutElastic", 100),

  complete: function () {
    _showElem(PATH.hatchIcon.rabbit);

    jumpRabbitAnimation = anime({
      targets: `${PATH.hatchIcon.rabbit}`,
      ...jumpRabbitKeyframes,
      easing: "linear",
      loop: true
    });
  }
});

//*** REPLAYS INIT

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

  cbPauseArr.forEach((elem) => {
    elem.pause();
  });
  cbRestart.restart();
};

//gift icon replay init
const giftReplay = document.querySelector(PATH.giftIcon.icon)
  .nextElementSibling;

giftReplay.addEventListener("click", function () {
  replay(
    {
      initTargets: [`${PATH.giftIcon.gift}`, `${PATH.giftIcon.egg}`],
      initValues: { opacity: 0 }
    },
    [giftEggAnimation],
    giftIconAnimation
  );
});

//chick icon replay init
const chickReplay = document.querySelector(PATH.chickIcon).nextElementSibling;

chickReplay.addEventListener("click", function () {
  replay(
    {
      initTargets: `${PATH.chickIcon}`,
      initValues: { opacity: 0 }
    },
    [chickJumpAnimation],
    chickIconAnimation
  );
});

//basket icon replay init
const basketReplay = document.querySelector(PATH.basketIcon.icon)
  .nextElementSibling;

basketReplay.addEventListener("click", function () {
  replay(
    {
      initTargets: `${PATH.basketIcon.icon}`,
      initValues: { opacity: 0 }
    },
    [eggsRevealAnimation],
    basketIconAnimation
  );
});

//painting icon replay init
const paintingReplay = document.querySelector(PATH.paintingIcon.icon)
  .nextElementSibling;

paintingReplay.addEventListener("click", function () {
  _hideElem(PATH.paintingIcon.eggTop);
  replay(
    {
      initTargets: `${PATH.paintingIcon.eggTop}`,
      initValues: { opacity: 0 }
    },
    [paintingAnimation, paintedPartAnimation],
    paintingIconAnimation
  );
});

//painting icon replay init
const hatchReplay = document.querySelector(PATH.hatchIcon.icon)
  .nextElementSibling;

hatchReplay.addEventListener("click", function () {
  _hideElem(PATH.hatchIcon.rabbit);
  replay(
    {
      initTargets: `${PATH.hatchIcon.icon}`,
      initValues: { opacity: 0 }
    },
    [jumpRabbitAnimation],
    hatchIconAnimation
  );
});

              
            
!
999px

Console