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 applications for doing it — it’s just kind of fun to mess around with. practical 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) can be used for styling, but several properties are ignored — like in Chrome/Safari (Firefox was fine) CSS height 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) works! But are there limitations on this? I don’t know yet! I’ve tried a few different ones and they worked! SMIL animation As you are testing the SMIL , 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]) animation Here is the very, very messy JS I wrote to achieve the results in the screenshot: The spaces seen after are being used in this case to “fix” the fact that Safari wants to repeat the background when you use . I’m using to help with sizing the area shown, because doesn’t seem to work (even if I use and ). %c padding-left: 100% font-size height display 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. Or, if I know you in real life, hit me up so I can refer you. And definitely check out . Check out our careers page! Rocket Mortgage Currently playing for Xbox One. Mass Effect: Andromeda Currently listening to by Rotting Christ. Rituals
![10 Best Anime Websites to Stream & Download [Free + Paid]](https://hackernoon.imgix.net/images/TggSxk7kWsMlczkuVtR0LstDzEG3-1993oxm.jpeg?auto=format&fit=max&w=3840)
