Sometimes it's good to create something just for the fun of it without a clear end goal in mind. It might not lead to something you can use but if not you'll enjoy doing it and learn something along the way.
Photo by Greyson Joralemon on Unsplash
In our apps we have profiles for people which use some of the very nice illustrations Bluegg created for us. For example, here's a contractor.
I need to create a landlord profile so I needed an icon for a landlord, but we don't have one right now. So rather than bust out photoshop to draw a new one, which wouldn't have looked as good as our current ones, I decided to cheat.
The power of SVGs
Where possible we try to use SVGs for all our icons and illustrations, this means they scale and look great on any screen size. The file sizes stay small you can also can manipulate them in a text editor.
So I copied the contractor SVG and changed the colours manually to alternative colours from our brand palette. To finish it off I mirrored the SVG with
transform: scale(-1,1) so it doesn't look exactly the same. And now we have our ginger landlord in his bright red suit (not based on a real person!).
This took a few minutes to do so I wondered if I could do something more interesting. I didn't really want to have to open a text editor every time I want to adjust the colours of an SVG. So I thought maybe I can just do it on the fly.
Preparing the SVG
You might have noticed I only changed 2 colours in the illustrations and I want to be able to change these without editing the SVG. So to help me change them I need add a
class to the correct elements so the hair is
primary and the suit is
secondary. This gives me a "hook" to be able to change the SVG without touching it directly.
Which means I can do this... 😂
Not very helpful but it gave me an idea.
(Sort of) Custom Avatars
It would fun to be able to customize these illustrations to fit your own preferences and maybe use them as your avatar in the system. I've already got 3 things you can change
- Primary colour - for the beard and eyebrows
- Secondary colour - for the jacket
- Direction - so he can face left or right
I deliberately made these fairly generic so they could be applied to different illustrations as you might want someone other than the beardy bloke for your avatar.
I created a simple UI to change the avatar and added a few more options, like moving eyebrows and then end result look a bit like this.
I particularly like when it does "Go Crazy", looks a lot like an animated Picasso.
I built it using Aurelia and it makes heavy use of CSS Variables so it's easy to update the colours without too much effort. I'll get into how I built it in another post but you can dig around in the repo if you'd like to play with it yourself.
A new feature
What started as a bit of fun might be a nice feature to develop in the future so we can give people the option to set a custom avatar if they don't want to upload a picture.