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

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

It is possible to use SVG images as a console message. Not only that — you can animate them. Has anyone seen this sort of thing before? If so, where? I’m 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, in hopes that others can explore and see what else is possible.
image
Erik Woods Hacker Noon profile picture

Erik Woods

UI Engineer

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:

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.