Skip to content

Instantly share code, notes, and snippets.

@mandric
Last active February 12, 2023 20:04
Show Gist options
  • Save mandric/1971c3ea2e9a5cce43d31ca1035ba04b to your computer and use it in GitHub Desktop.
Save mandric/1971c3ea2e9a5cce43d31ca1035ba04b to your computer and use it in GitHub Desktop.
Heartbeat css animation
<!--
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>
View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment