|
| |
|
Cut-Corner Buttons, JavaScript Ferns, and a chat with Jhey Tompkins Welcome to 2022! We spruced up The Spark a bit, hope you like the new look :) This week, Temani Afif shows us how cut corners can be cool (on buttons). Dillo takes us on a JavaScript botany field trip to learn about Barnsley ferns. And CodePen co-founder Chris Coyier sits down with superstar community member Jhey Tompkins for a chat about Jhey's creative process.
|
| |
|
|
Barnsley Fern Playground Dillo demonstrates the beautiful geometry of Barnsley ferns with an interactive Pen.
The Pen's description gives a tutorial on the affine transformations that form the fern.
|
| |
|
|
|
DigitalOcean App Platform DigitalOcean App Platform is a Platform as a Service solution that helps you build
modern, cloud-native apps for a lot less money. We’ll handle the infrastructure, app runtimes and dependencies, so that you can push code to production in just a few clicks.
|
| |
|
|
|
Out-of-Bounds: Generating and disposing of objects in Three.js and Cannon.js "Properly disposing of objects to
free up memory is vital in a WebGL application. As the balls fall over the edge, we rapidly and proportionally decrease their opacity, and when the opacity reaches zero, we dispose of the material and geometry and remove them from the physics world and render lists." From HoraceShmorace.
|
| |
|
|
|
CodePen Radio #334488: With Jhey Jhey Tompkins is one of the most prolific CodePen creators out there! His
creations tend to have a twist of whimsy while being beautifully designed as well as pushing the platform in unique ways. You’ll always be surprised at a Jhey Pen! Chris talks with him about the creative process, problem-solving, and sharing what you learn.
|
| |
|
|
.png)
|
Secure Apps Automatically We create, manage and renew your SSL certificates and also protect your apps from
DDoS attacks. Focus on what matters the most: building awesome apps. Let us handle provisioning and managing infrastructure, operating systems, databases, application runtimes, and other dependencies.
|
| |
|
|
|
Based on Moirémotion Toshiya Marukubo pays tribute to the interactive print book "Moirémotion" by Takahiro
Kurashima in JavaScript. Hover to move the moiré panel over the background and create the illusion of animation.
|
| |
|
|
|
Generative Snowflakes "Every snowflake is individual". Huge, colorful flakes fall and accumulate in this
generative snowstorm built with Cannon and Three.js by Lea Rosema.
|
| |
|
|
|
The Matrix Resurrections This minimal take on The Matrix series' iconic green lines of code is #26 in a series
of CSS/JavaScript "digital posters" from Sparklingman.
|
| |
|
|
|
|
Best CSS 3D Cuboid Ever "How many DIVs do we need to make a cube? Seven? Six? Probably three? NO. Two DIVs are
enough not only to make a cube but also to make a flexible cuboid. Here is a demo Pen showing how we can do that". From S. Shahriar.
|
| |
|
|
|
Cut Corner Cool Button Can't go wrong with a cool button! Temani Afif shares a trio of button styles with "No
extra element, No pseudo element. Easy to adjust using CSS variables".
|
| |
|
|
|
Build and Deploy Apps at Scale Simply point App Platform to your Github or GitLab repository and let it do all
the heavy lifting related to your infrastructure. Build, deploy, manage, and scale apps • Support for Node.js, Python, Go, PHP, Ruby, Docker, static sites, and more • Zero infrastructure management • Highly scalable
|
| |
|
|
|
Moon Surface (416 Bytes) #PetitePatterns Bence Szabo creates a moon surface pattern as the final piece in a
yearlong personal challenge, #PetitePatterns: "to create a unique organic pattern or texture each week in pure SVG. Size limit was 560 bytes (2 tweets)." Congrats, Bence!
|
| |
|
|
|
#CodePenChallenge: Flip Flip through our collection of Pens from the final week of the December "Animation
with GreenSock" challenge, including Manolis Kalafatis' flippin' clever anagram.
|
| |
|
|
|
Scale Apps, Not Costs Keep costs low and easily optimize resources and costs as you scale apps. By running App
Platform on DigitalOcean’s infrastructure, we make it simpler for you to control costs. Build, deploy, and scale apps and static websites faster and easier than ever using a simple, intuitive interface. Get started for FREE!
|
| |
|
|
|
Single Div Flickering Neon Text Sometimes, a little nudge is all you need. anniebombanie shares a CSS text
animation with a friendly reminder on the first step of any important process: just start!
|
| |
|
|
|
FizzBuzz Noah Raskin gives the infamous coding challenge "FizzBuzz" a stylish reset with this tidy table
of results.
|
| |
|
|
|
|
| |
|
CodePen PRO
| |
| Need to make a Pen, Project, or Collection private? That's just a toggle away with CodePen PRO. Prefer everything you make is private by default? No
problem. And if you are the type that makes private things and then makes them public when they are ready, you're in luck. That first private-to-public switch is when we send the Pen to the feeds.
|
| |
| |
|
|
