The gift that keeps on Giving

An experiment in dynamical cartoons.

loading SVG . . .

Background of this cartoon

This is an experiment with dynamic cartoons.

The time I published this cartoon I had not checked the price of Bitcoin and set the ransom too high. The cartoon worked, but it still grated.

Ofcourse getting the right amount for Bitcoins is dependent on the volatile rate of Bitcoins. So I thought it would be nice to have a dynamic text in the cartoon.
This idea stewed a long time in my brain until I decided to make it happen.

How I did it

I think SVG is the way to go for dynamic drawings: it’s made for the Web and the xml structure is easy to modify.
I don’t draw in SVG, so first I had to convert the cartoon. There are plenty of online tools that do that for you with nice results. The result was a SVG of 320K.

My site is a WordPress site, so I could make something in PHP, but the easiest way for me was to make a completely separate page in html and javascript and link it from my WordPress site. After conversion created a specific part in the text with it’s own ID so I could target it from javascript. If you load an SVG externally you can’t target it from javascript (as far as I know) so you have to inline it to your html. If you do that it pays to minimize it (I don’t think you can lazy load parts of your body). An online tool reduced the 320K to 277K, so that helped a bit. But I got some side effects, so for now I’ll just use the unoptimized version. Also the size isn’t optimal for all devices, I haven’t figured out yet how to get it properly responsive. The script does a request to an API that returns the current Bitcoin rate. I calculate from that a €10 equivalent, limit it to a maximum of 8 characters. That value I then insert into the SVG.

If you want to see the original you can visit the following link: Link to the original cartoon


It was a fun thing to do and I already have some other ideas to use the possibilities. But considering the original idea is from 2016 I wouldn’t hold my breath if I was you.

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.