Fill a cloud or any form with a color (animated)

Question

I want to animate a cloud icon in svg format with a color from left to right and don't know how to handle it.

I exported the cloud from illustrator and paste the code here:

<svg id="cloud-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 613.78 432.88">
<title>wolke-10</title>
<path d="M89.8,206.1a108.63,108.63,0,0,0-84.3,106c0,50.9,36.7,94.8,84.3,105.7Z" transform="translate(-0.01 -0.01)" style="fill:#009285"/>
<path d="M465.7,427.4H118.3C57.1,427.4,5.5,376,5.5,315.2,5.5,258.5,48,211,104.8,203.4v-6.7c0-50.6,20.1-98.5,56.6-134.9S246.1,5.5,297,5.5c86.4,0,162.3,56.8,185.4,138.5,71.9,7.2,125.9,67.7,125.9,141.6C608.3,365.1,545.7,427.4,465.7,427.4ZM297,12.6c-49,0-95.3,19.3-130.5,54.3S112,148,112,196.7v13.1l-3.2.3c-54.8,5.8-96.1,51-96.1,105.1,0,57,48.4,105.1,105.6,105.1H465.8c75.9,0,135.4-59.2,135.4-134.7,0-71-52.4-129-121.8-134.7l-2.5-.2-.7-2.4C454.6,68.4,380.9,12.6,297,12.6Z" transform="translate(-0.01 -0.01)" style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:10.975500106811523px"/>
</svg>

How the Cloud Icon looks: Cloud Icon

Do you have any ideas? Later I want to fill the shape to a certain point. It depends on the percent value.

There are multiple questions on SO already about animating fills in SVG shapes. — Michael Mullany, May 11 '19 at 00:06

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

What apparently is a stroke in your code, is in fact a holow path. In order to fix this problem I've deleted half of the code for the cloud (from the second M command to the end). Now you can give your path a fill or you can use it as a <clipPath>

As for the animation, there are many ways to achieve this. For example you may transition the stroke-dashoffset of a line clipped with the cloud path.

Please mouse over the svg element to see the animation.

  path {
          fill:transparent;
          stroke:#f00;
          stroke-miterlimit:10;
          stroke-width:10.975500106811523px;
  
        }
  line{
          stroke-dasharray:613;
          stroke-dashoffset:613;
          transition:stroke-dashoffset 2s
        }
        
  svg:hover line{stroke-dashoffset:0;}

<svg id="cloud-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 613.78 432.88">
<title>wolke-10</title>
<clipPath id="clip">
<use xlink:href="#cloud"/>
</clipPath>  
  
<line y1="216.5"  y2="216.5" x2="613" stroke="skyBlue" stroke-width="425" clip-path="url(#clip)"/>
  
  
  <path id="cloud" d="M465.7,427.4H118.3C57.1,427.4,5.5,376,5.5,315.2,5.5,258.5,48,211,104.8,203.4v-6.7c0-50.6,20.1-98.5,56.6-134.9S246.1,5.5,297,5.5c86.4,0,162.3,56.8,185.4,138.5,71.9,7.2,125.9,67.7,125.9,141.6C608.3,365.1,545.7,427.4,465.7,427.4Z" transform="translate(-0.01 -0.01)" />
</svg>

UPDATE

the OP is commenting:

Do you also have an advice how to fill the cloud with color to 80%

In this case the value of the stroke-dashoffset on hover should be 20%. In this case the total length of the line is 613. The 20% of 613 is: 613 * .2 = 122.6.

In the CSS replace the final line with this:

svg:hover line{stroke-dashoffset:122.6;}

Thank you so much for your answer with the code example. That will definitely help me with my case. Do you also have an advice how to fill the cloud with color to 80% or 90% for example? — Dennis Deux, May 11 '19 at 08:41
I've updated my answer. Please take a look. Also, if this helps you please consider accepting my answer. — enxaneta, May 11 '19 at 10:06

Fill a cloud or any form with a color (animated)

1 Answers1

UPDATE