I know a lot of people don’t like CSS all that much and some actually hate writing CSS. But CSS can be pretty awesome, for example, these are all made using CSS only.
I made these images through a daily challenge (created by Mike Mangialardi) in order to get better at CSS and learn how to use Sass (a CSS preprocessor). As you can see you can do a lot of cool things with CSS and hopefully this will inspire some of you to work more with CSS and maybe even start this challenge as well.
You might be curious about how images are made with CSS, which is why I’ve started recording my coding and a few videos are now available on my YouTube channel. All my images are also on Codepen and Mike has made some great posts about how to get started making CSS images. So if you find this interesting, check it out!
Here is the speed code of an owl I made yesterday!
So, if you have any questions about this, please don’t hesitate to ask. I’m also available on Twitter and of course here on the forum. To see more of my work, like the freeCodeCamp projects I’ve done, you can also check out my portfolio!
I’ve been doing those too! I’m really gutted that he’s closed down the site now, so I’m hoping to find all the prompts on Twitter and Codepen.
Here’s a couple of my favourite ones that I’ve done:
I sketch all of mine out before I make them, and break the images down into more manageable shapes, which I’ve blogged about here. I’d never done anything like this before, and thought it would be super difficult, but I’m finding it really fun.
I’ve actually already seen you stuff and love it!
I also sketch mine out and break them down into shapes, it really makes a great difference when you start coding!
haven’t done this actually! I also haven’t worked with SVG before, but I definitely want to learn it soon.
I’ll look around to see if anyone has done this comparison!
Thank you!
I really want to get into more animations. Your roses are so cute and I also really love your typography animations.
Look forward to see more from you!
After an exercise or two, the only benefit of using css for this that I can see is mathematical beauty. No munching with coordinates, but all about symmetries and offsets.
It’s also a good question if someone wrote a converter yet.
A quick search found two older plugins for inkscape and one for npm. Likely can’t handle much complexity though:
