This week: Emoji List Styles, Side-Scrolling Kaiju, and SVG Tricks
TLDR Newsletter - Byte sized tech news
TLDR is a free daily newsletter for developers with links and TLDRs of the most interesting stories in tech 📱, science 🚀, and coding 💻!Sponsored:
Resolve bugs and website feedback faster
Turn client feedback & bug reports into visual, trackable tasks. BugHerd captures screen shots, video, browser and OS for you to act on.
Last week in the "Patterns" challenge, we played with tessellation. Check out our collection of Pens from week three, including Jackie Zen's animated postcard "Greetings from Santorini!"
Ion Drimba Filho recreates an animation of a marble track by Travis Ragsdale with Three.js and Cannon.js.
Godzilla takes you on a side-scrolling hike through a "few of the things we can destroy for you" in this fun demonstration of GSAP's ScrollTrigger from Tom Miller.
Moving on a Penrose Triangle
Amit Sheen shows all of the possible paths to follow on a Penrose triangle in this mesmerizing CSS animation.
CodePen Radio #325: New Embed Modal
Chris and Stephen talk about the New Embed Modal. We got to re-architect the thing into our modern stack, using all our latest design patterns, and improve the UX of it quite a bit while we were at it.
Pricing UI with PrimeFlex
Mert Cukuren builds a responsive, three-panel pricing table with the PrimeFlex CSS utility library.
Cacheable 3-Color SVGs
Scott Henderson demonstrates how to create a third color in a 2-color SVG by manipulating the opacity of the lighter color.
Confetti with Background Mask
Matteo Bruni demonstrates the party power of tsParticles with a shower of confetti in colors drawn from a masked background image.
Mustafa Enes gives us lenticular summer evening vibes with Perlin noise.
Adam Argyle demonstrates the fun possibilities of a combination of @counter-style, list-style-type, and emoji.
11 Geometric Trees
RodenKerthin plants a sci-fi CSS forest with box-shadow and border-radius.
Metallic Bordered Text with CSS
Shireen Taj dips some bold text in CSS gold with a classy combination of radial and linear gradients, plus background-clip.