SVG Generator

Several years ago, I experimented with building SVG files based on a repeating pattern. The basic idea was to take a drawn line pattern and repeat it, creating closed shapes. Each shape's color was varied - tint, shade, or color difference. I ended up building a tool to do this, and used it to create the background image on the Resumation login page:

The drawing area was done using a canvas via vue-konva, and then I generated a path for the drawing and rendered it as an SVG. Nothing very fancy.

Updating

I built the tool in late 2021, and, wouldn't you know it - it doesn't build on my machines any longer. There was a breaking change in node verisons (something to do with SSL, if I remember properly), and the old dependencies don't build on any of my dev machines in their current configuration. Instead of trying to get an old version of the dependencies set up, I figured it would be easier to port the logic forward. So, I've set about porting the components up to a new Vue 3 project with up to date packages.

Fortunately for me, vue-konva has an updated package, so this was a relativly straightforward update. The biggest bit of work was uptaking some of the changes in Vuetify between version 2 and 3 - noteably, the output of the <v-color-picker /> component has changed from an object to a hex string.

Images

I need to do some polish on the tool before I publish it anywhere (but that's on the list!), but I find myself playing with the different lines and color options longer than I intend to every time. As an example, here are a handful of quick SVGs I generated tonight using the tool: