An animated heart bar based on the one from The Legend of Zelda: Breath of the Wild.
The HeartBar component takes two props: health and maxHealth.
This component will keep track of the health value, and keep an internal value that smoothly transitions any changes made to the input value (currently thanks to VueUse's useTransition).
The amount of hearts rendered depends on the input max health as well as the healthPerHeart internal value.
Each heart has a foreground and a background, and is assigned a value from 0 to 1. In order to achieve the radial fill effect, the CSS clip-path property is used in combination with a dynamically created SVG circle path.
npm install
# or
yarn installnpm run dev
# or
yarn devMIT