My blog now has a heartbeat — I it!

For those that are interested in the technical details, read on. The rest of you can stop right here.

tl;dr. In the header and footer, the graphic is a background SVG with embedded CSS scaling the heart element. The standalone hearts also are an SVG, this time with external CSS. In both cases, the CSS controls scaling.

First, I created a PNG of the text and heart with a screen capture from Keynote. Then I used an online PNG to SVG converter, the result of which I edited with a text editor to embed the CSS that animates the heart element. The embedded CSS is based on the hovering heartbeat animation CodePen by Joseph Emmerich. I modified the CSS to add transform-origin: 50% 50% immediately before each transform: scale() style to prevent the heart from moving when its scale changes. Finally, I used image replacement on the title text.

So far, I’ve tested it only on MacOS browsers. It works on WebKit-based browsers (Chrome, Opera, Brave, and Safari), but not Firefox. I still need to test on Windows browsers, and probably add a fallback static PNG for browsers that don’t support background SVGs.

Update. Since creating my first heading image, I created others with a lighter font and decreasing the frequency of animation.

Update 2. Any modern browser now supports background SVGs.

Update 3 (1 Mar 2019). I’ve again changed the appearance of my site, so I have a new header image to match.

Update 4. I continue to update the heading to match my ever-changing theme.