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

5,685 reads

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:

Proof of concept showing SVG animation in the JS console (Chrome and Safari). The actual animation was not mine, however. That was pulled from CSS Tricks.

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.

Tags