Show png image progressively with SVG cover

Question

I want to show a png image (circle shape) with an animation. At start the image will not appear, but will appear with a "clockwise display: block" effect.

My idea is a SVG cover with the desired effect, going from e.g: red to transparent fill. Is this possible?

Any ideas?

Thanks.

Answer 1

Here's one simple way. It's just a diamond shape, larger than the image, whose points I slowly collapse together like a closing fan.

Because of the diamond shape, it doesn't have a consistent sweep speed. But if you use short animation duration, you don't really notice. If you want to make the speed more consistent, you could add more points. For example, use an octagon, rather than a diamond.

<svg width="400" height="400" viewBox="0 0 400 400">

  <image href="https://i.imgur.com/pHSdFlP.jpg" width="400" height="400"/>
  <polygon points="200,-200, 600,200, 200,600, -200,200" fill="red">
    <animate attributeName="points"
             attributeType="XML"
             dur="1s"
             values="200,-200, 600,200, 200,600, -200,200, 200,-200, 200,200;
                     600,200, 600,200, 200,600, -200,200, 200,-200, 200,200;
                     200,600, 200,600, 200,600, -200,200, 200,-200, 200,200;
                     -200,200, -200,200, -200,200, -200,200, 200,-200, 200,200;
                     200,-200, 200,-200, 200,-200, 200,-200, 200,-200, 200,200"
             fill="freeze"/>
  </polygon>

</svg>