[CodePen Spark] Custom Shape()s, Neon Ghosts, and Random Imperfection

No dark-mode styles — this email renders the same in a dark client.

View this issue on CodePen
Advertisement
Build event-driven apps without the overhead
Deliver real-time customer experiences without managing streaming infrastructure. Confluent Cloud provides a secure, fully managed Apache Kafka-based solution for event streaming — directly from your AWS account.
See how Confluent Cloud integrates with AWS tools, including Amazon S3, Amazon Redshift, AWS Lambda, and Amazon Bedrock, to:
Accelerate development: Build real-time data pipelines connected across your AWS tools.
Simplify operations: Offload event streaming management to Confluent Cloud.
Scale in real time: Power event-driven and generative AI apps within your AWS environment.
Get technical details to start building — from step-by-step tutorials and Infrastructure-as-Code templates to a free trial.
Explore Confluent Cloud on AWS ›
Today's CodePen community highlights include two great Pens featuring the CSS shape() function from Matthew Morete and Temani Afif, a ghostly animation in neon colors from Curtis Lawrence, and, from Brecht De Ruyte, an exploration of the playful imperfection the new CSS random() function can add to your design.
link
Embracing Playful Imperfection With The CSS random() Function
The CSS random() function is available now in Safari and coming very soon in Chrome! Brecht De Ruyte wrote about it for Smashing Magazine, and included a great collection of Pens "exploring organic typography, bouncing letters, splayed cards, and a punk fanzine".
pen
Ghosts
Curtis Lawrence brings us a hauntingly good animated ghost Pen just in time for Halloween!
pen
capsule machine 2
Masahito Leo Takeuchi's CodePen community favorite capsule machine is back, this time with squirrel power! Turn the knob to get your prize.
pen
Solar System using :scroll-markers & advanced attr() functions
Chris Bolson takes us on a tour of our solar system and shows us an excellent example of how to use :scroll-marker and new attr() functions along the way. Chromium only, for now.
pen
CSS Sphere Marquee
Maseone combines CSS @property , trigonometric functions sin() and cos() with a bit of advanced attr() action for this marquee-style text sphere. Try out the checkbox controls at the bottom of the preview to customize the sphere.
link
Input Range Slider with Custom Shapes
Temani Afif expands on his wiggly range sliders with a new set combining border-shape , shape() , Scroll-Driven Animations, and @property to produce range sliders with all kinds of different track and thumb shapes.
pen
CSS Single Element Clock with shape()
Matthew Morete makes use of CSS shape() to craft segmented numbers for a working clock animation with the help of a dash of timekeeping JS. Check out the CSS file to see how the numbers shape() up.
collection
CodePen Challenge: Pumpkin Weigh-In
Week three of our Halloween challenge was a party in the pumpkin patch! Check out the collection, including Pens by gymnase , didisoftwares , 3epge , and grauconejo13 . Want to get in on the fun? The final week of the Halloween challenge is on now !
pen
Skeleton Second Line: A Pure CSS Jazz Funeral
CodePen community gem Mark Sottek brings us a bone-chilling skeleton parade loaded with a whole lotta CSS magic, New Orleans style. "Sound on, cher".
pen
Viscous Liquid - Cursor FX
Hover around the Three.js scene in Sabo Sugi's Pen and a mysterious shiny liquid will follow your path. Open up the settings panel up top and you'll find a huge amount of controls you can tinker with!
You can adjust your email preferences any time, or instantly unsubscribe from emails of this kind. Need help with anything? Hit up support . Interested in sponsoring? Here's our sponsorship info .
CodePen 70 SW Century Dr #1019 Bend OR 97702

Accession

nse/codepen/2026-10-26/5060

From

CodePen · support@codepen.io

Sent

26 October 2026 · 21:00 UTC