December 12th: Rings, Rotators, Radios, Reasons, and Redux
CSS Radio Buttons
Tristan White demonstrates a very clean way to replace browser native radio buttons with custom ones with a pseudo element on the label.
Dublin, Ireland Meetup This Week!
Join #CodePenDublin at Accenture Innovation Center on December 14th
A speed-improved perlin and simplex noise algorithms for 2D
Jonathan Cutrell left this unnamed, but it looks kinda like Predator-vision heatmaps only made from a grid of circles on
Companies Use CodePen For Lots of Reasons
It's true. The might have a Team account and work together prototyping and showing clients in-progress work. They might use customized Embedded Pens. They might show off what their product can do. They might use our prefill API to allow their customers to play.
Just a computer with code and stuff
How so many of us spend our days.
Equal Love 🌈
If you're going to use a loader, it might as well be a rainbow heart, right? A lovoader? This one by yumeeeei was really cleanly constructed with nice Jade and Stylus abstractions. Check out their profile too, which has lots of lovely visual experiments.
Martijn Brekelmans left this Pen untitled, but if we could title it, perhaps we'd go with "Kinda like the writings on the One Ring but even awesomer, like the power is escaping into the world." He said it took 4 days to make!
Game of Life (React + Redux)
Interested in learning Redux in addition to React? Need a jumping off point? Peter Daily wroteSponsored:
Go PRO on CodePen
Unlock the full power of CodePen with features like Live View, Asset Uploading, Presentation View, and many more.
Animated SVG Turbulence Filter
Lovely use of
<feTurbulence type="turbulence" ...> by Gabi, inspired by another amazing Pen you'll have to check the Pen's description to see!
Chris is an incredibly prolific illustrator and animator, often working in SVG. His profile is full of a mix of fun, practical, and weird demos, usually with a dash of whimsy. And hey, he's for hire!
Slanted CSS for a more intriguing looking page
How do you set content with sections that are at a slant? As in, not straight horizontal lines across, but those at an angle? This covers the many different ways, good and bad.
Split 3D Carousel
Paul Noble: "A new spin on the carousel pattern with a split panel transition in three dimensions."
ES6 Sampler #6 Odds & Ends
Eugenio Keno Leon's final installment of a 6-part series on ES6. It's set up as a list of challenges with both ES5 and ES6 code presented side-by-side in embeds.