January 20th: Patterns, Projects, and Pulses
SVG Pattern Doodler
"Another simple algorithm which draws patterns and doodles into a svg element. Every time a new work of art is created. Watching is fun. You can save your exclusive work of art on your computer. Play with the values of the variables to create a more independent work of art." From Niklas Knaack.Sponsored:
Serverless Now Became Code-less
Tangram Memory Game
Paulina Hetman's beautiful memory game features animated tangram animals, symbols, and shapes. Click a square to start playing!
Adam Kuhn takes an ordinary email signup form on a wild ride with Squigglevision in this adventurous Pen. Check out the Pen description for an in-depth account of how it was all made.
#CodePenChallenge: Full-Page Navigation
For week two of the January #CodePenChallenge, we worked with full page navigation. Check out the Pens from the challenge, including Olivia Ng's mega-menu "E-Commerce Navigation".
CodePen Radio #251: Marketing
It's January, and that means Chris and Marie are thinking about marketing (again). In this episode we talk about the challenges of marketing and user education for a complex app like CodePen.
All Projects - #100 of #100Days100Projects
Florin Pop set a personal challenge to create 100 projects in 100 days, and this is the result! Scroll through to see the huge variety of work — everything from practical UI pieces to playable games. Congrats Florin!
Product Card - Three JS
Ricardo Oliva Alonso takes inspiration from a Dribbble shot by Ishu Subedi to create a futuristic animated product card with Three.js.
Adam Argyle takes you back to basics with this eye-catching explanation of the CSS box model.
Mobile View Slider | with Swiper
"A little mobile view slider screen. I got my inspiration from some iOS app slider elements and tried to get this into a web-screen. I used the slider-framework: 'swiper'." From Max Kobus.
Pure CSS loader #14/ 2020 - Pulse
Ana Tudor continues a series of intriguing loaders with "the shape blobbing technique plus a bit of mix-blend-mode trickery, plus transforms on the individual items and one of their pseudos. And of course, relies heavily on CSS variables."
Vue.js All-In-One Range & Number Input
Slide the range input or type in a value to rotate the pinwheel in this interactive Pen coded by Viesturs Marnauza, from a design by Līva Raita.
Kevin Levron uses VueJS and simplex noise to create animated SVG paths in this tranquil Pen. Click on the waves to change the color scheme.Sponsored:
An Event Apart
To design a better web experience, attend a better-designed web conference. An Event Apart is three days of design, code, and content taught by absolute masters—the people who shape our medium.