1 year ago

#359581

test-img

popeating

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?

animation

svg

mask

clip-path

0 Answers

Your Answer

Accepted video resources