POC pulsing svg hearth

In this example below you will see how to do a POC pulsing svg hearth with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tibomahe ©
  • HTML
  • CSS
  • JavaScript
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25 39.7l-.6-.5C11.5 28.7 8 25 8 19c0-5 4-9 9-9 4.1 0 6.4 2.3 8 4.1 1.6-1.8 3.9-4.1 8-4.1 5 0 9 4 9 9 0 6-3.5 9.7-16.4 20.2l-.6.5zM17 12c-3.9 0-7 3.1-7 7 0 5.1 3.2 8.5 15 18.1 11.8-9.6 15-13 15-18.1 0-3.9-3.1-7-7-7-3.5 0-5.4 2.1-6.9 3.8L25 17.1l-1.1-1.3C22.4 14.1 20.5 12 17 12z" fill="red"/></svg>

/*Downloaded from https://www.codeseek.co/tibomahe/poc-pulsing-svg-hearth-WzarMN */
    svg {
  display: block;
  width: 100px;
  height: 100px;
  margin: 100px auto;
  border-radius: 50%;
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  3.3% {
    transform: scale(1.1);
  }
  16.5% {
    transform: scale(1);
  }
  33% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}



/*Downloaded from https://www.codeseek.co/tibomahe/poc-pulsing-svg-hearth-WzarMN */
    

Comments