“Death is not an event in life: we do not live to experience death. If we take eternity to mean not infinite temporal duration but timelessness, then eternal life belongs to those who live in the present.”
― Ludwig Wittgenstein

Part of the SVG Backgrounds Reading List

As I’m about to start on another semester , it seemed appropriate to create a with a scholastic theme. Being composed of just two straight lines - and therefore closely related to my earlier work on stripes - the background itself is pretty easy to make, so I decided to add the challenge of ensuring that HTML text would always fall on the lines…

The vertical red ruled line - the left margin of the “page” - is one SVG document, red-line.svg: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
    <line x1="15" y1="0" x2="15" y2="16" stroke-thickness="2" stroke="rgba(220,0,0,0.3)" />
</svg>

And the blue horizontal ruled lines are another: 

<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="15" x2="100%" y2="15" stroke-thickness="2" stroke="rgba(0,0,220,0.3)" />
</svg>

Note the lack of a viewBox for the second document, and the use of 100% for the x2 value of the blue line. Colors for the lines are written in rgba, allowing them to “soak in” to the background.

Drawing Them Together

Both SVG documents are drawn together using CSS multiple backgrounds, and a technique pioneered by Lea Verou: 

body { 
    background-image: url(blue-line.svg), url(red-line.svg); 
    background-size: 100vw 1.5em, 32px 32px;
    background-repeat: repeat, repeat-y;
    background-position: 0 0, 64px 0;
    font: 200%/1.5 Bradley Hand, Segoe Script, cursive; 
    margin-left: 120px; margin-right: 100px; 
}

A few notes:

  • The background-size of the blue line is the first value pair: 100% of the width of the document, and 1.5em high (note this value, as it becomes important in a moment).
  • the blue line is repeated both horizontally and vertically; the red line only repeats vertically.
  • the blue line starts in the top left corner, and the red line is 64px in from the left.
  • the typeface is set using the font shorthand: the first value is the font-size, the second line-height. The line-height value exactly matches the vertical spacing used on the background-size of the repeated blue line, meaning that if one increases or decreases, the other does two (you can test this yourself by zooming and reducing the text size).

Because the text and ruled lines are perfectly fluid, they are also easy to alter for smaller screens, making this solution wonderfully responsive.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/zvxEPp