Victorian-style lines for the web: Elements of identical width

Summary

In this tutorial, we will take graphical borders from the 1800s and turn them into a repeating CSS border for your website. The following technique will work for border made of almost-identical repeating elements. We’ll use the free Inkscape illustration software. The end result will be this kind of border that neatly fills the parent element, no matter what the parent’s width is. Go ahead and pull at the “resize” tab to make it wider or narrower: We will follow these steps: Vectorizing the image of a border Separating each repeating element from its neighbours Rearranging the elements so they can repeat easily using CSS Creating CSS code to ensure we’ll never cut off our border mid-element Getting the image We’re going to work with the borders at Recueil des divers caractères, vignettes et ornements de la fonderie et imprimerie de J. G. Gillé from 1808 – organically grown and Copyright Free! In the above screenshot, the borders that work for our needs are 79, 81, 84, 85, 86 and 88. The others would work if you crop them to drop their central/edge elements which have different widths from the repeating portion. Choose a border that is made up of the same width characters repeating. I’ve chosen this one for our exercise: We zoom in on it and take a screenshot. Vectorizing We will turn this flat image into a vector (SVG) so that we can easily separate the wreaths and space them out for even repetition. Import the image into the Inkscape program (although Adobe Illustrator will also work) Go to Path->Trace To Bitmap You will end up with a black and white vector like this: Separating the elements Now, we split this one big path into parts. Go to Path->Split Path and you’ll end up with a bunch of non-overlapping little portions. You can see the blue outlines showing distinct paths now: But look at the red arrows where some of the wreaths have merged together. This is due to the way the original print was done – where the ink overlapped between separate elements. We can s...