I made a discovery: SVG and SVG animations in the browser console are possible!

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.