I wanted to write about this ASAP, because I’m curious to know if anyone has done this sort of thing before. Also because I’m excited AF about it.
Through a series of accidents, testing, researching, etc, I have discovered that it is possible to use SVG images as a console message. Not only that — you can animate them. Here’s what I’m talking about:
My mind was blown when I discovered this. Has anyone seen this sort of thing before? If so, where? Super curious to see what (if anything) someone has done with this. I can’t think of any super practical applications for doing it — it’s just kind of fun to mess around with.
I want to share how I did this!
I want to share, in hopes that others can explore and see what else is possible and we can learn from each other. First, you have to realize: I’m in very early stages of this discovery. I have no idea if I’m doing something stupid or missing anything obvious. So be gentle, will ya?
I think I see several limitations and quirks:
- It doesn’t seem possible to have HTML elements in there (to show an image or create a link or something)
- CSS can be used for styling, but several properties are ignored — like height in Chrome/Safari (Firefox was fine)
- CSS keyframe animations seem to be a no-go
- CSS transitions work (if I remember correctly), but try doing something useful with it — I couldn’t — it’s not like you can target specific elements or use pseudo selectors (as far as I know)
- Using an svg as a background image totally works, but only in Chrome and Safari (as far as I know)
- Using a base64 image also works
- Safari wants to repeat the svg background image even if you use no-repeat
- If you include a text message with your image, you have to “position” it away from the background by using padding (or a newline maybe?)
- If you include a text message that also has a URL in it, the svg image will be shown right before the URL in addition to the first instance (almost as if it’s pulling in all of your styles again)
- SMIL animation works! But are there limitations on this? I don’t know yet! I’ve tried a few different ones and they worked!
- As you are testing the SMIL animation, you cannot always simply refresh the page to see your changes — sometimes you have to close and reopen the dev tools ([cmd+option+i] for macOS])
Here is the very, very messy JS I wrote to achieve the results in the screenshot:
The spaces seen after %c are being used in this case to “fix” the fact that Safari wants to repeat the background when you use padding-left: 100%. I’m using font-size to help with sizing the area shown, because height doesn’t seem to work (even if I use display and width).
So what do you think? Is it awesome? Am I crazy? Has this been done before and I’m just behind? Let me know in the comments. :)
You can ignore this image — it’s just for the thumbnail. :p
Here are some other fun bits:
- Quicken Loans is hiring right now — we need a lot of different types of people. Check out our careers page! Or, if I know you in real life, hit me up so I can refer you. And definitely check out Rocket Mortgage.
- Currently playing Mass Effect: Andromeda for Xbox One.
- Currently listening to Rituals by Rotting Christ.