The stroke-dasharray attribute in SVG is more flexible compared to the dashed style in CSS.
While there are numerous articles and examples about its usages,
including Line animations,
Pie charts,
Circular progress bars,
or even Hamburger menu icons,
there's still something new to explore.
Hi, I'm Chuan.
I'm a web developer with a passion for design, programming languages, and creative coding.
I'm currently building css-doodle. 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
-
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
- Experimenting A New Syntax To Write SVG 27 Sep 2022
- Dreamy Blur 05 Sep 2022
- Using mask as clip-path 18 Feb 2022
- 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
- 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
- I Like To Build Things That Way 06 Dec 2019
- Chinese Window Lattice And CSS 15 May 2019
- Reduce in JavaScript 04 Mar 2019
- A Note for Problems 06 Jul 2018
- More Unicode Patterns 02 Jun 2018
- Unicode Patterns 06 May 2018