CODEWITHSUNDEEP
htmlcssanimationsvg
sam
sam

Reputation: 253

Pulsate effect for the heart shape css3

i'm trying to implement the pulsate effect similar to the following

pulsate animation

since the above code works well only for circle or square shapes, is there any way we can achieve the same effect for the svg heart shape?

<svg class="heart" preserveAspectRatio="xMidYMid meet" viewbox="0 0 20 20"><path d="M8.612,2.347L8,2.997l-0.612-0.65c-1.69-1.795-4.43-1.795-6.12,0c-1.69,1.795-1.69,4.706,0,6.502l0.612,0.65L8,16  l6.12-6.502l0.612-0.65c1.69-1.795,1.69-4.706,0-6.502C13.042,0.551,10.302,0.551,8.612,2.347z" fill="#fff" transform="scale( 0.954929658551372 )"></path></svg>

Upvotes: 0

Views: 735

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101946

Another approach would be to animate the stroke width.

svg {
  width: 40px;
  margin: 40px;
  overflow: visible;
}

use {
  stroke: red;
  opacity: 0;
  animation: pulsing 1000ms ease-out infinite;
}

@keyframes pulsing {
  from {
    opacity: 0.5;
    stroke-width: 0;
  }
  to {
    opacity: 0;
    stroke-width: 12px;
  }
}

.element {
  animation: pulsing 1000ms ease-out;
}
<svg class="heart" preserveAspectRatio="xMidYMid meet" viewbox="0 0 20 20">
  <use xlink:href="#shape"/>
  <path id="shape" d="M8.612,2.347L8,2.997l-0.612-0.65c-1.69-1.795-4.43-1.795-6.12,0c-1.69,1.795-1.69,4.706,0,6.502l0.612,0.65L8,16  l6.12-6.502l0.612-0.65c1.69-1.795,1.69-4.706,0-6.502C13.042,0.551,10.302,0.551,8.612,2.347z" fill="#f00" transform="scale( 0.954929658551372 )"></path>
</svg>

Upvotes: 4

Joshua Comeau
Joshua Comeau

Reputation: 2763

The quickest fix would be to swap box-shadow for filter: drop-shadow. This'll work for arbitrary shapes.

This solution isn't really ideal, though; box-shadow / drop-shadow are expensive to animate. Instead, you can use transform: scale and opacity, something like:

@keyframes pulsing {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}

.element {
  animation: pulsing 1000ms ease-out;
}

Upvotes: 1

Related Questions