dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript. It’s based on domvas by Paul Bakaus and has been completely rewritten, with some bugs fixed and some new features (like web font and image support) added.
Favicons are actually at their most useful when you’re not active on a tab. Here’s an example:
Imagine you’re backing up photos from your recent summer vacation to a cloud service. While they are uploading, you’ve opened a new tab to gather details about the places you went on vacation to later annotate those photos. One thing led to the other, and now you’re watching Casey Neistat on the seventh tab. But you can’t continue your YouTube marathon without the anxious intervals of checking back on the cloud service page to see if the photos have been uploaded.
It’s this type of situation where we can get creative! What if we could dynamically change the pixels in that favicon and display the upload progress? That’s exactly what we’ll do in this article.
In supported browsers, we can display a loading/progress animation as a favicon with the help of JavaScript, HTML
<canvas>and some centuries-old geometry.
While the article primarily deals with a square favicon, the author also provides code for a circular favicon as well.
Now browsers have audio. They have video. They even have WebGL and VR. And all those technologies work on mobile. The writing’s been on the wall for Flash for a while. Yet still, I’m sad to see it go. It was a brilliant crucible of creativity. A forge for many emerging artists in the field of creative coding, and many of the concepts from Flash and ActionScript were the proving grounds for their modern browser equivalents.
I’ll be looking back fondly on those years, rather than spitting on Flash’s grave. And as we see the last of the great browser plugins disappear* I hope you’ll join me in celebrating the creative culture that it nurtured.
*RealPlayer 4eva!
Stuff in Space is a realtime 3D map of objects in Earth orbit, visualized using WebGL.
The website updates daily with orbit data from Space-Track.org and uses the excellent satellite.js Javascript library to calculate satellite positions.
This is an impressive, if a little graphics-intensive, Canvas-driven effect.
A WebGL 2 demo that’s fun to watch as the particles move around.
An interesting look at what’s possible with WebGL these days. The graphics aren’t as detailed as they could be, but I suspect that’s more to make it run smoothly on lower end hardware than a limitation of the technology. More information in the source link below.
