Hi,
I am having trouble with a blurry SVG when scaled. It’s the white circle on the homepage that expands. Here is a link to the website — https://tsvetanmitev.webflow.io/
And here is a link to access the project — https://preview.webflow.com/preview/tsvetanmitev?utm_medium=preview_link&utm_source=designer&utm_content=tsvetanmitev&preview=c8b4669bcbdaff49025be80a47dbd1e9&mode=preview
It would be great to know if you have any ideas on how to fix that!
Thanks.
@Tsvetan_Mitev Hi!
It looks fine. I don’t know why it is blurring the image.
Maybe you can try using a div block with a radius instead of an image?
Eve Kayser
If the original size of the svg will be set to a larger %, let’s say 80-90% and scale it down in default interaction settings to the correct size (and scale up with scroll) This should solve it.
But I think @evekayser is right and you can use a div with 50% Radius so you don’t get the blur edges.
Yes, that’s because you’ve told it to do that 
In your IX Animation, you’re using a Transform Scale Action. Transform Scale takes what’s rendered on the screen and scales it. It’s like it was taking a bitmap picture of your vector element, and scale it up. So it naturally blurs, what you see on screen is a small SVG, enlarged, not a grown SVG.
Instead of using transform Scale you can use Size, and try that on the SVG. The IX will modify its size and it will be re-rendered to keep its sharpness.
There’s a difference though as Scale acts out of the HTML flow but Size can affect everything around or under, so you may have to rework your Positioning settings.
Note that as it is a disc, it could also be a div instead of a SVG image.
The easiest method to avoid this (well, aside from using div block with 50% radius, but maybe this will be handy in the future) is to make your object that you wish to scale to be at its largest in the first place. So create this circle svg with the size where it covers whole screen. Then for its initial state inside your ix make it like 0.1 or something - you will have to eye it. And then its final scale will be 1, meaning that it will never become larger than its original size, thus avoiding the blurring.
Hi guys, thanks everyone for the suggestions! I have tried to make a div with 50% radius, but I had the same issue and Vincent got it right.
The problem is that I am using “scale” instead of “size”, because size doesn’t seem to work well, despite all the different settings I have tried. It’s a bit of a strange composition and that for sure is my fault.
Thanks.
I got it riiiiiiiiiiight! Thanks a lot!
