I took a class at Bay View Printing Company, the local community letterpress shop I belong to, all about printing with polymer plates. The shop is absolutely full with wood and metal type, and all the accoutrements around that, but polymer plates are not that. You get them made! They can be anything! Sometimes it’s fun to stick with the old school setting of type. I like doing that quite a bit. But I was interested in learning how to letterpress with designs I made in a modern way. Like, with SVG.


Even though I’d say most work done by members at Bay View Printing Company is done using the wood and metal type in the shop, the whole point of this polymer plate business is that it allows you to print anything you can design.
The company that makes the polymer plates is called Boxcar Press out of Syracuse, New York. They make this product called the Boxcar Base which is essentially a big ass chunk of metal with a grid on it. In order to print on a letterpress press, the design needs to be “type high” (0.918 inches) and the polymer plates they make are (efficiently) thin.

You stick the plates onto the base and use that in the press:

The Idea
I’m still pretty obsessed with the whole idea of shape morphing. It’s just such a fun thing that SVG can do.
My idea was to morph the CodePen logo into a heart. Awwww. I know. So cute. But obviously there is no animation on paper, so I’d lay out a series of images showing the transition happen in steps.

The Tech
I set up a little shape morphing action using the Greensock add-on for it. There are other JavaScript libraries that do morphing, SMIL can do it, and even CSS is starting to be able to do it now. I still recommend Greensock because:
- It can handle just about any shape you throw at it, regardless of number of “points”
- It’s cross browser (and old browser) friendly
- It’s performant
In this case I used Greensock for another reason: you can add a timeline pretty easily. The timeline was important because I wanted to stop the animation at certain points and extract the vector path data.
See the Pen Heart To CP Badge by Chris Coyier (@chriscoyier) on CodePen.
Now all I have to do is extract the data:

- Stop the animation at the desired point.
- Copy the
<svg>
out of DevTools - Paste into a new file and save it as an `.svg` file
- Open that in Illustrator
Greensock MorphSVG can handle the knockouts in the CodePen logo fine, but I did those manually and separately as I wanted them to kinda visually collapse.
Now I have just what I need in Illustrator:

To Boxcar
Their website accepts files in PDF, EPS, AI formats, which is fine, as I was already in Illustrator. You drag and drop upload them right to the website.

I had to be careful with the black. Default black in Illustrator is a deep mixture of CMYK, not just 0 0 0 100%. It’s best if you force black-only, so when you upload to Boxcar it doesn’t try to make multiple plates for this single color thing.
A couple of clicks later and you’re good to go. Just wait a few days for the plate to arrive.
Printing!
With the plate in hand, and mounted on the base, I was ready to print. I had the idea to fade the color from left to right, like a gradient. As long as I’m morphing the shape, might as well morph the color, right? Turns out that’s called “Rainbow Rolling”, where you ink up half the roller one color and half another color (or really, any number/combination of colors).

Then once you get the rollers going, it turns into a gradient:
I was all ready to pull some sheets!

Thanks
Huge thanks to Ashley Town, who’s the owner of Bay View Printing Company (Facebook / Instagram) and who taught me all this stuff in a two-part class.
And of course, if you want to learn more about SVG in general, I got a book for you.
Impressive mixing of old-school letter-press printing and modern SVG graphics (with animation!). Nice work Chris!
THis looks overly complicated.
The blend tool in Illustrator does exactly what you wanted in just one step:
I just wanted to try something to connect some cool things I was thinking about. Lawd knows artists don’t always take the easy way. Seurat painted giant paintings with little tiny dots .
Not saying I’m artist, just saying I’m all about experimentation and possibility.
And for the record, blending worked great too!
Could have used a potato too…been doing printing (28 years – offset & silkscreen) design & experimenting, including 3D & 3D printing (have 2 printers), SVG & WebDesign, software development and loads more and all I can ask is “why did I read this?”
You should write a blog post about potato printing! I think channeling some that energy and (tons!) of experience into something positive instead of parade-shitting might be a good move.
Loved reading this, Chris! Thank you! I love mixing old and new technology. My father was a printer and my sister is a graphic designer, lamenting the disappearing printing business. I can’t wait to show this to her.
So, so cool! Thanks for sharing, Chris. Your stuff is always a welcome (and often useful!) distraction ;)