<!-- svg heart -->
#Heart with SVG animation by Misery#
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" viewBox="-75 -75 300 300">
<g class="heart" id="heart">
   <path id="ract" 
         class="path_ract" 
         d="M 0,0 L0,150 150,150 150, 0 z" 
         stroke-width="3" 
         stroke-dasharray: 600;
         stroke-dashoffset: 600;
         fill="none" 
         stroke="#444"
    />
    <path id="circle_left" 
          class="path_circle left"
          d="
             M 75,75
             m -75,0
             a 75,75 0 1,0 150,0
             a 75,75 0 1,0 -150,0
            "
          stroke-width="3"
          stroke-dasharray="471.23889803846896"
          stroke-dashoffset="471.23889803846896"
          fill="none" 
          stroke="#444"
    />
   <path id="circle_right" 
         class="path_circle right"
         d="
            M 75,75
            m -75,0
            a 75,75 0 1,0 150,0
            a 75,75 0 1,0 -150,0
          "
         stroke-width="3"
         stroke-dasharray="471.23889803846896"
         stroke-dashoffset="471.23889803846896"
         fill="none" 
         stroke="#444"
   />
  </g>
  <!--  描边  -->
  <animate 
        xlink:href="#ract"
        attributeName="stroke-dashoffset"
        from="600"
        to="0" 
        dur="3s"
        fill="freeze"
        repeatCount="0"
      />
   <animate
        id="circle_left_draw"
        xlink:href="#circle_left"
        attributeName="stroke-dashoffset"
        from="471.23889803846896"
        to="0" 
        dur="3s"
        fill="freeze"
        repeatCount="0"
      />
   <animate
        id="circle_right_draw"
        xlink:href="#circle_right"
        attributeName="stroke-dashoffset"
        from="471.23889803846896"
        to="0" 
        dur="3s"
        fill="freeze"
        repeatCount="0"
      />
  <!-- 移动圆圈 -->
     <animateTransform
        id="circle_left_move"
        xlink:href="#circle_left"
        attributeName="transform"
        type="translate"
        from="0,0"
        to="0,-75" 
        dur="3s"
        fill="freeze"
        repeatCount="0"
        begin="circle_left_draw.end"
      />
      <animateTransform
        xlink:href="#circle_right"
        id="circle_right_move"
        attributeName="transform"
        type="translate"
        from="0,0"
        to="75,0" 
        dur="3s"
        fill="freeze"
        repeatCount="0"
        begin="circle_left_draw.end"
      />
    <!-- 去除描边 -->
    <animate 
      xlink:href="#ract"
      attributeName="stroke"
      from="#444"
      to="transparent"
      dur="0.1s" 
      begin="circle_right_move.end"
      repeatCount="o"
      fill="freeze"
     />
    <animate
      xlink:href="#circle_left" 
      attributeName="stroke"
      from="#444" to="transparent"
      dur="0.1s"
      begin="circle_left_move.end"
      repeatCount="o"
      fill="freeze"
    />
    <animate
      xlink:href="#circle_right"
      attributeName="stroke"
      from="#444"
      to="transparent"
      dur="0.1s"
      begin="circle_right_move.end"
      repeatCount="o"
      fill="freeze"
    />
    <!-- 填充颜色 -->
    <animate
      xlink:href="#ract"
      attributeName="fill"
      from="none"
      to="#E21737"
      dur="1s"
      begin="circle_right_move.end"
      repeatCount="o"
      fill="freeze"
    />
    <animate
     xlink:href="#circle_right"
     attributeName="fill"
     from="none"
     to="#E21737"
     dur="1s"
     begin="circle_right_move.end"
     repeatCount="o"
     fill="freeze"
     />
    <animate
      id="fillup"
      xlink:href="#circle_left"
      attributeName="fill"
      from="none"
      to="#E21737"
      dur="1s"
      begin="circle_right_move.end"
      repeatCount="o"
      fill="freeze"
    />
  <!--   左移45deg -->
  <animateTransform
        xlink:href="#heart"
        id="rotate"
        attributeName="transform"
        type="rotate"
        from="0"
        to="45deg" 
        dur="1s"
        fill="freeze"
        repeatCount="0"
        begin="fillup.end"
      />
  <!-- 砰砰 -->
  <animateTransform
        xlink:href="#heart"
        id="boom"
        attributeName="transform"
        type="scale"
        from="1"
        to="0.8" 
        dur="1s"
        fill="remove"
        repeatCount="indefinite"
        begin="fillup.end"
      />
</svg>
body {
  font-family: Sans-Serif;
  font-size: 1.1em;
}

svg {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -75px;
  margin-left: -150px;
}


// magic

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.