Underline using an svg

pumpkin · January 11, 2021, 10:30pm

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?

emcee · January 12, 2021, 12:19am

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.

PeteSharp · January 12, 2021, 12:56am

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

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.

pumpkin · January 12, 2021, 8:23am

As easy as I though

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.

pumpkin · January 12, 2021, 9:04am

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)

PeteSharp · January 12, 2021, 9:55am

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)

pumpkin · January 12, 2021, 10:56am

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.

pumpkin · January 12, 2021, 9:28pm

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 @PeteSharp

benfluri · January 13, 2021, 11:53am

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

pumpkin · January 13, 2021, 12:14pm

Probably possible.

I do have another question though. @PeteSharp 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 URL-encoder for SVG

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).

benfluri · January 13, 2021, 9:05pm

any idea how?

pumpkin · January 13, 2021, 10:31pm

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

MicaZmuera · May 19, 2021, 5:29pm

Hi @PeteSharp I tried to do something similar but cannot figure it out (not so great at coding).

I dowloaded your project file but don’t see any code in the header. Am I looking in the wrong spot?

PeteSharp · May 20, 2021, 2:01am

Hey @MicaZmuera

Check the project header, the code is there.

You will see I make use of a Pseudo Element. Which is really the easiest way to implement this in my opinion

fancy-heading::after

RME · April 23, 2024, 11:55am

Hey guys, im looking for a animated svg line like these:

Does anyone here know the svg code?

Jerry · April 23, 2024, 1:09pm

This would work?

RME · April 23, 2024, 1:13pm

yes that could be fine.

Jerry · April 23, 2024, 1:16pm

Following the latest trend I have sent you a PM.

PeteSharp · April 23, 2024, 7:00pm

This is the way.