To begin with, let's add a main element inside the body with a class of lt-style-one. This main element will contain and position our graphic. Along with the main element, we will add a div element that will contain the graphic's elements. We will also give the diva class of graphic.
This SVG element will give us a viewbox with a width of 100 and a height of 100. We will add one addition property, preserveAspectRatio, that is going to allow our SVG element to scale freely with our inner text.
The property vector-effect defines how a vector element, path in this case, scales when the SVG element changes size. We want the border to remain a constant size no matter the width or height so we will set the value to non-scaling-stroke.
Resources
Creating the Text
Now that we have created our border, let's add in the text. We will only need a total of three elements to make this happen. A h1, div, and p element.
The outer bounding box of our graphic is going to be an so we can use properties like stroke-dasharray to animate the border around the text. To begin, lets create the basic svg element.
