How to Connect Text so it can be cut in one piece - automatically with any font

Cuttle can now connect text together so that it can be cut out in one piece.

Dots on i’s are automatically joined, letters are pressed together, and so on.

It works instantly and you can use any font.

:point_right: Try out an interactive demo! :point_left:



When cutting it’s often useful to join all the letters of a word or sentence into a single, continuous shape.

You can do this manually (@federico made a video about it) but it’s tedious. You have to join the dots of i’s, connect various letters, do “Boolean Union”, etc.

We developed a new feature to perform this process automatically in Cuttle (web-based design tool for laser cutting).

You can either generate a connected text SVG using the above template, or drag out the new Connected Text shape while designing in the Cuttle editor…

How to create connected text in the Cuttle editor

In the Cuttle editor’s left sidebar, click Browse All Shapes and look in the Text category.


Drag out a Connected Text shape onto the canvas.

Type your text and it will be automatically connected!


You can change the font in the inspector (right side panel).


The feature works with any font, including custom font files that you upload.

How it works

We developed an algorithm that finds and joins the individual shapes of text.

First, it connects each individual character. It move the dots of an i or j or ! (or accents) towards the main part of the character until they touch.

Then, each character is shifted to the left until it overlaps the previous character.

We also have custom logic to connect punctuation like apostrophes and quotes.

In our tests with various fonts and text, this algorithm has worked really well. If you find a font and text combination that doesn’t meet your expectations, please let me know! We’ll collect these test cases and use them to improve the algorithm.

How to connect multi-line text

Make new lines in your text simply by typing Enter.


You can type spaces or use the align parameter to adjust the horizontal positioning.

Adjust the lineHeight to make the lines overlap the way you like.


There’s a bit more documentation on the demo page but that’s the basics.

This was a really fun feature to build. The “Quick!” images above are actually from a debug view — the feature was developed entirely within the Cuttle editor as a Code Component.

I hope you find it useful and that it saves you time on your projects!


I think this is another very useful feature. As soon as I get over my need to make the hinged lid boxes in all sizes and out of all materials, I will have time to play with text. Thanks for offering improvements.


Keep up the great work. I’ve recommended your site to several people.


Thanks! Will do — let me know if you have any feature requests!


This is so awesome Toby. Nicely done!


This topic was automatically closed 32 days after the last reply. New replies are no longer allowed.