Direct link to the article Simple Interactive Pie Chart with CSS Variables and Houdini Magic

Simple Interactive Pie Chart with CSS Variables and Houdini Magic

I got the idea for doing something of the kind when I stumbled across this interactive SVG pie chart. While the SVG code is as compact as it gets (a single <circle></circle> element!), using strokes for creating pie chart …

Avatar of Ana Tudor
Ana Tudor on (Updated on )
Direct link to the article 1 Element CSS Rainbow Gradient Infinity

1 Element CSS Rainbow Gradient Infinity

I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise. The gradient doesn't look like in the original illustration, as I chose to generate the rainbow logically instead of using the Dev Tools picker or something like that, but other than that, I think I got pretty close—let's see how I did that!
Avatar of Ana Tudor
Ana Tudor on (Updated on )
Direct link to the article Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

I recently came across this Pen and my first thought was that it could all be done with just three elements: a wrapper, a range input and an output. On the CSS side, this involves using a conic-gradient() with …

Avatar of Ana Tudor
Ana Tudor on

Conical Gradients in CSS

When I create filters, shadows, transformations or gradient backgrounds in CSS, it feels amazing. Who would have thought CSS would come this far. No need to use images for any of that stuff. I can almost hear the browser telling …

Avatar of Shankar Cabus
Shankar Cabus on (Updated on )