Search code examples
csssvgsvg-animate

SVG Broken heart

Where can i find broken heart SVG format?? i need two layer cause when i click on broken heart this layers combine and result want one good heart <3

I drew heart but cant animate :(

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-43 46 12 10" style="enable-background:new -43 46 12 10;" xml:space="preserve">

  <path d="M-37,47.5c0.7-0.9,2.1-1.5,3.3-1.5c2,0,2.7,1.5,2.7,3.4c0,3.3-6,6.6-6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />

  <path d="M-37,47.5c-0.7-0.9-2.1-1.5-3.3-1.5c-2,0-2.7,1.5-2.7,3.4c0,3.3,6,6.6,6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />

</svg>

any ideas?

Solution

  • An animation moving the right side:

    #right {
  animation: move 2s infinite alternate;  
  fill: red;
}

@keyframes move {
 0% {transform: translateX(2px);}  
 100% {transform: translateX(0px);}  
}
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-43 46 12 10" style="enable-background:new -43 46 12 10;" xml:space="preserve">

  <path id="right" d="M-37,47.5c0.7-0.9,2.1-1.5,3.3-1.5c2,0,2.7,1.5,2.7,3.4c0,3.3-6,6.6-6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />

  <path d="M-37,47.5c-0.7-0.9-2.1-1.5-3.3-1.5c-2,0-2.7,1.5-2.7,3.4c0,3.3,6,6.6,6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />

</svg>

    An another one setting inclination on both

    #right {
  animation: moveRight 2s infinite alternate;  
  transform-origin: 0% 100%;
  fill: red;
}

@keyframes moveRight {
 0% {transform: rotate(25deg);}  
 100% {transform: rotate(0deg);}  
}

#left {
  animation: moveLeft 2s infinite alternate;  
  transform-origin: 100% 100%;
  fill: red;
}

@keyframes moveLeft {
 0% {transform: rotate(-25deg);}  
 100% {transform: rotate(0deg);}  
}
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-43 46 12 10" style="enable-background:new -43 46 12 10;" xml:space="preserve">

  <path id="right" d="M-37,47.5c0.7-0.9,2.1-1.5,3.3-1.5c2,0,2.7,1.5,2.7,3.4c0,3.3-6,6.6-6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />

  <path id="left" d="M-37,47.5c-0.7-0.9-2.1-1.5-3.3-1.5c-2,0-2.7,1.5-2.7,3.4c0,3.3,6,6.6,6,6.6l0-4.9c0,0-2-2.1-2-2.1L-37,47.5z" />

</svg>