I turn 12 on CodePen (npub1sf7…gl68) tomorrow, so after my most hearted demos https://mastodon.social/@anatudor/112511958366259967
... here are 12 of MY personal faves!
1⃣ Pure CSS music toy - this one's a really special one for me https://codepen.io/thebabydino/pen/WNGPjLx
CSS transforms for the 3D, CSS variables for the dynamic shading.
The how behind:
⭐ metallic https://www.youtube.com/watch?v=_CV364uqP3U
⭐ wooden https://www.youtube.com/watch?v=RQX4BBjApeE
#3D #CodePen #geometry #maths #CSS #noJS #transform #code #coding #web #webDev #dev #frontend #webDevelopment
Ana Tudor 🐯 /
npub1ah…kkqax
2024-06-24 18:08:20
Author Public Key
npub1ahnq52t7xsmfypa3t8c4fpprz5m2e5sg4zfsf7lfc9n2n3j5qs6sskkqaxPublished at
2024-06-24 18:08:20Event JSON
{
"id": "69050626e6e97953e6f4e67eff696d095f003b35a669be8982e3a5150b0a7d14",
"pubkey": "ede60a297e34369207b159f15484231536acd208a89304fbe9c166a9c6540435",
"created_at": 1719252500,
"kind": 1,
"tags": [
[
"t",
"code"
],
[
"imeta",
"url https://files.mastodon.social/media_attachments/files/112/672/911/544/622/790/original/063d959f6beb9cb9.mp4",
"m video/mp4"
],
[
"t",
"webdev"
],
[
"t",
"web"
],
[
"t",
"frontend"
],
[
"t",
"maths"
],
[
"t",
"geometry"
],
[
"t",
"dev"
],
[
"t",
"transform"
],
[
"t",
"webdevelopment"
],
[
"t",
"coding"
],
[
"t",
"nojs"
],
[
"t",
"codepen"
],
[
"p",
"827dff3631108ba3a2eb2c455615166c4320e10ce086f31afa6aa657a94ca1db"
],
[
"t",
"css"
],
[
"proxy",
"https://mastodon.social/@anatudor/112672931884308203",
"web"
],
[
"t",
"3d"
],
[
"proxy",
"https://mastodon.social/users/anatudor/statuses/112672931884308203",
"activitypub"
],
[
"L",
"pink.momostr"
],
[
"l",
"pink.momostr.activitypub:https://mastodon.social/users/anatudor/statuses/112672931884308203",
"pink.momostr"
],
[
"expiration",
"1722015173"
]
],
"content": "I turn 12 on nostr:npub1sf7l7d33zz968ght93z4v9gkd3pjpcgvuzr0xxh6d2n9022v58ds48gl68 tomorrow, so after my most hearted demos https://mastodon.social/@anatudor/112511958366259967\n\n... here are 12 of MY personal faves!\n\n1⃣ Pure CSS music toy - this one's a really special one for me https://codepen.io/thebabydino/pen/WNGPjLx\n\nCSS transforms for the 3D, CSS variables for the dynamic shading.\n\nThe how behind:\n\n⭐ metallic https://www.youtube.com/watch?v=_CV364uqP3U\n\n⭐ wooden https://www.youtube.com/watch?v=RQX4BBjApeE\n\n#3D #CodePen #geometry #maths #CSS #noJS #transform #code #coding #web #webDev #dev #frontend #webDevelopment\nhttps://files.mastodon.social/media_attachments/files/112/672/911/544/622/790/original/063d959f6beb9cb9.mp4\n",
"sig": "fa8b9ad7b8c1ebce97883aac059658523560a630e07ba6054b0b12b2eca1feb9d11c07df6ba23bffff037a679f0a4106430f1e7a224a98a2469deefdfaa5f6e2"
}