Svg-анимация. Геометрические построения

Покажем на примере, как можно реализовать анимацию средствами svg-графики с использованием стилей css. Пример смотрите ниже.

Для реализации пример понадобится файл стилей:

*, *:before, *:after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

svg {

 display: block;
 margin: 1em auto;
}

.heart-loader {

 width: 180px;
 height: 180px;
 overflow: visible;
}
.heart-loader__group {
 -webkit-transform-origin: 0 90px;
 transform-origin: 0 90px;
 -webkit-animation: group-anim 7s 1s infinite;
 animation: group-anim 7s 1s infinite;
}
.heart-loader__square {
 stroke: #B8B8B8;
 stroke-dasharray: 240, 240;
 stroke-dashoffset: 240;
 -webkit-animation: square-anim 7s 1s infinite;
 animation: square-anim 7s 1s infinite;
}
.heart-loader__circle {
 stroke: #B8B8B8;
 stroke-dasharray: 188.522, 188.522;
 stroke-dashoffset: 188.522;
 -webkit-transform-origin: 60px 30px;
 transform-origin: 60px 30px;
}
.heart-loader__circle.m--left {
 -webkit-animation: left-circle-anim 7s 1s infinite;
 animation: left-circle-anim 7s 1s infinite;
}
.heart-loader__circle.m--right {
 -webkit-animation: right-circle-anim 7s 1s infinite;
 animation: right-circle-anim 7s 1s infinite;
}
.heart-loader__heartPath {
 stroke: #E21737;
 fill: transparent;
 stroke-dasharray: 308.522, 308.522;
 stroke-dashoffset: 308.522;
 -webkit-animation: heart-anim 7s 1s infinite;
 animation: heart-anim 7s 1s infinite;
}

@-webkit-keyframes square-anim {
 12% {
 stroke-dashoffset: 0;
 }
 43% {
 stroke-dashoffset: 0;
 opacity: 1;
 }
 85% {
 stroke-dashoffset: 0;
 opacity: 0;
 }
 100% {
 stroke-dashoffset: 0;
 opacity: 0;
 }
}

@keyframes square-anim {
 12% {
 stroke-dashoffset: 0;
 }
 43% {
 stroke-dashoffset: 0;
 opacity: 1;
 }
 85% {
 stroke-dashoffset: 0;
 opacity: 0;
 }
 100% {
 stroke-dashoffset: 0;
 opacity: 0;
 }
}
@-webkit-keyframes left-circle-anim {
 12% {
 stroke-dashoffset: 188.522;
 }
 31% {
 stroke-dashoffset: 0;
 -webkit-transform: translateY(0);
 transform: translateY(0);
 }
 41% {
 stroke-dashoffset: 0;
 -webkit-transform: translateY(-30px);
 transform: translateY(-30px);
 }
 43% {
 stroke-dashoffset: 0;
 -webkit-transform: translateY(-30px);
 transform: translateY(-30px);
 opacity: 1;
 }
 85% {
 stroke-dashoffset: 0;
 -webkit-transform: translateY(-30px);
 transform: translateY(-30px);
 opacity: 0;
 }
 100% {
 stroke-dashoffset: 0;
 -webkit-transform: translateY(-30px);
 transform: translateY(-30px);
 opacity: 0;
 }
}
@keyframes left-circle-anim {
 12% {
 stroke-dashoffset: 188.522;
 }
 31% {
 stroke-dashoffset: 0;
 -webkit-transform: translateY(0);
 transform: translateY(0);
 }
 41% {
 stroke-dashoffset: 0;
 -webkit-transform: translateY(-30px);
 transform: translateY(-30px);
 }
 43% {
 stroke-dashoffset: 0;
 -webkit-transform: translateY(-30px);
 transform: translateY(-30px);
 opacity: 1;
 }
 85% {
 stroke-dashoffset: 0;
 -webkit-transform: translateY(-30px);
 transform: translateY(-30px);
 opacity: 0;
 }
 100% {
 stroke-dashoffset: 0;
 -webkit-transform: translateY(-30px);
 transform: translateY(-30px);
 opacity: 0;
 }
}
@-webkit-keyframes right-circle-anim {
 12% {
 stroke-dashoffset: 188.522;
 }
 31% {
 stroke-dashoffset: 0;
 -webkit-transform: translateX(0);
 transform: translateX(0);
 }
 41% {
 stroke-dashoffset: 0;
 -webkit-transform: translateX(30px);
 transform: translateX(30px);
 }
 43% {
 stroke-dashoffset: 0;
 -webkit-transform: translateX(30px);
 transform: translateX(30px);
 opacity: 1;
 }
 85% {
 stroke-dashoffset: 0;
 -webkit-transform: translateX(30px);
 transform: translateX(30px);
 opacity: 0;
 }
 100% {
 stroke-dashoffset: 0;
 -webkit-transform: translateX(30px);
 transform: translateX(30px);
 opacity: 0;
 }
}
@keyframes right-circle-anim {
 12% {
 stroke-dashoffset: 188.522;
 }
 31% {
 stroke-dashoffset: 0;
 -webkit-transform: translateX(0);
 transform: translateX(0);
 }
 41% {
 stroke-dashoffset: 0;
 -webkit-transform: translateX(30px);
 transform: translateX(30px);
 }
 43% {
 stroke-dashoffset: 0;
 -webkit-transform: translateX(30px);
 transform: translateX(30px);
 opacity: 1;
 }
 85% {
 stroke-dashoffset: 0;
 -webkit-transform: translateX(30px);
 transform: translateX(30px);
 opacity: 0;
 }
 100% {
 stroke-dashoffset: 0;
 -webkit-transform: translateX(30px);
 transform: translateX(30px);
 opacity: 0;
 }
}
@-webkit-keyframes group-anim {
 43% {
 -webkit-transform: rotate(0);
 transform: rotate(0);
 }
 54% {
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 }
 90% {
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 opacity: 1;
 }
 97% {
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 opacity: 0;
 }
 100% {
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 opacity: 0;
 }
}
@keyframes group-anim {
 43% {
 -webkit-transform: rotate(0);
 transform: rotate(0);
 }
 54% {
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 }
 90% {
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 opacity: 1;
 }
 97% {
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 opacity: 0;
 }
 100% {
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 opacity: 0;
 }
}
@-webkit-keyframes heart-anim {
 55% {
 stroke-dashoffset: 308.522;
 fill: transparent;
 }
 70% {
 stroke-dashoffset: 0;
 fill: transparent;
 }
 87% {
 stroke-dashoffset: 0;
 fill: #E21737;
 }
 100% {
 stroke-dashoffset: 0;
 fill: #E21737;
 }
}
@keyframes heart-anim {
 55% {
 stroke-dashoffset: 308.522;
 fill: transparent;
 }
 70% {
 stroke-dashoffset: 0;
 fill: transparent;
 }
 87% {
 stroke-dashoffset: 0;
 fill: #E21737;
 }
 100% {
 stroke-dashoffset: 0;
 fill: #E21737;
 }
}
.other {
 position: absolute;
 left: 0;
 bottom: 0.5rem;
 width: 100%;
 text-align: right;
}
.other__link {
 font-size: 1.3rem;
 margin: 0 1rem;
}

И собственно сам svg-код:

---

---