'Resizing and animating SVG clipPath

i have a SVG that i use as a mask (via clipPath) over an image my idea was to use the SVG mask as a revealer for the image, by scaling it from 0 to big enouoght to reveal the image i made this sample

#ima  {
  clip-path: url(#yes);
  width:800px;
height:800px;
    object-fit: cover;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

https://codepen.io/lenna-the-vuer/pen/GRyvBEa

but it looks the SVG can't be modified or positioned.

I already made some reveal using a basic clip path, by animating the path itslef but i can't do it with a complex SVG any sugggestion?

animationsvgmaskclip-path


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions