Goeey Clock
Konstantin Denerz combines HTML and SVG filters to create a clock with a satisfying liquid/goeey effect, in which the clock arms and dashes combine combine as they move. Motion warning: the clock speed is accelerated so the effect is visible.
Fitness Tracking App
This is a nice design/proof of concept of a training app created by Gemma Croad. The animations and transitions are smooth, the color palette is clean, and the geneal design looks a lot better than most fitness apps I have tried. Really nice job.
Customizable Select
Styling the element was not possible until recently. This new feature is only available on Chrome Canary and Sarah Frisk created a demo to experiment and showcase how the new styling works.
Prism
Creating light effects with CSS is possible but not an easy task. That's what makes Wakana Y.K.'s demo impressive. Developed as a small CSS library, Prism allows adding as many light effects as you want (it requires a little code update.)
Assemble a broken image
Temani Afif is able to do magic with a single HTML element. To view an example, hover over the image and see how it expands and collapses, mending the broken image. A cool effect that could be combined with other elements (like buttons) to make interactions more interesting.
Super easy flexy flex layouts
Ana Tudor is really active on Reddit where she helps people with CSS questions. In this demo, she shows how to spread divs over multiple rows using FlexBox, in order to create different layouts. Something cool: the code is a handful of lines of code... including comments!
pi chart
For Pi Day (3/14), Sophia (fractal kitty) coded a pi chart with a representation of the number Pi using P5.js. Just relax and watch as the disc populates with colorful dots.
waves over my range
Amit coded a cute range component with a boat as the value indicator. The demo is a good example to learn about the @property in CSS, as well as custom properties and animations.
Fumigation Frenzy
As part of a "bug" CodePen Challenge, Matt Cannon took a different approach and coded a game with HTML and JavaScript (without canvas or game/animation librarys). Spray as many bugs as you can before you run out of gas!
Animated navigation
Josh Dillon has shared a collection of components with beautiful "glitchy" transitions. This time it is a navigation menu that uses GSAP to animate an SVG background when selecting a new option. Click around and enjoy it.
If you liked these demos, checked out the previous edition of this series.
Top comments (0)