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:

  See the Pen Linking two points with a box. Using Kizu's code from https://kizu.dev/anchor-positioning-experiments/ by Andrew Hudson (@bigandy) on CodePen.

• Connecting two points with Mouse clicks. Click on the demo!

  See the Pen Mouse clicks and anchor positioning by Andrew Hudson (@bigandy) on CodePen.

• Getting my head around CSS mod()

  See the Pen Getting my head around mod() by Andrew Hudson (@bigandy) on CodePen.

• CSS mod() v2 - with controls!

  See the Pen mod() v2 - with controls! by Andrew Hudson (@bigandy) on CodePen.

• CSS mod() v3 - advanced version with controls

  See the Pen mod() v3 by Andrew Hudson (@bigandy) on CodePen.

• sin() css wave

  See the Pen sin() css by Andrew Hudson (@bigandy) on CodePen.

• sin() combined with scroll-driven animations. Make sure you scroll!

  See the Pen scroll-animation sin() (Chrome+) by Andrew Hudson (@bigandy) on CodePen.

• 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.

  See the Pen diagonal lines css (Chrome+) with anchor-positioning by Andrew Hudson (@bigandy) on CodePen.

• Balloons on Strings powered by anchor-positioning

  See the Pen Balloons in Strings (Chrome+) by Andrew Hudson (@bigandy) on CodePen.

• Mouse cursor controlled owner of balloons. Move your mouse!

  See the Pen Mouse + Balloons in Strings (Chrome+) by Andrew Hudson (@bigandy) on CodePen.

• Boxes around another box with CSS and maths. Hover the big square!

  See the Pen Boxes around a box CSS animation by Andrew Hudson (@bigandy) on CodePen.

• Boxes moving around box with lines to center. CSS anchor positioning. Hover the big square!

  See the Pen Boxes around box with line to middle (Chrome+) by Andrew Hudson (@bigandy) on CodePen.

• v2 Boxes moving around box with lines to center. CSS anchor positioning. Hover the big square!

  See the Pen v2 Boxes around box with line to middle (Chrome+) by Andrew Hudson (@bigandy) on CodePen.