Heartbeat css animation

heartbeat-css-animation.markdown

Heartbeat css animation

visit http://fivera.net/

A Pen by Milan Andric on CodePen.

License.

index.html

<!--
  TODO use absolute position
  Based on:
    https://dev.to/xinnks/create-loading-animations-with-svg-and-css-1d0p
-->
<link rel="stylesheet" href="./style.css" />
<div class="svg-loader">
  <svg class="svg-container hearbeat"
        xmlns="http://www.w3.org/2000/svg"
        width="250"
        height="250"
        viewBox="0 0 500 500"
        >
      <g
          stroke="#f00"
          stroke-width="20"
          fill="#f00">
        <path
              d="M140,20C 73,20 20,74 20,140 20,275 156,310 248,443 336,311 477,270 477,140 477,74 423,20 357,20 309,20 267,48 248,89 229,48 188,20 140,20Z"/>
    </g>
  </svg>
</div>

inspiration.jpg

script.js

scripts

style.css