This is from last year when I tried to recreate Rach Smith's P5.js animation using CSS. The animation seemed like it could be implemented in a breeze, but there's an illusion of simplicity. The process of manually updating the positions and directions of each box was a bit tricky.
Hi, I'm Chuan.
I'm a web developer with a passion for design, programming languages, and creative coding.
Currently building css-doodle in my free time. You can also find me on
GitHub,
CodePen,
Twitter,
and Mastodon.
Artwork
-
Cover Artwork for Album Remeridian (2020.12) -
Glide, CSS & SVG (2020.05.16)
Posts
- CSS Animation with offset-path 20 Mar 2025
-
2024
- An Introduction to css-doodle 02 Dec 2024
- Generating images from css-doodle code 15 Oct 2024
- Adding a shortcut for hue-rotate() 24 Aug 2024
- Time-based CSS Animations 05 May 2024
2023
- Fun with stroke-dasharray 27 Sep 2023
- Simplifying CSS Variable Calculations 13 Sep 2023
- Daily Sketch 4 - OpenAI Cover Images 08 Mar 2023
- Daily Sketch 3 - Latin Square & Grid Numbers 21 Feb 2023
- Daily Sketch 2 - Symmetry 17 Feb 2023
- Daily Sketch 1 - Warming up 14 Feb 2023
- SVG viewBox padding 08 Feb 2023
2022
- Experimenting A New Syntax To Write SVG 27 Sep 2022
- Dreamy Blur 05 Sep 2022
- Using mask as clip-path 18 Feb 2022
2021
- Pixel Patterns 14 Dec 2021
- Flip, Invert, and Reverse 13 Nov 2021
- Polygon Shapes 30 Oct 2021
- Time Uniform For CSS Animation 29 Jan 2021
- How To Make Seamless Patterns 04 Jan 2021
2020
- Add Shaders 30 Dec 2020
- What's new in css-doodle 20 Dec 2020
- Multiple drop shadows 08 Aug 2020
- Single div Sierpinski triangle 07 Feb 2020
2019
- I Like To Build Things That Way 06 Dec 2019
- Chinese Window Lattice And CSS 15 May 2019
- Reduce in JavaScript 04 Mar 2019
2018
- A Note for Problems 06 Jul 2018
- More Unicode Patterns 02 Jun 2018
- Unicode Patterns 06 May 2018