Posts tagged "SVG"

4 posts
A detail section of this blog’s header image featuring a cartoon illustration black and tan dog with a red bandana on a blue background with falling autumn leaves, rain, sound waves, and letters spelling "KING" on the left side of the image.

Autumn is here!

| In Tech
| 9 minute read

Quite literally: this blog is now officially in autumn mode! 🍂

During our summer vacation, while watching over our dog Elvis, I spent some time doing recreational coding on the balcony of our vacation home in Sottomarina, Italy. The result is a seasonal bit of JavaScript/SVG animation for this blog’s header, which you can now enjoy on the main page, constantin.glez.de. But only during the autumn months, of course!

What started as a simple idea to add variety to my header turned into a 903-line journey of learning physics, mastering SVG patterns, and discovering just how much fun coding can be when there are no deadlines or requirements—just curiosity and Claude as my sparring partner. 🎯

Here’s what I learned along the way:

A black and tan dachshund named Elvis sitting on wooden flooring, wearing a pink bandana with watermelon print. He has soulful dark eyes, floppy ears, and is looking directly at the camera with an alert, friendly expression.

Welcome Elvis to this blog!

| In General
| 8 minute read

Over the last few days, I’ve been working on putting Elvis, our Dachshund, onto this blog’s banner. The goal was to create a smooth animation where Elvis appears by rising from the bottom of the banner, then leans his paws over the border—adding some personality to the site while exploring modern web animation techniques.

A dreamy, ethereal landscape with soft pink and purple clouds in a pastel sky. Flowing sine waves made of code characters weave through the scene in translucent ribbons of light, creating gentle wave patterns. Several colorful butterflies - including blue, purple, and pink ones - flutter gracefully across the composition. The overall mood is serene and fantastical, blending programming elements with natural beauty.

Animating SVG with plain JavaScript and CSS

| In Tech
| 5 minute read

Refactoring my banner into SVG was only the beginning: the next step was animation. I continued with the “AI as a teacher” model and asked Claude to explain to me concepts like IIFE, how the browser’s DOM processes SVG elements, which SVG properties are GPU-accelerated and other CSS performance conc…

Abstract digital landscape with flowing wave-like forms in vibrant magenta, purple, and cyan colors, overlaid with glowing geometric patterns and data visualization elements against a starry black background.

This time I coded it myself: using AI as a teacher

| In Tech
| 7 minute read

If you’re a returning visitor, you might notice the header image on this blog looks more sharp and crisp—that’s because it is! ✨ After creating my own URL shortener, I wanted to modernize my header image. I built it back then in 2022 using p5.js, but the resolution wasn’t great. Now I wanted a more …