Underline using an svg

Would anyone have an idea how to replicate this kind of underline that the guys on this homepage use on their h2 and h3 tags?

I noticed they use :after on the h2 and h3, applying a background image. I tried to create that with blocs, with all the new shiny options we have in the class manager now, but did not get it to work.

My first (yay) client would very much like to have this on - or rather halfway below - the headers.

Just out of curiosity… how would I create the hover-effect on the images a bit further down that webpage?

Do you have the .svg file? You’ll need to attach the file to the project if you want it site wide or to the page if it’s specific.

You can create a class for the style with the image-background in the code editor and then apply it to the headers that you want.

Offset the image by the amount you want and span it to the width of the heading.

It can work (I borrowed the SVG from their site and added it to the page header as some CSS, the rest was in the Class Editor.). You can just apply a background image in the Class Editor as well.

Screen Shot 2021-01-12 at 1.50.39 PM

Screen Shot 2021-01-12 at 1.54.34 PM Screen Shot 2021-01-12 at 1.54.47 PM

The other hover boxes could be achieved using lots of Divs. A main wrapping div, and then within that a couple of overlaid Divs, with a background image, and a foreground image, overlaid with another div containing the text.
Then make use of transition and transform styles, which you will need to add to the page header as CSS.

As easy as I though :slight_smile:

Does the code you added there stop right after the SVG Code? I ask because I do have an svg image that I applied as a background image in the class editor. And it does not work that way. I tried it by applying the css they have on their site to the class editor in blocs. No success.

Update: Not even when I us thee svg code in the code editor.

1 Like

And to make it even worse, I tried to do this in a new project, used the code editor to paste the code for the background image, set the class editor to the same settings and … nada.

Here’s the project. What do I miss?

fancy-heading.bloc (1.4 MB)

Hey @pumpkin

You don’t add the class with the ::after to the element.

You make 2 classes.

.fancy-heading

Which is applied to the element, in your project case the H1 text

Then you make another class in the manager called

.fancy-heading::after

You do not apply this to anything.

Also to keep the image contained within the length of the text, set display inline-block on the .fancy-heading class.

I amended your file…

fancy-heading.bloc (1.4 MB)

Thanks Pete! I‘ll take a closer look at that when I get home.

Now that you say that… doh! Of course I don’t add a class with a pseudo selector to an element. Might need to refresh my css knowledge. Been a while since I did a course. Hope it gets better when I do stuff like this on a more regular basis.

1 Like

Playing around a bit more, I just applied a png background to the header, set the height to 50% and position to bottom center. Works for me.

Aaaand, I got the hover effect working so far (wildevoegel.fynndesign.de), thanks to your suggestion to nest a div inside a div inside a div. Now I just need to get the paragraph text inside the image div to animate, when I hover over the image div… but that’s work for another day. Now this happy bunny needs some sleep.

Thanks again for your help, Pete @Malachiman

2 Likes

Any idea, if it’s possible tu use this for active link in navigation? I mean the underline effect :star_struck:

Probably possible.

I do have another question though. @Malachiman Pete used the SVG code from the kliemannsland website that I linked. That code read like this:

background-image: url("data:image/svg+xml; utf8, <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' preserveAspectRatio='none' viewBox='0 0 531 18.9' style='enable-background:new 0 0 531 18.9;' xml:space='preserve'><path fill='%23f7bcbb' d='M530.5,11.4c-0.1-0.6-0.1-1.1-0.1-1.7c0-0.3,0-0.7,0-1c0-0.4,0-0.9-0.1-1.3c-0.2-0.5-0.2-1-0.2-1.5c0.3-0.9,0.5-1.9,0.6-2.9c0-0.8-4.9-2.5-8.7-2.4h-5.3c-0.1,0-0.4,0-3.7,0c-2.4,0-4.9,0-7.3,0s-4.7,0-7,0c-2.6,0-5.2,0-7.8-0.1l-4.7-0.1c-2.2,0-4.5,0-6.7-0.1c-2,0-4.1,0-6.1,0l-5.7-0.1c-4.8-0.1-98.3-0.1-103-0.2s-9.3,0-14,0c-6.5,0-13.1-0.1-19.6-0.1c-6,0-12.1,0-18.2,0c-3.4,0-6.8,0-10.2,0h-11.1c-4.5,0-8.9,0-13.4,0h-13.5h0.9c-6.1,0-12.3,0-18.4,0c-5.9,0-11.7,0.1-17.6,0.1c-3.7,0-7.5,0-11.2,0l-11.1,0.1c-7.9,0-15.7,0-23.6,0.1c-3.6,0-7.2,0.1-10.8,0.1s-7.3,0-10.9,0h-23.5h0.9c-6.1,0-12.1,0-18.2,0s-12,0.1-18,0.1H87.5c-4.2,0-8.3,0-12.5,0c-3.7,0-7.3,0.1-11,0.1H52.7c-3.8,0-7.6,0-11.4,0.1c-5.4,0-10.8,0-16.2-0.1l-8.4-0.1H13c-1,0-2.1,0-3.1,0H9.2C8,0.4,6.9,0.5,5.7,0.7C5,0.8,4.2,0.9,3.5,1.1C2.5,1.4,2.4,1.7,2.8,2l0,0L2.6,1.9V1.8C2.6,2.3,2.4,2.9,2.4,3.4c0,0.5-0.2,1-0.4,1.5C1.8,5.5,1.7,6,1.6,6.6C1.5,7.2,1.3,7.8,1.2,8.4C1,9.6,0.6,10.8,0.5,12c-0.1,1.2-0.3,2.2-0.4,3.2c-0.1,0.4,0.1,0.7,0.4,0.9c0.2,0.1,0.4,0.2,0.7,0.3c1.2,0.4,2.4,0.7,3.6,0.8c2,0.2,4,0.4,6.1,0.6s4,0.4,6.1,0.5c3.9,0.3,7.9,0.4,12.1,0.5c7.5,0.1,15.1,0,22.7-0.1L74,18.5c5.3,0,10.6,0,15.9,0c5.5,0,11,0,16.5,0.1c5.6,0,11.1,0,16.7,0s11.3-0.1,17-0.1c4.4,0,8.8-0.1,13.1,0c4.7,0,9.3,0,14,0c5,0,9.9,0,14.9,0.1l13.7,0.1c15,0.1,30.1-0.1,45.1,0c7.2,0.1,14.3,0.1,21.5,0.1c7.5-0.1,15-0.2,22.4-0.2c6.4,0,12.8,0,19.1,0c3.2,0,6.3,0,9.5,0s6.4,0.1,9.7,0.1c6.6,0,13.3,0,20,0c3.4,0,6.7,0,10.1,0c2.7,0,5.4-0.1,8.1-0.1c5,0,10,0,15,0l14.8-0.1c5.1,0,10.1,0,15.2,0c5.5,0,11,0,16.5,0c2.9,0,5.9,0,8.8,0s6,0,9.1,0s6.2,0,9.3-0.1c2.6,0,5.2-0.1,7.9-0.1c3.8,0,7.5,0,11.3,0c2.5,0,5.1,0.1,7.6,0.2c3,0.1,6,0.1,9,0.1s6.2,0,9.3-0.1c2.2,0,4.3-0.1,6.5-0.1c2.8,0,5.6,0,8.2-0.2c3.5-0.4,7-1,10.4-1.8c3.4-0.6,6.7-1.4,10-2.5c0.4-0.1,0.6-0.3,0.6-0.5c0,0,0-0.1,0-0.1c0.1-0.1,0.1-0.1,0.2-0.2C531.1,12.4,530.8,11.9,530.5,11.4z'/></svg>");

}

When I add text to the head in the project that Pete amended, the svg underline fits to the length of the heading.

Now, when I create a SVG in Affinity Designer, export it as an SVG and open it in Atom I get the following:

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 3334 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M3324.77,311.311c-33.59,-156.187 30.034,-290.563 -52.89,-295.18c-606.49,-33.766 -3094.1,-4.039 -3094.1,-4.039c-98.117,0 -112.811,62.042 -134.883,109.831c-29.629,64.152 -42.893,275.082 -42.893,275.082c-0,70.813 65.558,91.078 212.091,72.582c287.086,-36.238 1038.96,68.788 1699.21,0.269c415.489,-43.119 1020.1,35.269 1251.56,29.876c83.124,-1.936 203.729,6.063 161.904,-188.421Z" style="fill:#2176ae;"/></svg>

There’s an online tool to get css usable code from that at https://yoksel.github.io/url-encoder/

Pasting the code in there gives me the following:

background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 3334 500' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M3324.77,311.311c-33.59,-156.187 30.034,-290.563 -52.89,-295.18c-606.49,-33.766 -3094.1,-4.039 -3094.1,-4.039c-98.117,0 -112.811,62.042 -134.883,109.831c-29.629,64.152 -42.893,275.082 -42.893,275.082c-0,70.813 65.558,91.078 212.091,72.582c287.086,-36.238 1038.96,68.788 1699.21,0.269c415.489,-43.119 1020.1,35.269 1251.56,29.876c83.124,-1.936 203.729,6.063 161.904,-188.421Z' style='fill:%232176ae;'/%3E%3C/svg%3E");

Pasting this instead of the other code in Blocs shows the svg, but it does not scale in width to the length of the header text like the other svg code does.

Any SVG savvy people here, that can help me solve this? I’d like to understand what I need to change, or maybe if I should use a different app to create an svg that works they way I want (stretch to the length of the text).

any idea how?

Replying to my own question… after searching for a day, I finally found that adding preserveAspectRatio='none' to the svg code solves that problem.

1 Like