Tag: animation

  • Heartbeat

    Heartbeat

    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.

    Brent Logan

    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.

    Brent Logan

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

    Brent Logan

  • Too much time…

    Too much time on their hands…

    Hat tip: Roger.

  • Flight Patterns

Search

Stuff

Made with

in

to

Copyright 2004-2024 Brent Logan

Thanks for visiting!

Brent Logan