search

Creating the HTML

Here we will create all the HTML code needed to create the graphic.

Our HTML file is going to contain two main parts, the SVG background element and text elements. As of now our lower-third.1.html file looks like this.

<!DOCTYPE html>
<!-- lower-third.1.html -->
<html>
    <head>
        <meta charset="utf-8">
        <title>Lower Third 1</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../css/lower-third.1.css">
    </head>
    <body>
        <script src="../js/lower.1.js"></script>
    </body>
</html>

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.

<body>
    <main class="lt-style-one">
        <div class="graphic">
        
        </div>
    </main>
    <script src="./js/lower.1.js"></script>
</body>

hashtag
Creating the SVG Element

The outer bounding box of our graphic is going to be an SVG elementarrow-up-right so we can use properties like stroke-dasharray to animate the border around the text. To begin, lets create the basic svg element.

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.

Next, we will need the two path elements that will make up our border for our graphic.

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.

hashtag
Resources

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

Our div element will act as the background for our subtitle element. Here is one last look at our final lower-third.1.html file.

That is all we will need for HTML! Next we will style the graphic with SCSS.

PreviousFile SetupNextCreate the SCSS

Last updated