I love reading Changelogs - but I hate writing them. Here's what's changed with SuperTinyIcons since I launched it in 2017. It's a project to create SVG logos of popular services in under 1KB. Maximum filesize is 1,023 bytes. New Contributors! What started off as just me noodling around, has now attracted over 60 contributors!…
Continue reading →This SVG always shows today's date
by | | 17 comments | Read ~47,251 times.
For my contact page, I wanted a generic calendar icon to let people view my diary. Calendar icons are almost always a skeuomorph of a paper calendar, but I wondered if I could make it slightly more useful by creating a dynamic icon. Here it is, an SVG calendar which always display's today's date: The…
Continue reading →Super Tiny Website Logos in SVG
by | | 23 comments | Read ~44,754 times.
You may not realise it, but bandwidth is expensive. It costs you time, money, and battery power whenever you download a file larger than it needs to be. That's why I've become a little bit obsessed with SVG - Scalable Vector Graphics. They're the closest thing to magic that the web has when it comes…
Continue reading →Put a test-card at the start of your slides
by | | Read ~407 times.
I do a lot of talks and presentations - sometimes in boring conference centres, sometimes in pubs, and occasionally in the middle of a field. One of the things that I've learned is the audio-visual equipment is unreliable. The colours can be off, the projection can be blocked by detritus on stage, or the screen…
Continue reading →An Animation of Every Emoji
by | | Read ~366 times.
The Video EVERY EMOJI! pic.twitter.com/2fCUqwu67c — Terence Eden (@edent) October 24, 2017 Download the WEBM version (19MB). The Process Mostly notes to myself, but I thought you lot might be interested 🙂 Get Every Emoji from Twemoji Twitter maintain the Twemoji Project - it contains high quality SVGs of every emoji. They generously make them…
Continue reading →The Twitter Logo As SVG Circles
by | | Read ~1,118 times.
Five years ago, Twitter updated its logo and demonstrated that it could be made entirely of circles. Interestingly, the official Twitter logo doesn't use circles directly. So, here is an SVG I've made which is only circles: Or, without the edges, and no transparency: And the raw code: <svg height="100" viewBox="0 0 100 100" width="100"…
Continue reading →How I built a responsive & semantic "Contact Me" page in under 16KB
by | | 1 comment | Read ~8,494 times.Recently, I've become obsessed with the speed and efficiency of my web sites. I'm in the middle of slimming down this blog - but I thought I'd take a first attempt at my contact site - https://edent.tel/ A few weeks ago, the .tel registry released their domain restrictions - users can now host their site…
Continue reading →Selecting Text In Images - Pure SVG, No JavaScript
by | | 1 comment | Read ~1,151 times.
Recently, I wanted to embed an photograph of a book page. I thought it would be nifty if the text from the page could be selected. If you hover your mouse over this image, you should be able to select part of the text. Ideally, it will look something like this... It even works on…
Continue reading →Inkscape - cropping SVG files on the Command Line
by | | 9 comments | Read ~9,628 times.A little post as an aide-mémoire. I've found a lovely set of SVG playing cards. The only problem is each image is displayed within a page. This means the relatively small cards have an enormous white margin. Within Inkscape (the vector image editor for Linux) it's possible to crop the margins by going to: File…
Continue reading →