html - Animate SVG paths clipped to an image

Question

I'm trying to show parts of an image with a fade in animation. So this is what I've done:

• I created an SVG with 2 paths (2 parts of the image that I want to show with a fade in animation)
• I clipped the SVG to the image

The result is: the image has a mask and only those 2 parts are shown.

Everything's good but now I have to animate them and I cannot find enything that help me. Can you?

This is my code

<style>
img {
  clip-path: url(#clip);
  width: 100%;
}
</style>

<img src="https://wikitesti.com/wp-content/uploads/2020/11/yellow-is-the-color-of.jpg"/>

<svg xmlns="http://www.w3.org/2000/svg"
  width="3.33333in" height="2.5in"
  viewBox="0 0 1000 750">
     <clipPath id="clip" clipPathUnits="objectBoundingBox" transform="scale(0.001, 0.0013333333333333)">
       <path id="path"  d="M 416.00,140.00
       C 426.58,139.14 423.70,137.74 438.00,138.00
         440.13,138.04 442.65,137.95 444.26,139.60
         446.32,141.71 446.00,146.23 446.00,149.00
         446.00,149.00 446.00,175.00 446.00,175.00
         446.00,175.00 452.00,230.00 452.00,230.00
         452.00,230.00 452.00,242.00 452.00,242.00
         452.00,242.00 454.66,271.00 454.66,271.00
         454.66,271.00 454.09,277.00 454.09,277.00
         454.09,277.00 458.25,312.00 458.25,312.00
         459.85,321.79 462.98,335.77 463.00,345.00
         463.00,345.00 465.00,372.00 465.00,372.00
         465.02,385.91 468.58,409.91 462.00,422.00
         462.00,422.00 435.08,408.00 435.08,408.00
         435.08,408.00 435.08,397.00 435.08,397.00
         435.08,397.00 436.82,381.00 436.82,381.00
         436.82,381.00 433.17,360.00 433.17,360.00
         433.17,360.00 431.48,338.00 431.48,338.00
         431.48,338.00 424.17,308.00 424.17,308.00
         424.17,308.00 424.95,294.00 424.95,294.00
         424.95,294.00 424.95,283.00 424.95,283.00
         424.95,283.00 424.09,273.00 424.09,273.00
         424.09,273.00 421.91,239.00 421.91,239.00
         421.91,239.00 421.00,227.00 421.00,227.00
         421.00,227.00 421.00,202.00 421.00,202.00
         421.00,202.00 420.00,190.00 420.00,190.00
         420.00,190.00 420.00,179.00 420.00,179.00
         420.00,179.00 419.00,165.00 419.00,165.00
         419.00,165.00 417.79,148.00 417.79,148.00
         417.79,148.00 416.00,140.00 416.00,140.00 Z" fill="#C4C4C4"/>

         <path class="fade-in three" id="path2" d="M 530.00,168.00
         C 530.00,168.00 588.00,168.00 588.00,168.00
         588.00,168.00 588.00,468.00 588.00,468.00
         588.00,468.00 530.00,468.00 530.00,468.00
         530.00,468.00 530.00,168.00 530.00,168.00 Z" fill="#C4C4C4" />
     </clipPath>
</svg>

Thank you.

[EDIT]

I tried to do something like this:

<path....>
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</path>

But it seems like if path is clipped opacity doesn't work

[EDIT]

I have to animate them with different duration and delay so I cannot just animate the image

[DESIRED RESULT]

This should be the final results. Same picture, different masks and different fade in effect time

question from:https://stackoverflow.com/questions/65927851/animate-svg-paths-clipped-to-an-image

Answer 1

Waitting for answers