CodePen

Build, test, and discover front-end code 💻

CodePen: https://codepen.io/

Last Notes

2026-10-09 21:33:05 GMT

Three nice styles for highlighter-style <mark> elements:
- https://codepen.io/HejChristian/pen/NPbBeqO
- https://codepen.io/cassidoo/pen/JjQOBZB
- https://codepen.io/vii120/pen/KwMBaaY
https://cdn.fosstodon.org/media_attachments/files/117/413/090/635/362/427/original/69b33c03ef11e4a0.png

2026-09-11 16:55:34 GMT

Live streamin' soon! (10am Pacific)
I think we're gonna call it CodePen School. We hang out, build stuff, look at interesting things, try to be educational, etc.
YouTube: https://youtube.com/live/ioOYSdvsax8
Twitch: https://www.twitch.tv/codepen

2026-08-28 21:33:14 GMT

"3D Dancing Bugs" by Grant Jenkins
https://codepen.io/editor/grantjenkins/pen/01a014f5-6f30-7117-8e8e-47962b9ea84c
https://cdn.fosstodon.org/media_attachments/files/117/175/273/669/724/824/original/a2b875665b99a176.mp4

2026-08-24 14:17:04 GMT

"Analog Email Alert" by Zerde Turdybek
https://codepen.io/editor/zerdebek/pen/019ffcaf-a4bd-7436-9063-bea36afa1b94
https://cdn.fosstodon.org/media_attachments/files/117/150/909/850/547/188/original/434c3d1c20c1420f.mp4

2026-08-04 21:33:13 GMT

Just saw https://www.morphicons.com/
6kb library for morphing icons. Works pretty nicely on CodePen.
https://codepen.io/editor/team/CodePenTemplates/pen/019fce35-9f75-7b1a-bcfa-dee24dba5d46
https://cdn.fosstodon.org/media_attachments/files/117/039/378/431/183/018/original/92a01bf00d2f9e35.mp4

2026-08-01 21:33:11 GMT

What if there is a specific file in a Pen you want to use elsewhere? Just grab the URL for it and use it.
Global Assets is more specifically designed for that, though — especially for images where it's got extra superpowers like resizing, quality control, and auto-formatting.
https://cdn.fosstodon.org/media_attachments/files/117/022/391/313/693/986/original/e339e9f0edd9cc30.mp4

2026-05-15 21:33:12 GMT

"Swiper Js Carousel with progress animations" by Timothee Guignard
https://codepen.io/TimGuignard/pen/WbGzRvE
https://cdn.fosstodon.org/media_attachments/files/116/580/731/070/075/563/original/95b388c3aa043d81.mp4

2026-05-14 14:17:10 GMT

"CSS Only Marching Ants Border Effect" by Niklas Knaack
https://codepen.io/NiklasKnaack/pen/vEyKzBY
https://cdn.fosstodon.org/media_attachments/files/116/573/354/293/017/450/original/42b942dd4eea0ec2.mp4

2026-05-13 14:17:09 GMT

"Text Slicer" by Giedre Ju
https://codepen.io/Giedr-Ju/pen/EagJOPp
https://cdn.fosstodon.org/media_attachments/files/116/567/692/028/206/330/original/ace6a8c4933d529f.mp4

2026-04-01 21:33:12 GMT

"Jelly text (Variable Font Physics)" by mike-at-redspace
https://codepen.io/mike-at-redspace/pen/JoRPvpy
(Feels like you could recreate some of the great design at https://follow.art/ with variable fonts!)
https://cdn.fosstodon.org/media_attachments/files/116/331/589/360/494/504/original/d40f374a68189bbc.mp4

2026-02-14 15:17:04 GMT

"Silky smooth toggles volume 2" by Josh Dillon
https://codepen.io/jdillon/pen/QWPLvZe
https://cdn.fosstodon.org/media_attachments/files/116/069/644/483/107/073/original/4d2f3589891b7779.mp4

2025-01-28 15:17:13 GMT

"<pixel-canvas> Web Component" by Ryan Mulligan
https://codepen.io/hexagoncircle/pen/KwPpdBZ
https://cdn.fosstodon.org/media_attachments/files/113/906/641/960/169/918/original/ed8cb2d1edc25d46.mp4

2024-09-12 14:17:04 GMT

Classic great site from Una.
You Might Not Need JavaScript: https://buff.ly/3XDe4DM
CSS alternatives to interactive componentry. Someone could do a fresh take on all these probably with how much fancy new CSS we have.
https://cdn.fosstodon.org/media_attachments/files/113/125/007/169/546/961/original/1a50905583f3c5b9.png