CSS only animation - how to fill that svg heart-icon?

Question

(The solution clean for the W3 Validator can be found at the bottom of this post)

the goal of my task is simple :

to have a "heart" icon that users can click on and have it filled in red (it is required for the heart to fill slowly);
Ideally, users can click again on the "filled heart" to empty it (the like and unlike mechanic);
Oh and one last requirement : only html and css/scss allowed on board.

I had trouble first to make the heart-icon. I checked the web for various solutions, from designing it myself in code-lines to importing an image. Finally, I decided to import a .svg file [from this site][1] and with this code:

With no idea how to work properly with an SVG, I searched the web, looked-up some articles and YouTube videos, the course I'm taking right now is not telling me much or not in an intuitive way but I finally put my hands on two interesting-looking opportunities :

1] [this heart animation found on Codepen][2]

Its pro : it's already made. its nearly and honestly, the few Js code for the "pulse" effect is not needed in my own case, so I deleted it.

It's cons :

I can't figure out how to have the full heart to stay full. I know with an animation, you would have to insert something like :

 animation:forwards;

But here in this case, it doesn't seem to work if anyone has a solution, I think it would be a good option for the project they asked me to provide;

it doesn't use '@keyframes', and looks like a simple transition, but, again, my lack of knowledge makes it difficult to interpret;

The "filling" animation would be better if it simulated a "loading bar" starting from the bottom. But honestly it's more a cosmetic element rather than a real problem;

2] the "water filling effect" question found [here][3]

The linked Q/A was related to a water-filling animation applied to a circle.

its pro: it's a good effect and the additional animations proposed by another contributor are brilliant too ! I prefer this "bottom-up" filling effect than the one in the first option.

its con: Well it's not a proper con, it's me not being able to adapt it to my own needs. in the present example, I can't apply it to my .svg image rather than a "natively made form" like they did with their circle.

I had hoped to take the animation described in the post and apply it to my heart-icon. Well, needless to say that, without proper skills in the field, I merely copied/pasted what seemed to work and surprisingly, it has some effect but not the one I'm looking for, here's my current code.

[EDIT : I use here ":hover" instead of ":active" because I couldn't find how to simply click once on the heart in order for it to fill automatically, with ":active" I have to click on itmultiple times like in a button-smashing mini-game to fill it.]

HTML first :

And then the CSS :

      .heart{
        width:40px;
        position:relative;
        
        overflow:hidden;
      }

      .heart:hover:before{
        content:'';
        position:absolute;
        background: #04ACFF;
        z-index: -1;
        width:100%;
        bottom:0;
        animation: wipe 5s forwards;

      }

      @keyframes wipe {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

If we refer to the [original code I found][3], I decided to delete the "background: #000" and had to add a "z-index:-1" in order to have the filling animation not overlapping over the borders of the icon. But then I'm stuck and after trying to mess around and rereading what I had at hand, I decided to type this (long) post.

I would like to thank you if you've been this far, thanks for reading my request today and thank you in advance for any advice and solution you will be kind to share with me,

3] The solution (thanks to @thehujib)

The solution has been provided by @thehujib here below, I only post his code again here because it's cleaned of all small elements that were spotted by the W3 validator (mainly open-ended and repeated occurrences of ID's):

and the CSS (the only change is to have converted some repeated ID into CLASSES :

:root {
  --stroke-width: 2px;
  --heart-width: 100%;
  --transition-length: 1.2s;
  --heart-color:#d32f2f;
}

.heart-container {
  position: relative;
  width:10%;
  aspect-ratio: 1/1;
  overflow: hidden;
  clip-path: url(#svgClip);
}

.heart-clip {
  appearance: none;
  margin: 0px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  overflow: hidden;
  z-index: 2;
 
}

.heart-clip + .fill {
  top:0;
  left:0;
  transform: translateY(50%);
  width: calc(2 * var(--heart-width, 100px));
  aspect-ratio: 1/1;
  transition: transform var(--transition-length, 0s) cubic-bezier(.2, .6, .8, .4);
}
 
.heart-clip:checked + .fill {
  transform: translateY(0);
}

.heart-stroke {
  width: calc(100% - (2 * var(--stroke-width, 2px)));
  aspect-ratio: 1/1;
  position: absolute;
  top: var(--stroke-width, 0);
  left: var(--stroke-width, 0);
  fill: transparent;
  stroke: var(--heart-color);
  stroke-width: var(--stroke-width, 1px);
}

.waveShape {
  animation-name: waveAction;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 1s;
  fill: var(--heart-color);
}

@keyframes waveAction {
  0% {
     transform: translate(-175px, 0px);
  }
  100% {
     transform: translate(0px, 0px);
  }
}
``
Regards,

Elrad.


  [1]: https://www.svgrepo.com/svg/5233/heart
  [2]: https://codepen.io/GeorgeWL/pen/yLeGGMw
  [3]: https://stackoverflow.com/questions/29738787/filling-water-animation/29739227#29739227

thehuijb · Accepted Answer

I think the solution would be something like this: It still is a simple transition for the filling of the heart and an animation for the wave-effect.

it uses custom properties that you can play around with

:root {
   --stroke-width: 2px;
   --heart-width: 150px;
   --transition-length: 1.2s;
   --heart-color: #d32f2f;
}

.heart-container {
   position: relative;
   width: var(--heart-width, 100px);
   aspect-ratio: 1/1;
   overflow: hidden;
   clip-path: url(#svgClip);
}

.heart-clip {
   appearance: none;
   margin: 0px;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   position: absolute;
   overflow: hidden;
   z-index: 2;
}

.heart-clip + .fill {
   top:0;
   left:0;
   transform: translateY(50%);
   width: calc(2 * var(--heart-width, 100px));
   aspect-ratio: 1/1;
   transition: transform var(--transition-length, 0s) cubic-bezier(.2, .6, .8, .4);
}
  
.heart-clip:checked + .fill {
   transform: translateY(0);
}

.heart-stroke {
   width: calc(100% - (2 * var(--stroke-width, 2px)));
   aspect-ratio: 1/1;
   position: absolute;
   top: var(--stroke-width, 0);
   left: var(--stroke-width, 0);
   fill: transparent;;
   stroke: var(--heart-color);
   stroke-width: var(--stroke-width, 1px);
}

.waveShape {
   animation-name: waveAction;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   animation-duration: 1s;
   fill: var(--heart-color);
}

@keyframes waveAction {
   0% {
      transform: translate(-175px, 0px);
   }
   100% {
      transform: translate(0px, 0px);
   }
}

CSS only animation - how to fill that svg heart-icon?

1] [this heart animation found on Codepen][2]

2] the "water filling effect" question found [here][3]

3] The solution (thanks to @thehujib)

Answers (1)

Related Questions