Brent Logan

Heartbeat

My blog now has a heartbeat — I <3 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 browser that don’t support background SVGs.

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

<3

Author: Brent Logan

Engineer. Lawyer. WordPress geek. Longboarder. Blood donor. Photographer. More about Brent.

Leave a Reply

Your email address will not be published. Required fields are marked *