//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
//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;
}
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
);
});
External CSS
This Pen doesn't use any external CSS resources.