SVG Plaid Swatch Generator
Tags: svg, generator, frontend, design
Published: 2023-04-24 13:38:09

---
title: SVG Plaid Swatch Generator
published: true
date: 2023-04-24 14:00:00 UTC
tags: svg,generator,frontend,design
canonical_url: https://stevenwoodson.com/blog/plaid-swatch-generator
---

 ![](https://content.walnutcreekcreative.com/stevewoodson/wp-content/uploads/sites/3/2023/04/Plaid-Swatch-Generator.png)

Sometimes you’ve gotta make time to build something fun, today I whipped up a [Plaid Swatch Generator](https://stevenwoodson.com/plaid-generator/)!

## Background

I built up my personal branding centered around the use of various plaid color combinations. I wanted all my projects to have unique color palettes but a distinctive style that was immediately apparent. For example, below are four of the logos I’ve created.

![Four logos that Steve had created, in clockwise order from top left is the logo for StevenWoodson.com with lots of shades of greens, then Be Inclusive with pinks and purples, then Plaid & Peppers with browns and reds, and finally Accessibility Solutions with reds and blues.](https://content.walnutcreekcreative.com/stevewoodson/wp-content/uploads/sites/3/2023/04/personal-branding-1024x512.png)
_Some examples of my personal/professional branding_

Early on, I was able to figure out how to get this to render as an SVG so I had more options for manipulating and so the plaid was always as performant and crisp as possible. I built [a quick CodePen of it](https://codepen.io/stevenwoodson/pen/VgJYNJ) and moved on.

## Impetus

I had a laundry list of things to do today, but I didn’t have much motivation so I was looking around CodePen (as you do) and came across the plaid Pen I had noted above. It sparked a thought “hey this could pretty easily become a cool plaid generator, I’d just need to figure out how to change the colors dynamically.”

## Build

The dynamic color updates ended up being the main chunk of work here. Once I got color input elements added to the page and wired up with a bit of JavaScript, changing the fill of the related SVG rectangles was pretty straightforward.

I figured out how to get the colors to reflect in the example as you pan through the color wheel too, making choosing colors pretty intuitive as long as your browser supports more modern color picker options.

## Easy Sharing

![Nine plaid swatch examples with widely ranging colors. Easily generated with this plaid swatch generator!](https://content.walnutcreekcreative.com/stevewoodson/wp-content/uploads/sites/3/2023/04/swatch-examples-1024x1024.png)
_Check out some of the ones I generated as I was testing!_

Since the main chunk of work wasn’t too bad, I set my sights on making this as easy as possible to grab and share. So I’ve added:

- a download button, so you can get an SVG of your creation straight away
- a URL auto-update to match your choices, making it easy to bookmark or share too

## Feedback?

I have some other ideas for this, but wanted to make sure I kept it to an afternoon of hacking away. I do want to revisit it and refine with more, so give the [Plaid Swatch Generator](https://stevenwoodson.com/plaid-generator/) a try and let me know what you’d like to see added!