clipping a path out of text

I'm trying to clip a shape out of a letter Currently in the Figma-file I got, this has been done by an SVG image that's being used as an overlay Is there a way I can just clip it out of the letter? So it becomes transparent with the background coming forward Or is that SVG image as overlay (and trying to figure out the position it needs) the way to go? I'm also thinking it may be a better option (in terms of accessibility) to completely set the text in an SVG image to include in the page and serve the actual text content as alternative I've attached a screenshot of what I'm trying to explain
No description
6 Replies
MarkBoots
MarkBoots21h ago
Is it just the letter b, or is the B part of a longer text?
denertog
denertogOP21h ago
it's part of a title
denertog
denertogOP21h ago
and of course the text is covering different parts of a gradient depending on the viewport
No description
No description
MarkBoots
MarkBoots21h ago
you could put the b in a span and then use mask-image with a radial-gradient to cut it out for example
span {
mask-image: radial-gradient(circle at 100% 85%, transparent .5ch, black 0)
}
span {
mask-image: radial-gradient(circle at 100% 85%, transparent .5ch, black 0)
}
you'll have to play a bit with the origin position and the color stop, depending on your font
MarkBoots
MarkBoots21h ago
No description
denertog
denertogOP15h ago
Perfect. Will try this!

Did you find this page helpful?