<html>
<head>
<title>Beating Heart SVG Animated with CSS / Sass</title>
</head>
<body>
<div id="smiley-love">
<a href="">
<svg id="smiley" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<g fill="none" fill-rule="evenodd">
<path id="smiley-face-heart" fill="#F9ACD9" fill-rule="nonzero" d="M49.9115693,99.9632801 C35.3538848,96.941922 23.7668058,89.787413 15.1503322,78.4997533 C2.17332423,61.4997533 -0.821369922,45.9997533 0.176861464,30.4826723 C1.39369544,11.5675074 12.1556381,-0.562991962 26.8037924,0.0201312421 C36.2274428,0.395274016 43.959512,6.65339259 50,18.794487 C56.040488,6.65339259 63.7725572,0.395274016 73.1962076,0.0201312421 C87.8443619,-0.562991962 98.6063046,11.5675074 99.8231385,30.4826723 C100.82137,45.9997533 97.8266758,61.4997533 84.8496678,78.4997533 C76.2331942,89.787413 64.6461152,96.9419219 50.0884307,99.9632801 L50.0884307,99.9997533 C50.0589417,99.9937107 50.0294648,99.9876513 50,99.9815749 C49.9705352,99.9876513 49.9410583,99.9937107 49.9115693,99.9997533 L49.9115693,99.9632801 Z"/>
<circle id="smiley-eye-left" cx="29.5" cy="48.5" r="5.5" fill="#3F4850" fill-rule="nonzero"/>
<circle id="smiley-eye-right" cx="70.5" cy="48.5" r="5.5" fill="#3F4850" fill-rule="nonzero"/>
<circle id="smiley-blush" cx="22" cy="64" r="8" fill="#FFF" fill-opacity=".5" fill-rule="nonzero"/>
<circle id="smiley-blush" cx="78" cy="64" r="8" fill="#FFF" fill-opacity=".5" fill-rule="nonzero"/>
<path id="smiley-mouth" stroke="#3F4850" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M67,73 C64.9421331,79.342374 58.1105,84 49.4137931,84 C41.8895,84 35.0578669,79.342374 33,73"/>
</g>
</svg>
</a>
</div>
</body>
</html>body
text-align: center
#smiley-love
#smiley
&-blush
display: none
a
display: inline-block
&:hover
#smiley
transform: scale(1.1)
transform-origin: center
-webkit-animation: heartbeat 1.5s ease-in-out infinite both
animation: heartbeat 1.5s ease-in-out infinite both
&-blush
display: inherit
&-eye-left
transform-origin: center
transform: scale(.7) translate(-8px)
&-eye-right
transform-origin: center
transform: scale(.7) translate(8px)
&-mouth
transform: translateY(-22px) scale(1.6)
transform-origin: center
/* ----------------------------------------------
* animation heartbeat
* Generated by Animista on 2019-3-24 18:51:13
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
@-webkit-keyframes heartbeat
from
-webkit-transform: scale(1)
transform: scale(1)
-webkit-transform-origin: center center
transform-origin: center center
-webkit-animation-timing-function: ease-out
animation-timing-function: ease-out
10%
-webkit-transform: scale(0.91)
transform: scale(0.91)
-webkit-animation-timing-function: ease-in
animation-timing-function: ease-in
17%
-webkit-transform: scale(0.98)
transform: scale(0.98)
-webkit-animation-timing-function: ease-out
animation-timing-function: ease-out
33%
-webkit-transform: scale(0.87)
transform: scale(0.87)
-webkit-animation-timing-function: ease-in
animation-timing-function: ease-in
45%
-webkit-transform: scale(1)
transform: scale(1)
-webkit-animation-timing-function: ease-out
animation-timing-function: ease-out
@keyframes heartbeat
from
-webkit-transform: scale(1)
transform: scale(1)
-webkit-transform-origin: center center
transform-origin: center center
-webkit-animation-timing-function: ease-out
animation-timing-function: ease-out
10%
-webkit-transform: scale(0.91)
transform: scale(0.91)
-webkit-animation-timing-function: ease-in
animation-timing-function: ease-in
17%
-webkit-transform: scale(0.98)
transform: scale(0.98)
-webkit-animation-timing-function: ease-out
animation-timing-function: ease-out
33%
-webkit-transform: scale(0.87)
transform: scale(0.87)
-webkit-animation-timing-function: ease-in
animation-timing-function: ease-in
45%
-webkit-transform: scale(1)
transform: scale(1)
-webkit-animation-timing-function: ease-out
animation-timing-function: ease-out
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.