Making a text-filled shape with CSS clip-path

I’ve always liked the aesthetic of art constructed from text. Beautiful, intricate shapes that look like they took hours or days to put together. I’ll be frank – I’m not quite that patient.

However, I’ve been learning about CSS clip-paths, and I wanted to do a quick project in which I use a text-filled HTML DIV element and then clip it into a shape using the clip-path.

Add in some copy-and-pasted Lorem Ipsum, and…

Lorem Pi!

In order to get the clip path, I used Inkscape. I found a Pi symbol and copy/pasted it into Inkscape. Note that the Pi symbol is a character which can be entered by using a key combination – if the moon is in the waning phase and you hop up and down on your left foot wearing a purple dress – but those conditions weren’t met and my laptop decided I wasn’t worthy to enter it using the key combination. Copy and paste complete, I then found a font I wanted to use.

I found the best way to get the path to cooperate is to first export it as a PNG image, then open that PNG image and run Trace Bitmap in Inkscape. I struggled for a while when my path had been exported and still wanted to be a regular text-sized character the same size as the rest of my text, while I wanted it to be a large almost full-page shape.

Bitmap traced, I exported an ‘Optimized SVG’ from inkscape. For what it’s worth, I chose not to have it convert the CSS properties to XML properties, although I didn’t really use them anyway.

I used the very helpful post by CSS Tricks here for knowledge and examples: https://css-tricks.com/almanac/properties/c/clip-path/

Basically, we add these tags inside the HTML document to define an inline SVG:

<svg> <clipPath id="pi"> <path d="*this is where all the coordinates go*"> </clipPath></svg>

For the DIV element, we define that with its own ID.

<div id="clip-me"></div>

Up in the CSS code section we just do our thing with the DIV element, using the ID as the selector.

#clip-me { *css goes here* }

We also use the ID of the SVG Clip-path as the selector for that:

clip-path: url(#pi);

Remember how I said earlier how I’m not too patient? Well, I don’t like scrolling up and down large blocks of text when I’m building and editing code either.

By the way, I got the Lorem Ipsum text from: https://www.lipsum.com

So, to keep from having to have a bunch of copy/pasted text, I built a bit of Javascript to iterate and add the text to itself, then use innerHTML to output it to the HTML page using the DIV’s ID. Aren’t you glad we didn’t use its class?

function longText() {
var lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
var i = 1;

while(i < 8) {
lorem += lorem;
i++;
}

document.getElementById("clip-me").innerHTML = lorem;

You can alter the number of times the while loop happens depending on the length of your text and your font size.

After that I did some more prettying up of the overall result. I ran a transform: scale to .7 on the #pi element as well, to make it take up a bit less space than it was doing at 100%.

Check out the example on our server: http://redub.io/lorempi/

To experiment, check it out on CodePen:

I should add that to display it on CodePen I had to take off some of the CSS that wasn’t really behaving properly and I’m not quite sure why. No big deal, play with it and make it your own. Thanks for reading, and have fun!

Leave a Reply

Your email address will not be published. Required fields are marked *