veganism.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
Veganism Social is a welcoming space on the internet for vegans to connect and engage with the broader decentralized social media community.

Administered by:

Server stats:

293
active users

#codepen

1 post1 participant0 posts today
Alvaro Montoro<p>A really old joke coded in HTML and CSS using (some) trigonometry functions –yes, CSS has a few of those.</p><p>Source code and live demo at <a href="https://front-end.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a>: <a href="https://codepen.io/alvaromontoro/pen/xbwZVLa" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/alvaromontoro/pen/x</span><span class="invisible">bwZVLa</span></a></p><p>Two TIL while coding this:</p><p>- You can add any Greek letter with HTML entities using their name (e.g., &amp;theta;, &amp;psi;...). Even capitalized versions. This may be common knowledge, I didn't know until today.</p><p>- The hypot() function in CSS. I knew other trigonometric functions, but not this one and it was helpful.</p><p><a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://front-end.social/tags/cssart" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssart</span></a></p>
miccaman ✔️<p>Keep on clicking <a href="https://codepen.io/ge1doot/pen/WbWQOP" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codepen.io/ge1doot/pen/WbWQOP</span><span class="invisible"></span></a> <br><a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <br>"I could not stop" ~ Gerard Ferrandez</p>
Fractal Kitty<p>Coded straight lines (38minutes of code) with RC creative coding group prompt. I could go on forever with curves, but stopped myself. </p><p><a href="https://www.youtube.com/watch?v=dpOSCTnKXx4" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">youtube.com/watch?v=dpOSCTnKXx</span><span class="invisible">4</span></a></p><p><a href="https://codepen.io/fractalkitty/pen/LEVqVZK?editors=0010" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/fractalkitty/pen/LE</span><span class="invisible">VqVZK?editors=0010</span></a></p><p><a href="https://mathstodon.xyz/tags/rc" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>rc</span></a> <a href="https://mathstodon.xyz/tags/recurseCenter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>recurseCenter</span></a> <a href="https://mathstodon.xyz/tags/codepen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>codepen</span></a> <a href="https://mathstodon.xyz/tags/creativecoding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>creativecoding</span></a></p>
Fractal Kitty<p>Codepen asked for spirals - </p><p>did I miss any? (no I didn't do ulam - should I?). </p><p><a href="https://codepen.io/fractalkitty/live/MYwzROr/5517a9002126749dc03b84e2eceef51c" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/fractalkitty/live/M</span><span class="invisible">YwzROr/5517a9002126749dc03b84e2eceef51c</span></a></p><p><a href="https://mathstodon.xyz/tags/codepen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>codepen</span></a> <a href="https://mathstodon.xyz/tags/spirals" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>spirals</span></a> <a href="https://mathstodon.xyz/tags/codepenchallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>codepenchallenge</span></a> <a href="https://mathstodon.xyz/tags/cpc" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cpc</span></a>-spirals <a href="https://mathstodon.xyz/tags/math" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>math</span></a> <a href="https://mathstodon.xyz/tags/spirals" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>spirals</span></a> <a href="https://mathstodon.xyz/tags/mtbos" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mtbos</span></a></p>
Ana Tudor 🐯<p>A little something on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span>: pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> icosphere of spheres <a href="https://codepen.io/thebabydino/pen/poYRGmV" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/poY</span><span class="invisible">RGmV</span></a></p><p>Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.</p><p><a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/geometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>geometry</span></a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>maths</span></a> <a href="https://mastodon.social/tags/mathematics" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mathematics</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/recursion" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>recursion</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/transform" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>transform</span></a> <a href="https://mastodon.social/tags/css3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css3D</span></a> <a href="https://mastodon.social/tags/cssTransform" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransform</span></a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssVariables</span></a></p>
iamdtms<p><a href="https://mas.to/tags/Ubuntu" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Ubuntu</span></a> <a href="https://mas.to/tags/logo" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>logo</span></a> <a href="https://mas.to/tags/rotating" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>rotating</span></a> <a href="https://mas.to/tags/codepen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>codepen</span></a> <a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <br><a href="https://codepen.io/iamdtms/pen/XJbmBNZ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codepen.io/iamdtms/pen/XJbmBNZ</span><span class="invisible"></span></a><br>cc: <span class="h-card" translate="no"><a href="https://fosstodon.org/@AKernelPanic" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>AKernelPanic</span></a></span> <span class="h-card" translate="no"><a href="https://ubuntu.social/@ubuntu" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>ubuntu</span></a></span></p>
LogicLuminaryBill<p>🗓️ Thursday Flow | May 15, 2025</p><p>💻 Progress Report:<br>• <a href="https://mastodon.social/tags/Beyond365DaysOfCode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Beyond365DaysOfCode</span></a> Day 137<br>• <a href="https://mastodon.social/tags/100DaysOfCode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>100DaysOfCode</span></a> Day 137<br>• <a href="https://mastodon.social/tags/freeCodeCamp" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>freeCodeCamp</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/TheOdinProject" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TheOdinProject</span></a> <a href="https://mastodon.social/tags/CSSInspiration" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSInspiration</span></a><br>• <a href="https://mastodon.social/tags/DevJourney" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DevJourney</span></a> <a href="https://mastodon.social/tags/FrontendToBackend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontendToBackend</span></a></p><p>📚 Daily Reading:<br>✅ 1 freeCodeCamp article<br>✅ 1 Daily.dev article</p><p>🛠️ Dev Tools Activated:<br>📌 Trello board – updated<br>⚙️ Installed NeoVim on WSL<br>🔄 Refactored BEM in TOP recipe project<br>🔥 Codecademy Flask track – Jinja2 &amp; Forms (42% done)<br>🎥 Watched: How to Build Flask Apps Locally</p>
Christian Alder<p>Just some happy lil toast for this weeks <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a></p><p>CSS animations and a bit of JavaScript for state control. I got to learn about document.getAnimations() which was cool 😊</p><p>CodePen: <a href="https://codepen.io/HejChristian/pen/vEEPbpr" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/HejChristian/pen/vE</span><span class="invisible">EPbpr</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a></p>
LogicLuminaryBill<p>🗓️ Thursday Progress — May 8, 2025</p><p>🔧 Sharpening skills &amp; stacking wins:<br>🔸 <a href="https://mastodon.social/tags/Beyond365DaysOfCode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Beyond365DaysOfCode</span></a> Day 130<br>🔸 <a href="https://mastodon.social/tags/100DaysOfCode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>100DaysOfCode</span></a> Day 130<br>🔸 <a href="https://mastodon.social/tags/freeCodeCamp" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>freeCodeCamp</span></a> | <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> | <a href="https://mastodon.social/tags/TheOdinProject" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TheOdinProject</span></a><br>🔸 <a href="https://mastodon.social/tags/TechGrowth" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TechGrowth</span></a> | <a href="https://mastodon.social/tags/SkillSharpening" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SkillSharpening</span></a></p><p>📖 Daily Practice:<br>✅ Read: 1 freeCodeCamp article<br>✅ Read: 1 Daily.dev article<br>🗂️ Trello board: ✅ Organized and on track</p><p>🎯 Coding Focus:<br>🎨 Adjusted CSS styling on freeCodeCamp<br>✅ Finished the Learn HTML course on Codecademy</p>
Christian Alder<p>This weeks CodePen challenge got me testing the very new, very experimental, very cool CSS Carousel spec.</p><p>Horizontal and Vertical scrolling, ::scroll-marker, position-anchor, and more.</p><p>Demo only works on Chrome 135+ </p><p>100% CSS 🤯</p><p>CodePen: <a href="https://codepen.io/HejChristian/pen/azzWVWL" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/HejChristian/pen/az</span><span class="invisible">zWVWL</span></a><br>Blog Post and more demos from Adam Argyle: <a href="https://developer.chrome.com/blog/carousels-with-css" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">developer.chrome.com/blog/caro</span><span class="invisible">usels-with-css</span></a></p><p><a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
Christian Alder<p>This weeks CodePen challenge got me learning about glowing fungi, jellyfish, and fireflies. </p><p>Amazingly CSS can animate along a SVG path and I am so happy to have learnt about that. 🥳 I thought for sure I would need JS for the fireflies. </p><p>CodePen: <a href="https://codepen.io/HejChristian/full/VYYwqza" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/HejChristian/full/V</span><span class="invisible">YYwqza</span></a></p><p><a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a></p>
Christian Alder<p>Took part in a <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePenChallenge</span></a> this weekend 😊</p><p>Mixed together some SVG stroke animation, 'mix-blend-mode', and inspiration from some of the board games I've been playing recently. </p><p>CodePen: <a href="https://codepen.io/HejChristian/full/RNwXexO" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/HejChristian/full/R</span><span class="invisible">NwXexO</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a></p>
Christian Alder<p>Over the weekend I got an SVG path to animate on scroll, using Anime.js.</p><p>Today I achieved the same effect with just CSS ✨</p><p>The scroll version only works in Chromium-based browsers, but others can see it on hover. </p><p>I also dabbled with a WAAPI Version, which works the same via JS.</p><p>CodePen: <a href="https://codepen.io/HejChristian/pen/GgRaEBx" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/HejChristian/pen/Gg</span><span class="invisible">RaEBx</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a></p>
Christian Alder<p>Gave Anime.js a spin this weekend - just something simple for my first experiment. </p><p>It handled SVG stroke animation really well! and it was good fun to work with. Documentation was great 👌 </p><p>This experiment also got me learning more about SVG filters 🥳</p><p>CodePen: <a href="https://codepen.io/HejChristian/full/LEYvbWP" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/HejChristian/full/L</span><span class="invisible">EYvbWP</span></a></p><p><a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/AnimeJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AnimeJS</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/SVGFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVGFilter</span></a></p>
Christian Alder<p>I'm always forgetting the CSS mix-blend-modes, so I put together a little page to help me remember 😊</p><p>CodePen: <a href="https://codepen.io/HejChristian/full/KwKJdNd/a254d2ff42ba92fb4782207e920af439" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/HejChristian/full/K</span><span class="invisible">wKJdNd/a254d2ff42ba92fb4782207e920af439</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a></p>
Alvaro Montoro<p>A video showing how to create an animated toggle switch with a single HTML element and some CSS:<br><a href="https://youtu.be/w47sRmAM_RY" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">youtu.be/w47sRmAM_RY</span><span class="invisible"></span></a></p><p>And the source code (with some variations) on <a href="https://front-end.social/tags/codepen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>codepen</span></a>: <a href="https://codepen.io/alvaromontoro/pen/MYWmppe" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/alvaromontoro/pen/M</span><span class="invisible">YWmppe</span></a></p><p><a href="https://front-end.social/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>html</span></a> <a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://front-end.social/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdevelopment</span></a></p>
Cavyherd<p><span class="h-card" translate="no"><a href="https://phpc.social/@Crell" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>Crell</span></a></span> </p><p>So on the chance you would tolerate a newbie question:</p><p>I just pulled up Codepen, &amp; was able to dump the php code out of my html file into an html pen, &amp; it comes up in the display window as it should. But it fails when I click "submit" bc apparently there's no way to create the php file?</p><p><a href="https://wandering.shop/tags/php" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>php</span></a> <a href="https://wandering.shop/tags/codepen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>codepen</span></a></p>