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>

Creating the SVG Element

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

<body>
    <main class="lt-style-one">
        <div class="graphic">
            <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        
            </svg>
        </div>
    </main>
    <script src="./js/lower.1.js"></script>
</body>

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.

<svg viewbox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">

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

<svg viewbox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <path vector-effect="non-scaling-stroke" d="M50 100 H0 V0 H50" />
    <path vector-effect="non-scaling-stroke" d="M50 100 H100 V0 H50" />
</svg>

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.

<body>
    <main class="lt-style-one">
        <div class="graphic">
            <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <path vector-effect="non-scaling-stroke" d="M50 100 H0 V0 H50" />
                <path vector-effect="non-scaling-stroke" d="M50 100 H100 V0 H50" />
            </svg>
            <h1>Lower Third Title</h1>
            <div>
                <p>Subtitle</p>
            </div>
        </div>
    </main>
    <script src="./js/lower.1.js"></script>
</body>

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.

<!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>
        <main class="lt-style-one">
            <div class="graphic">
                <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                    <path vector-effect="non-scaling-stroke" d="M50 100 H0 V0 H50" />
                    <path vector-effect="non-scaling-stroke" d="M50 100 H100 V0 H50" />
                </svg>
                <h1>Lower Third Title</h1>
                <div>
                    <p>Subtitle</p>
                </div>
            <div>
        </main>
        <script src="../js/lower.1.js"></script>
    </body>
</html>

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

PreviousFile SetupNextCreate the SCSS

Last updated

Was this helpful?