Tutorials that never disappoint! What if I was building in Webflow and using a CMS collection and want to randomise the clipping paths on all the collection items?
We just like tiny SVGs... not really, the real reason is that when we add objectBoundingBox, it's basing the clip on a 0-1 scale in the path and then scaling it up to fit, so essentially it's converting it to a percentage based system over a pixel based on when we add the objectBoundingBox so our SVG needs to match this system so it can scale with the image sizes
@@andrewshannon1169 Think of the 1x1 as a percentage that's stretching over the image, so if something is at 0.9px across and 0.8px down, it would mask the final image at 90%, 80% co-ordinates. The aspect ratio of the 1x1 isn't fixed, it's stretchy so it depends on the final image's aspect ratio
![เจ็บที่ยังฮัก - ม่อน วรวิทย์ [ Official Mv ] จอนนี่มิวสิค](http://i.ytimg.com/vi/KALIGSRSjFs/mqdefault.jpg)
Your content of building websites effects from scratch is what brings me back! Great teacher and lessons. Thanks!
Thank you! We have more videos coming, including one tomorrow, so keep watching and sharing!
This was awesome, thank you so much @SuperHi I never really understood the objectBoundingBox but now it all makes sense.
Glad it helped! It's an incredibly versatile thing, isn't it?
@@SuperHi yes! so many cool options, the perfect example of how to create a big impact with a simple concept. Thanks again.
awesome! thanks a lot!
Very nice. Thanks
Tutorials that never disappoint! What if I was building in Webflow and using a CMS collection and want to randomise the clipping paths on all the collection items?
Thank you so so so so so so so so so so so so so so so much!!!!
Good title!
I know, right? Thanks for your help on it btw! Ending up adding a bit of both options in!
Thank you so so so so so so so so so so so so so so so much!
thanks been scratching my head for hours to implement a design 🥴🥴
Legend!
Great tutorial! What's the reason you changed the ratio of the squiggle to 1:1 and reduced it's size to 1px x 1px in Figma?
We just like tiny SVGs... not really, the real reason is that when we add objectBoundingBox, it's basing the clip on a 0-1 scale in the path and then scaling it up to fit, so essentially it's converting it to a percentage based system over a pixel based on when we add the objectBoundingBox so our SVG needs to match this system so it can scale with the image sizes
Thanks for explaining@@SuperHi. Is there a reason we change the aspect ration 1:1 when the image the mask is being placed over is not 1:1?
@@andrewshannon1169 Think of the 1x1 as a percentage that's stretching over the image, so if something is at 0.9px across and 0.8px down, it would mask the final image at 90%, 80% co-ordinates. The aspect ratio of the 1x1 isn't fixed, it's stretchy so it depends on the final image's aspect ratio
I wish you would’ve shown if it was responsive...
hey so i have an issue when there is a border-radius applied on the shapes. They appear huge on the site. Do you know any fix for this?
im trying to put a shine effect on top of it when we hove on the image. doesn't work. Any thoughts?