DEV Community

Cover image for Drawing kawaii sharks and sea life with HTML and CSS

Drawing kawaii sharks and sea life with HTML and CSS

Alvaro Montoro on January 05, 2023

This is how the process went (more or less): First, I created a container that would work as canvas (painting canvas not HTML <canvas>) and ...
Collapse
 
michaeltharrington profile image
Michael Tharrington •

Haha! This thing is so cute. Nicely done!

I'm loving the narwhal variation! Stack a few containers on top and you could have a Docker version as well.

Collapse
 
alvaromontoro profile image
Alvaro Montoro •

Thanks!

The containers would explain the sad face on the whale :P

Collapse
 
michaeltharrington profile image
Michael Tharrington •

lol! Right? Poor whale...

Collapse
 
mackfitz profile image
Maciek Fitzner •

This, I believe, is what CSS was made for: drawing cute animals with code. The whole crazy webdev thing is just a side-effect that's getting way too much attention than it deserves ;)

Collapse
 
alvaromontoro profile image
Alvaro Montoro •

The whole "internet thing" is just a fad. It will never catch on.

Collapse
 
mackfitz profile image
Maciek Fitzner •

Hear, hear! So, while the thing lasts, let us all enjoy some more marine life simulated with CSS:

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro •

This looks amazing 🤯

Thread Thread
 
mackfitz profile image
Maciek Fitzner •

Thanks! Your post actually reminded me that I too need to finally draw some actual, scaly, cartoony fish - and generally something realistic, not just abstract shapes. Most of the time I'm way too deep into 3D, geometry and patterns - but it's possible to combine the two worlds.

Thread Thread
 
mackfitz profile image
Maciek Fitzner • • Edited

And so I went ahead and did that:

Still working on it, but happy to have tried some things out. Of course, my initial plan was way simpler and more cartoony, but I tend to get carried away.

Collapse
 
sarehprice profile image
Sarah Price •

This is so cute! What a neat little project! Thanks for sharing!

Collapse
 
thomasbnt profile image
Thomas Bonnet •

Cuuuute ✨

Collapse
 
reacthunter0324 profile image
React Hunter •

Great CSS styler!
I was very surprised at the functionality of CSS hahaha
Thank you

Collapse
 
vulcanwm profile image
Medea •

this is amazing!

Collapse
 
yuanwenlai profile image
YuanWenLai •

so cute!

Collapse
 
sdedrov profile image
Seth Dedrov •

This is really cool man good job

Collapse
 
jarvisscript profile image
Chris Jarvis •

These are great. My kid love sharks. I'll have to show him these.

Collapse
 
cicirello profile image
Vincent A. Cicirello •

These are very cool. Amazing what you can do with just html and css.

Collapse
 
ashishpandey profile image
Pandeyashish17 •

Kawaii.

Collapse
 
mneme profile image
Alex T •

a puffer shark~

Collapse
 
nathanhealea profile image
Nathan Healea •

Supper Cute!!! Great Job.