On/Off With Special Transitions
codepen.io/jkantner/pen/K… CodePen.IO #SVG #JS

Gem Cuts 💎 (933 bytes) #PetitePatterns on CodePen.IO

codepen.io/finnhvman/pen/…

My latest pen continues exploring animating several small SVG shapes, this time using the amazing GSAP animation library, with some pretty awesome results 🤓

Silky smooth SVG link effects with GSAP:
codepen.io/jdillon/pen/Po…

CodePen.IO #js #css #gsap

With the latest additions, I made it to over 100 toggles in the #codepen collection.
codepen.io/collection/aMP…

CSS scroll-timeline animation of text rotating on a 3D arc. Text styled using CSS 3D transforms using a custom element < arc-text>

Code and demo via CodePen.IO
codepen.io/paulnoble/pen/…

Pure CSS random Truchet tiles codepen.io/thebabydino/pe…

If you're a patron on Patreon, you may have seen I've done tens of these. Here's now one for this week's #CodePenChallenge . The CSS filter is used to smoothen/ round corners. Also: CSS trigonometry for pseudo-random rotation.

A demo for icon animation I did for a client, it uses Material Design Icons and it follows Material Design 3 guidelines.

Here's the CodePen.IO
codepen.io/Adir-SL/pen/bG…

The May #CodePenChallenge starts now!
This month is all about filters 🤩
Let's kick it off with CSS Filters
codepen.io/challenges/202…

Light and dark mode illustrated with plugs
codepen.io/jkantner/pen/X… CodePen.IO #SVG #JS

'Embed' by Rogie

codepen.io/rogie/pen/wvZO…

New CodePen.IO : Fire Shader.
I needed a fire shader in The Cursed Library, so I thought it would be interesting to deconstruct the techniques behind. Made with Three.js and custom shaders. #webgl
🔗link to the codepen at the end of the thread 🧵⬇️

Gearing up towards the weekend... 🙃

Live demo and full code CodePen.IO: codepen.io/amit_sheen/ful…

'single div CSS - Computer (animated)' by Arman Borkhani

codepen.io/armanb/pen/LYa…

I’m enjoying creating several parametric surfaces with three.js during the consecutive holidays.

Hovering over each geometry displays wireframe mode.

Demo : codepen.io/wakana-k/full/…

CodePen.IO #codepen #threejs #parametric

'Text-Animation-test' by Metty

codepen.io/Metty/pen/yLrZ…

'Doom Scroll - Front End Conf 2024 Demo' by Adam Kuhn

Just... wow.

codepen.io/cobra_winfrey/…

'Scratched Folder (CSS, SVG)' by Konstantin Denerz

OOooOo the 'scratches' are programmatic .

codepen.io/konstantindene…

'grid' by Tom Hinton

codepen.io/TomHinton/pen/…

Great way to learn how HTML and CSS work?

Make games.

This is all HTML/CSS to understand the Popover API 👇

Each wave is a [popover] and the Golden Bear opens a new [popover] keeping the chain alive 😅

'3D CSS && Scroll-Driven Laptop Flip' codepen.io/jh3y/details/p…

Incredible CSS work (all scroll-driven animations, no JS!) by Jhey.