Create text with animated borders only with SVG and CSS

With the SVG element it is possible to build animated texts, assigning them the same attributes of any scalable vector graphic (SVG); to understand how to do it, let us talk a little about we are going to need.

Concepts:
1. The <symbol> > element defines objects (such as texts, circles, etc.) as a graphic template that will be instantiated by the element through the ID attribute. If this is not completely understandable to you, don't worry, don’t worry, we will see it with a code example.
2. The <text> element of SVG will allow to draw graphics from letters, making it possible apply gradients, filters, layer masks, etc.; without using CSS.
3. Finally, the <use> > element, through the ID attribute take an existing node within the SVG element (such as the element) to paint it on the screen.

Let’s see all things with an example, in our HTML file, inside the body tag we will put the following code:

See like the <symbol> element has its ID attribute which is related to the <use> element, likewise, within the <symbol> element we include the <text> which, as we mentioned, will allow us to draw graphics from letter; in other words, the <use> element will paint on the screen what the element with the ID assigned to it contains within, in this case the <symbol>. element

When you run this code you should get something like this:

It’s not exactly what we want to obtein, so I will add the following CSS code to achieve the goal.

body{
    padding: 0;
    background-image: linear-gradient(49deg, #1F3145, #112235);
    font-family: 'Lato', sans-serif;
    background-size: cover;
}
svg {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 350px;
}
svg text{
    font-size: 100px;
    fill: rgba(0, 0, 0, .1);
    stroke-width: 2px;
    stroke: #ffbb00;
    stroke-linejoin: round;
    stroke-dasharray: 80;
    animation: animate 1s alternate infinite;
}
@keyframes animate {
    100% {
        stroke-dasharray: 160;
    }
}

In the previous code, what is really important happened when the <text> element is given styles (the rest is just adding a background color and giving a position to SVG element), if you notice, in the penultimate block of code, we implement the attributes “strock”, which allow us to play with the format of the line of the SVG elements, let’s see what each of them allow us to do:

stroke: set the line color
stroke-width: sets the width to the line
stroke-dasharray: allows you to display the line as a set of points, its value establishes the length of points that will make up the line
stroke-linejoin: sets the shape where the lines meet

Finally, we assign an animation to the <text> element to be able to increase the length of the points that will make up the border of the letters

The result you should obtain is the following: Tell me, did you get the same result? /2024/04/crea-textos-con-bordes-animados.html