An effect to create the reflective glow of an element on text. Built with HTML, CSS and Figma.
I used Figma to make a blurred copy of a the astronaut image in addition to an exportable text SVG. A clip path is made on a container element using the SVG.
On the SVG itself, the I needed to convert the clipPathUnits property 'userSpaceOnUse' to 'objectBoundingBox' using this online tool.
When clipPathUnits is set to userSpaceOnUse, the coordinates within the <clipPath> element are relative to the entire SVG canvas. This means that the clipping path will not change its position or scale relative to the element it is applied to, even if the element moves or is resized.
When clipPathUnits is set to objectBoundingBox, the coordinates within the <clipPath> element are relative to the bounding box of the element the clipping path is applied to. This means the coordinates are normalized between 0 and 1, representing the width and height of the element.
Finally, positioning the blurred element inside of the clipped container allows you to create the appearance of a glow that shines through the letters.
Check out the code here!
* Astro image from rawpixel.com