Andrew JD Hudson

Experiments

Sibling Count

  1. Sibling Count Astro

Canvas Experiments

  1. Canvas 1 - Drawing Rectangles
  2. Canvas 2 - drawing circles
  3. Canvas 3 - animating circle around other circle
  4. Canvas 4 - some random squares
  5. Canvas 5 - some random circles
  6. Canvas 6 - click on canvas
  7. Canvas 7 - Spirograph pt.1
  8. Canvas 8 - Spirograph pt.2
  9. Canvas 9 - Zigzag

Houdini Paint experiments

  1. Houdini 1 - Checkerboard
  2. Houdini 2 - Zigzag

Window Postmessaging

  1. Talk to Window

:has() (Chrome / Safari / Edge support)

  1. :has() css demo

Container Queries

  1. Container Queries 1
  2. Container Style Queries

View Transitions - Chromium Browsers only

  1. view transitions 1
  2. view transitions 2
  3. view transitions initiated by Javascript
  4. multiple view transitions 1
  5. multiple view transitions 2
  6. Staggering view transitions
  7. swipe from
  8. swipe to

CSS @scope - Chrome 118+ only so far

  1. Basic Problem
  2. Basic Solution

CSS Anchoring

  1. Dropdown popover Menu positioned with anchor

CSS Scroll Animation

  1. Scroll-driven animation #1
  2. Scroll-driven animation #2
  3. Scroll-driven animation #3

Svelte

  1. Shadow Maker

Carousels CSS-only (Chrome 135+)

  1. Simple Image Carousel - part 1
  2. Simple Image Carousel - part 2 (next/prev arrows)
  3. Simple Image Carousel - part 3 (dots navigation, showing current page)
andrew jd hudson :) •