In the previous tutorial, we learned how to make an 1800s-style CSS border with a single-motif repeating element:
Now, you will learn 3 ways to create horizontal lines with repeating Victorian motifs, where the repeating elements are not identical. See the example below, be sure to drag the “resize handle” to see how these lines adapt to different widths:
Method A:
Method B:
Method C:
Like in the previous post, we will be using the free Inkscape for vector editing.
Table of contents:
- Get the images and vectorize them
- Approach A: simple repetition. Alternating wide/narrow in the centre.
- Approach B: double repetition. Always a narrow element in the centre.
- Approach C: one-and-two-halves repetition. Always a wide element in the centre.
Get the image
We’ll be working with the Recueil des divers caractères, vignettes et ornements de la fonderie et imprimerie de J. G. Gillé from 1808.
Let’s choose an asymmetrical (or, dual-motif) pattern. In the below screenshot, the central motifs in specimens 98, 100 and 101 are suitable.
We will use number 100 for this tutorial:
First, we turn it into a vector (SVG) and group the wide elements and narrow elements separately.
Approach A: simple repetition
The following method is the simplest way to fill in a horizontal line. We will use the background-image property with a horizontal repetition.
The line will be symmetrical, but sometimes the central element will be “wide” and sometimes “narrow”. This is a weakness – if you ever want to put a special one-of-a-kind element in the middle of the line, you wouldn’t know whether to make it wide or narrow.
Initially, we will repeat this image horizontally:
Here is the CSS for a basic repetition:
hr.ayh{
background-image: url( 'four-repeat-both.svg' ); /* our image */
background-repeat: repeat-x; /* repeat it horizontally, in the x-dimension */
background-position: left top;
height: 21px;
border: 0;
}
This approach often cuts off the pattern, depending on the width of the element:
Our goal is to restrict the width of this element to a value that prevents cutoff and where the pattern is symmetrical. We want the width of our element to “land in between” the patterns.
To do that we will use the CSS functions calc(), which performs basic math functions, and round() which lets us round-down to the nearest multiple of a value.
My goal is to have the line be at least as wide as 1 of the wider segments of our repeating element (39px). With the width increasing from there only by full multiples of 59px.
That setup will ensure that there will always be a wide element at the far-left of our line, a wide element at the far-right, and one of the narrow 20px elements in the centre.