Svg Image Clip
Image clipped using a SVG element.
All components are based on CodyFrame.
This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.
This component is used to create clipped images using the SVG
For the clipping to work properly, make sure the image ratio is the same as the SVG viewBox. In all the demos, the image ratio is 16:9.
Mutiple components on the same page #
The clipping effect is created using the SVG
clipPath element. Its
id is set equal to the
clip-path url of the image to clip.
If you have multiple clipped images components on the same page, make sure to use different ID values for each one of them.