circle Mask animation
How can I reverse the animation on clic? at the moment is just starting it.
Also, how can I have the circle SVG mask to start in the center of the screen.
Looks like is offset.
Is it possible? any idea?
See the Pen VBNQXr?editors=1010 by davide77 (@davide77) on CodePen
You'll see in the CSS that I'm limiting the width/height to 80%. But even if we change that to 100% it won't fill the screen at all sizes because of the aspect ratio of the image. You could set the SVG preserveAspectRatio="none", but that would distort the image and look pretty funky.
Another option would be to center the SVG and crop the edges depending on screen size. Just use a little JS to make your calculations.
Another option would be to use CSS masks, but they give
