SVG Heart Animation

index.html

<main id=app>
  
  <h1>Heart.</h1>
  
  
  <svg viewBox="0 0 24 24">
    <use xlink:href="#heart" /> <!-- filled heart -->
    <use xlink:href="#heart" /> <!-- outline heart -->
  </svg>

  
  <!-- reference path for both outline, and filled, hearts -->
  <svg class="hide" viewBox="0 0 24 24">
    <defs>
      <path id="heart" d="M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.118-10-8.999-12-3.568z" />
    </defs>
  </svg>
  
  
  
  
  <p>Playing around with <code>&lt;svg /&gt;</code> and <code>&lt;def /&gt;</code> to create a nice animated heart icon without multiple elements, or svgs.</p>

  
  
  
  
  
</main>

script.js

$("html").on("click", function() {
  $(this).toggleClass("on");
});
setTimeout(function() {
  $("html").addClass("on");
}, 1000);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

style.scss

:root {
  --heart: #f43965;
  --ease: linear(
    0, 0.045 1.4%, 0.185 3.1%, 1.16 10.6%, 1.307, 1.37 14.7%, 1.372, 1.367 16%,
    1.33 17.5%, 0.958 25.3%, 0.891, 0.863 29.8% 31.2%, 0.877 32.7%, 1.015 40.4%,
    1.04, 1.051 44.8%, 1.046 47.9%, 0.995 55.6%, 0.981 59.8%, 0.983 63.1%,
    1.007 74.7%, 0.998 89.2%, 1
  );
}

svg use {
  fill: transparent;
  stroke: rgba(255,255,255,0.7);
  stroke-width: 1.2;
  transition: all 0.33s ease;
}

svg use:last-child {
  fill: var(--heart);
  stroke: var(--heart);
  opacity: 0;
  transform: scale(.33);
  transform-origin: center;
}

.on svg use {
  stroke: transparent;
}

.on svg use:last-child {
  opacity: 1;
  transform: none;
  transition: all 1.2s var(--ease);
}






svg {
  width: max(30px,3vw);
  height: max(30px,3vw);
  overflow: visible!important;
}


html, body {
  color: white;
  background: #333844;
  padding: 0;
  font-family: "Assistant", sans-serif;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  text-align: center;
}

h1 {
  font-weight: 100;
  font-size: max(30px, 3vw);
}

p {
  max-width: 60ch;
}

h1,p {
  margin: max( 30px, 2vw );
}

.hide {
  display: none;
}

styles

<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@200;700&amp;display=swap" rel="stylesheet" />

svg-heart-animation.markdown

SVG Heart Animation

using <use> and <svg> <def> two times to create a nice pulsing heart animation without duplicating the <svg> or <path>

A Pen by Simon Goellner on CodePen.

License.