Following on from last year’s cool demos june 2023 I want to showcase some of the cool demos I created in the month of June 2024. I really got in the groove and created a new demo every day for two weeks, each building on the previous.

Having attended CSS Day in Amsterdam I was hungry to apply some of the new skills that had been showcased during the excellent conference.

A word of warning: All of these demos work currently in Chromium-based browsers. I hope that Firefox and Safari will soon support anchor positioning so that these demos will work in all browsers.

• Anchor Positioning to connect two blobs:
• Connecting two points with Mouse clicks. Click on the demo!
• Getting my head around CSS mod()
• CSS mod() v2 - with controls!
• CSS mod() v3 - advanced version with controls
• sin() css wave
• sin() combined with scroll-driven animations. Make sure you scroll!
• Two points linked by anchor-positioning with a diagonal line to connect the two dots - needed to work out how to switch the diagonal line based on the relative positions of the two boxes.
• Balloons on Strings powered by anchor-positioning
• Mouse cursor controlled owner of balloons. Move your mouse!
• Boxes around another box with CSS and maths. Hover the big square!