Fill an SVG heart from bottom to top

user_15247645 0
Viewed 176

I need to fill this svg heart with an :hover from bottom to top, can someone help me please ?

<svg class='lab__container__elt2__svg' xmlns="http://www.w3.org/2000/svg" width="30" height="24" viewBox="0 0 24 24"
<path d="M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"/>

    <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop class="color1" offset="0%" />
            <stop class="color2" offset="75%" />
            </linearGradient>
    </defs>

svg css html
1 Answers

To animate the filling of the heart from bottom to top, use the offset attribute

<animate attributeName="offset" begin="svg1.click" dur="1s" fill="freeze" from="0" to="1" />

Color fill animation will start after click

<svg id="svg1" class='lab__container__elt2__svg' xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="48" viewBox="0 0 500 500">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
      <stop class="color1" offset="0" stop-color="red">
        <animate attributeName="offset" begin="svg1.click" dur="1s"  fill="freeze" from="0" to="1" />
      </stop>
      <stop class="color2" offset="0" stop-color="#fff">
        <animate attributeName="offset" begin="svg1.click" dur="1s"  fill="freeze" from="0" to="1" />
      </stop>
    </linearGradient>
  </defs>
  <path fill="url(#gradient)" stroke="crimson" stroke-width="10" d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,251.6c-15.8-16.6-25.6-39.1-25.6-63.9 c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4"/>
</svg>

Top-down fill animation

To change the direction of the fill, you need to change the coordinates of the gradient:
x1="0%" y1="0%" x2="0%" y2="100%"

<svg id="svg1" class='lab__container__elt2__svg' xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="48" viewBox="0 0 500 500">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop class="color1" offset="0" stop-color="red">
        <animate attributeName="offset" begin="svg1.click" dur="1s"  fill="freeze" from="0" to="1" />
      </stop>
      <stop class="color2" offset="0" stop-color="#fff">
        <animate attributeName="offset" begin="svg1.click" dur="1s"  fill="freeze" from="0" to="1" />
      </stop>
    </linearGradient>
  </defs>
  <path fill="url(#gradient)" stroke="crimson" stroke-width="10" d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,251.6c-15.8-16.6-25.6-39.1-25.6-63.9 c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4"/>
</svg>

Gradient fill from left to right
x1="0%" y1="0%" x2="100%" y2="0%"

<svg id="svg1" class='lab__container__elt2__svg' xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="48" viewBox="0 0 500 500">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop class="color1" offset="0" stop-color="red">
        <animate attributeName="offset" begin="svg1.click" dur="1s"  fill="freeze" from="0" to="1" />
      </stop>
      <stop class="color2" offset="0" stop-color="#fff">
        <animate attributeName="offset" begin="svg1.click" dur="1s"  fill="freeze" from="0" to="1" />
      </stop>
    </linearGradient>
  </defs>
  <path fill="url(#gradient)" stroke="crimson" stroke-width="10" d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,251.6c-15.8-16.6-25.6-39.1-25.6-63.9 c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4"/>
</svg>

Fill halfway from left to right

<animate attributeName="offset" begin="svg1.click" dur="1s" fill="freeze" from="0" to="0.5" />

<svg id="svg1" class='lab__container__elt2__svg' xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="48" viewBox="0 0 500 500">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop class="color1" offset="0" stop-color="red">
        <animate attributeName="offset" begin="svg1.click" dur="1s"  fill="freeze" from="0" to="0.5" />
      </stop>
      <stop class="color2" offset="0" stop-color="#fff">
        <animate attributeName="offset" begin="svg1.click" dur="1s"  fill="freeze" from="0" to="0.5" />
      </stop>
    </linearGradient>
  </defs>
  <path fill="url(#gradient)" stroke="crimson" stroke-width="10" d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,251.6c-15.8-16.6-25.6-39.1-25.6-63.9 c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4"/>
</svg>

user_73948710
Related