<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.