border-shape chevron nav styled
Una Kravets showcases the border-shape and uses it to create a breadcrumb-style navigation with triangular sides. Simple and easy to code. Note: this demo requires Chrome Canary to work.
Responsive Grid of hexagon without media queries
In a series of experiments, Temani Afif shows what can be achieved using the corner-shape property. This hexagon grid is a great demo, unfortunately, it will only work on Chrome at the moment.
Poll graphic
This demo is not to showcase a current feature, but to ask people for their opinion about a feature to come: multiple borders and outlines. Lea Verou shared it on social media asking for feedback from developers about which option they thought was better.
genuary day 12
As part of Genuary, developers and artists code generative art. Sophia (Fractal Kitty) created these animated spinning boxes with P5.js. They change every time you click on the drawing.
Genuary 1: One color, one shape
Alexander Korotaev‘s entry for the first day of Genuary (more generative art coming up too). This animated star created with vanilla JS and canvas will change every time the page is reloaded.
Generative Ink Blobs
Holland Blumer coded this generative art that reminds of oil colors mixing. It will regenerate into a new random shape every time the page is reloaded or resized (it may take a second to generate, but it’s worth it.) Great work.
Untitled
Another generative art piece, this time by Jacob Foster. These groups of particles move randomly around the screen leaving a trace of color and light after them. They are kind of hypnotic.
Lotus
This neon-looking lotus coded by Shivani can be slightly animated by clicking on it or pressing on the space button. Open or close, it is relaxing looking at the flower spin slowly.
Rigged Stick Walk
Another demo by Shivani. This time it is a study of a sticky figure walking, and the movement can be adjusted using some input ranges. Adjust the elbows, arms, hips, body… I miss an option for the knees, but it is a sticky figure after all.
Three.js: Start / Pause Animation
This animation by Diana Moretti was created for the Start button CodePen Challenge. It includes a Start/Pause button that starts and pauses the animation (thus the name). But the more interesting part is not the button in itself but the infinite loop that spins and can be animated using Three.Js.
