4 ms·

I am always in awe of anyone doing CSS Art. Thank you for sharing this. I know the current 3D graphic scene is frothing over three.js for everything but there

I am always in awe of anyone doing CSS Art. Thank you for sharing this. I know the current 3D graphic scene is frothing over three.js for everything but there is a place for CSS Art to be used and most people forget it or don't likely dive into it as CSS Art is really hard. I wish it was easier. three.js is great for creating big scenes but I see people creating small single character scenes for their website which can be created with CSS too! I have spent a long time trying to recreate some of the amazing codepens I have seen and it takes my whole weekend and its not even perfect then. :( I still think even though internet is ready for it, I don't think majority of the devices connected to the internet are capable to support WebGL properly. Yes, it differs with audience but silos are bad, create websites accessbile for everyone not just your silo perhaps.

techedlaksh 2y ago
I agree that there is novelty in doing CSS Art but due to the fact that it requires a lot of deep dive into nitty gritty-ness of css, devs usually don't prefer it whereas three.js is being pushed from niche 3D artist coder community to mainstream and that might just be a good thing. Saying all that, three.js is not a perfect solution to everything and should be considered with it's pros and cons without creating unnecessary bloated websites.
chilling 2y ago
You can try out my CSS-only bonfire! (: https://megaemce.github.io/Bonfire https://megaemce.github.io/Bonfire
- techedlaksh 2y ago
  This seems like an interesting exercise for css. I saw on the repo that you are using Perlin Noise, but I could not find the algo. Mind sharing where you used it and how ?
  - chilling 2y ago
    You can just check noises' svg for the source code: https://github.com/Megaemce/Bonfire/blob/main/noiseSmall.svg?short_path=178c68d https://github.com/Megaemce/Bonfire/blob/main/noiseSmall.svg... <feTurbulence type="turbulance basically creates Perlin noise.
Bewelge 2y ago
I once built a tool to generate buttons with particle effects using this CSS technique [0]. Always thought it'd be a fun project to build a small "image" editor with basic shapes that automatically outputs them as CSS code. Is anyone aware of any such tools? [0] https://bewelge.github.io/CSS-Button-Particles/ https://bewelge.github.io/CSS-Button-Particles/ (I just checked and the UI looks horrible on mobile. The buttons effects should still work fine though).
- techedlaksh 2y ago
  This was fun to play with and you even had some Physics equations in there.

techedlaksh 2y ago

I agree that there is novelty in doing CSS Art but due to the fact that it requires a lot of deep dive into nitty gritty-ness of css, devs usually don't prefer it whereas three.js is being pushed from niche 3D artist coder community to mainstream and that might just be a good thing. Saying all that, three.js is not a perfect solution to everything and should be considered with it's pros and cons without creating unnecessary bloated websites.

chilling 2y ago

You can try out my CSS-only bonfire! (: https://megaemce.github.io/Bonfire https://megaemce.github.io/Bonfire

techedlaksh 2y ago
This seems like an interesting exercise for css. I saw on the repo that you are using Perlin Noise, but I could not find the algo. Mind sharing where you used it and how ?
- chilling 2y ago
  You can just check noises' svg for the source code: https://github.com/Megaemce/Bonfire/blob/main/noiseSmall.svg?short_path=178c68d https://github.com/Megaemce/Bonfire/blob/main/noiseSmall.svg... <feTurbulence type="turbulance basically creates Perlin noise.

Bewelge 2y ago

I once built a tool to generate buttons with particle effects using this CSS technique [0]. Always thought it'd be a fun project to build a small "image" editor with basic shapes that automatically outputs them as CSS code. Is anyone aware of any such tools? [0] https://bewelge.github.io/CSS-Button-Particles/ https://bewelge.github.io/CSS-Button-Particles/ (I just checked and the UI looks horrible on mobile. The buttons effects should still work fine though).

techedlaksh 2y ago
This was fun to play with and you even had some Physics equations in there.