10 replies

Create an underline effect using clip-path and svg

Happy new year to everyone!

I've been working a lot with svg, maybe not in the best way, but lately I've discovered the clip-path property and now I'm trying to figure out how it works.
I'm trying to add this svg -that pretends to underline some words-to a <span> that wraps the text that I want to underline, which is inside of an h1 tag.
The problem is that I can't see the svg, no matter which way I try.
I believe that maybe the problem is related to some canva stuff but since I'm new to clip-path I dont know how to manage that.

By now I've tried:

- Adding the svg using

clip-path: url('')

clip-path: url('')

; This url should be correct bc I've used it on some other files when adding svgs with ::before and ::after;
- Adding an id like this:

<clipPath id="svgClipPath">

<clipPath id="svgClipPath">

and passing this id to the url:

clip-path: url(#svgClipPath)

clip-path: url(#svgClipPath)

.
- Coping the path value from the svg and adding it to the path value on clip-path as you can see on the file I attached.

P.S.: The svg is uploaded as an png bc discord didn't let me upload it as an svg. The text I attached is the file where I'm working, where I'm using cobalt, so the file has a .liquid extension.

Any source to know more about clip-path will be really appreciated! Thanks in advance for reading me