Plaid Swatch Generator
Sometimes you’ve gotta make time to build something fun, today I whipped up a Plaid Swatch Generator!
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.
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 and moved on.
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.”
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.
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
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 a try and let me know what you’d like to see added!
Have some thoughts or feedback about this blog post?
Get a conversation started on LinkedIn or Twitter, or send me an email.