Animated Heart SVG
Updated on
Last site update: 8 May 2024
Here’s something to motivate improving SVG skills. A cool heart with some very simple coding from Viewbox.club:
1<svg viewBox="0 0 100 100">
2 <style>
3 .animated-heart {
4 fill: none;
5 stroke: red;
6 stroke-width: 2px;
7 stroke-linecap: round;
8 stroke-dasharray: 1px;
9 stroke-dashoffset: 1px;
10 animation: drawHeart 3s ease-out infinite;
11 }
12 @keyframes drawHeart {
13 90%, 100% {
14 stroke-dashoffset: 0px;
15 }
16 }
17 </style>
18 <path class="animated-heart" pathLength="1" d="M49.998,90.544c0,0,0,0,0.002,0c5.304-14.531,32.88-27.047,41.474-44.23C108.081,13.092,61.244-5.023,50,23.933 C38.753-5.023-8.083,13.092,8.525,46.313C17.116,63.497,44.691,76.013,49.998,90.544z" />
19</svg>
To shrink the SVG I wrapped it in a <div> and gave it a width value.