Elements of Identical Width – Jacob Filipp

In this tutorial, we’ll take graphical borders from the 1800s and turn them into repeating CSS borders for your website. The following technique will work for a border made up of nearly identical repeating elements. We’ll be using the free Inkscape illustration software.

The end result will be a border that neatly fills the parent element, no matter the width of the parent element. Go ahead and drag the “Resize” tab to widen or narrow it:

We will follow these steps:

• vectorizing border image
• separating each repeating element from its neighbors
• Rearranging elements so they can be easily repeated using CSS
• Creating CSS code to ensure that we will never cut off our border mid-element

receive image

We are going to work with the borders of the Recueil des divers characteres, Vignettes et Ornaments de la Fonderie et Imprimerie de JG Gilley since 1808 – organically grown and copyright free!

Choose a border that is made of equal width Letters are being repeated.

I chose this for our exercise:

We zoom in on it and take a screenshot.

vectorization

We’ll convert this flat image to a vector (SVG) so we can easily separate the wreaths and reposition them for uniform repetition.

Import the image into the Inkscape program (although Adobe Illustrator will also work)

Go to Path->Trace to Bitmap

You’ll end up with a black and white vector like this:

separating elements

Now, we divide this one big path into parts. Go to Path->Split Path and you will have a bunch of non-overlapping small parts.

You can now see blue outlines showing different paths:

But look at the red arrows where some of the inflorescences have merged together. This is due to the way the original printing was done – where the ink overlapped between different elements.

We can split that merged path by drawing a rectangle on top (shown in red), selecting both the rectangle and the path, and then going to Path->Split Path to cut the underlying paths, then going to Path->Split Path to split them into 2 separate paths.

You can also divide the shape along a thin curve by drawing with the Pen tool (don’t close the curve – just press ENTER to leave a line segment). Then, select the curve and the underlying path and go to Path->Fracture.

Go ahead and cut all the shapes away from each other

Then, go ahead and select the paths that make up each pattern element (select them, then group them with CTRL+G). When you’re done grouping, you’ll get paths that roughly match the individual pattern elements:

making each wreath the same width

Next, we want each element to be equal width So we can approximately repeat the pattern at every

Find a good average width and height for one of these elements. I do this by selecting one and looking at the width and height in it pixel on the top bar. In the example, the repeating element is 22.924px wide and 21.815px high.

Let’s go ahead and create each element 22px Wide. Select an object and manually change its width to 22px while keeping the height “locked” to the same aspect ratio with the lock icon.

Select one of your objects and copy it. Then, select all other objects:

Go to Edit->Paste->Shapes Separately. This will give them all the same height and width as the “reference object” you just copied. This is a quick way to force them all to be the same width – there are probably other ways to do the same thing.

Then we go to Object->Align and Distribute->Grid

The settings in the screenshot will distribute them horizontally, with no spaces in between. If your pattern is one that looks good with spaces between elements, you can enter 1 or 2 px in that “X:” field.

We apply the grid and get elements of equal width and height, touching:

You can adjust the height and vertical offset to break up the pattern a bit if you want:

Give them whatever color you want and export as “plain SVG”

Creating CSS that never cuts off mid-element

Next, we’re going to set the SVG pattern as a repeating background

---

Element. If we let the pattern repeat at 100% width of the element it will often cut off mid-element:

The body of our CSS: just give

---

There is a width value that is a multiple of 22px (the width of each repeating element). The width will never be set to a value that truncates an element.

we can do it with css round() Celebration:

width: round(down,100%,22px);

Above, we are setting the width of the element 100% of its parent, but rounding it up Below to the nearest multiple of 22px,

The complete code with the “background-image” declaration, horizontal repetition, and width looks like this:

hr {
        width: round(down,100%,22px);
        background-image: url( 'exported-image.svg' );
        background-repeat: repeat-x;
        height: 25px;
        border: 0;
    }

---

Note: If

---

is one of the elements Max width This cutoff can cause problems even if declared upstream. The max-width always takes precedence over the circular width we set here, and the repeat border is truncated regardless.

You will get cut-off effects like this:

One solution is to surround yourself with

---

elements in a

---