Skip to main content

Creating pairs of interlocking rainbow hearts 🌈

Here’s a fun project I made today: create pairs of interlocking rainbow hearts: http://rainbow-hearts.glitch.me

The app makes transparent SVGs based on pride flags, which you can resize and drop on top of any background. Here’s a few examples:

Two interlocking hearts. The left heart is the colours of the asexual pride flag (black, grey, white, purple), and the right heart is the colours of the aromantic pride flag (dark green, light green, white, grey, black).
Two interlocking hearts on a dark background. The left heart is the colours of the rainbow pride flag (red, orange, yellow, green, blue, purple), and the right heart is the colours of the trans pride flag (baby blue, baby pink, white, baby pink, baby blue).
Two interlocking hearts. The left heart is the colours of the black trans pride flag (baby blue, baby pink, black, baby pink, baby blue), and the right heart is the colours of the bi pride flag (dark pink, purple, dark blue).

This idea came from a similar graphic I made for Valentine’s Day. I used several tools to make it, and I had to assemble the final result by hand – I wanted to see if I could create a pair of interlocked hearts as a single SVG.

Last year, I made an app for generating rainbow Norse Valknuts, and I was able to reuse some of the code – although those were easier to draw then hearts. Valknuts use all straight lines, so I could calculate exactly where each stripe should start/end. Because hearts have curved sides, I had to do a bit more work to draw the overlaps.

I experimented with a combination of SVG clips and masks to get the final effect, and this was a fun project to learn how they work. I write SVGs by hand, rather than using an app like Inkscape or Illustrator – so understanding the core primitives is really useful. I did learn a few useful things, which I’ll write about as a separate blog post.

You can create your own hearts at http://rainbow-hearts.glitch.me, and you can read the source code on GitHub.

There is more that unites the LGBTQ+ community than divides us, and I like these hearts as a visual reminder of that.