SVG Icons Animation with Html & CSS | SVG Animation - SOFTCODE

SVG Icons Animation with Html & CSS | SVG Animation

Sep 21, 2020
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
	<title>SVG Icons Animation with Html & CSS | SVG Animation</title>
	<style>
body {
    background: #e3edf7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    background-color: #06181f;
}
.icons {
    width: 800px;
    display: flex;
    justify-content: space-between;
}
.icons .icon svg{
    width: 200px;
    height: auto;
    cursor: pointer;
}
.icons .icon svg{
    fill: transparent;
    /*stroke-width: 10;*/
    stroke-width: 18;
    stroke: #31e8ff;
}
.icon.heart path {
    stroke-dasharray: 1560;
    stroke-dashoffset: 0;
}
.icon.star path {
    stroke-dasharray: 1860;
    stroke-dashoffset: 0;
}
.icon.moon path {
    stroke-dasharray: 1860;
    stroke-dashoffset: 0;
}
.icon.heart:hover path {
    animation: animate-heart 2.5s forwards;
}
.icon.moon:hover path {
    animation: animate-moon-star 2.5s forwards;
}
.icon.star:hover path {
    animation: animate-moon-star  2.5s forwards;
}
@keyframes animate-moon-star  {
    0% {
        stroke-dashoffset: 0;
    }
    40% {
        stroke-dashoffset: 1850;
    }
    80% {
        stroke-dashoffset: 3720;
        fill: transparent
    }
    100% {
        stroke-dashoffset: 3720;
        fill: #31e8ff;
    }
}
@keyframes animate-heart  {
    0% {
        stroke-dashoffset: 0;
    }
    40% {
        stroke-dashoffset: 1560;
    }
    80% {
        stroke-dashoffset: 3120;
        fill: transparent
    }
    100% {
        stroke-dashoffset: 3120;
        fill:  #31e8ff;
    }
}
	</style>
</head>
<body>
	<div class="icons">
        <div class="icon heart">
            <svg viewBox="-5 -28 521.00002 512" xmlns="http://www.w3.org/2000/svg"><path d="m471.382812 44.578125c-26.503906-28.746094-62.871093-44.578125-102.410156-44.578125-29.554687 0-56.621094 9.34375-80.449218 27.769531-12.023438 9.300781-22.917969 20.679688-32.523438 33.960938-9.601562-13.277344-20.5-24.660157-32.527344-33.960938-23.824218-18.425781-50.890625-27.769531-80.445312-27.769531-39.539063 0-75.910156 15.832031-102.414063 44.578125-26.1875 28.410156-40.613281 67.222656-40.613281 109.292969 0 43.300781 16.136719 82.9375 50.78125 124.742187 30.992188 37.394531 75.535156 75.355469 127.117188 119.3125 17.613281 15.011719 37.578124 32.027344 58.308593 50.152344 5.476563 4.796875 12.503907 7.4375 19.792969 7.4375 7.285156 0 14.316406-2.640625 19.785156-7.429687 20.730469-18.128907 40.707032-35.152344 58.328125-50.171876 51.574219-43.949218 96.117188-81.90625 127.109375-119.304687 34.644532-41.800781 50.777344-81.4375 50.777344-124.742187 0-42.066407-14.425781-80.878907-40.617188-109.289063zm0 0"/></svg>
        </div>
        <div class="icon moon">
            <svg height="448pt" viewBox="-5 -28 521.00002 512" width="448pt" xmlns="http://www.w3.org/2000/svg"><path d="m224.023438 448.03125c85.714843.902344 164.011718-48.488281 200.117187-126.230469-22.722656 9.914063-47.332031 14.769531-72.117187 14.230469-97.15625-.109375-175.890626-78.84375-176-176 .972656-65.71875 37.234374-125.832031 94.910156-157.351562-15.554688-1.980469-31.230469-2.867188-46.910156-2.648438-123.714844 0-224.0000005 100.289062-224.0000005 224 0 123.714844 100.2851565 224 224.0000005 224zm0 0"/></svg>
        </div>
        <div class="icon star">
            <svg height="511pt" viewBox="-5 -13 521.00002 512" width="511pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.652344 185.882812c-3.371094-10.367187-12.566406-17.707031-23.402344-18.6875l-147.796875-13.417968-58.410156-136.75c-4.3125-10.046875-14.125-16.53125-25.046875-16.53125s-20.738282 6.484375-25.023438 16.53125l-58.410156 136.75-147.820312 13.417968c-10.835938 1-20.011719 8.339844-23.402344 18.6875-3.371094 10.367188-.257813 21.738282 7.9375 28.925782l111.722656 97.964844-32.941406 145.085937c-2.410156 10.667969 1.730468 21.699219 10.582031 28.097656 4.757813 3.457031 10.347656 5.183594 15.957031 5.183594 4.820313 0 9.644532-1.28125 13.953125-3.859375l127.445313-76.203125 127.421875 76.203125c9.347656 5.585938 21.101562 5.074219 29.933593-1.324219 8.851563-6.398437 12.992188-17.429687 10.582032-28.097656l-32.941406-145.085937 111.722656-97.964844c8.191406-7.1875 11.308594-18.535156 7.9375-28.925782zm-252.203125 223.722657"/></svg>
        </div>
    </div>
</body>
</html>