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.

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

This looks amazing. Even as a work in progress, it's great. 👏👏👏
And it's responsive!!! Smart use of the trigonometry functions too (saw on Firefox) 🤯

Thread Thread
 
mackfitz profile image
Maciek Fitzner

The responsiveness is also WIP, switching to and from vertical mobile view is glitchy - sometimes the fish will go right to left in portrait mode, and upwards in the landscape mode for no reason, and will sometimes revert to the right one after reload and sometimes not. It was an afterthought towards the end of a really coding long session. I had little brainpower to spend, and that left me with none left for the SCSS conversion.
But I am happy I tried, it's been fun to draw something semi-realistic for a change, rather than an very strict geometry. Also, I'm probably going to finish the original pen that this one evolved from.

Collapse
 
sarehprice profile image
Sarah Price

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

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

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
 
sdedrov profile image
Seth Dedrov

This is really cool man good job

Collapse
 
yuanwenlai profile image
YuanWenLai

so cute!

Collapse
 
cicirello profile image
Vincent A. Cicirello

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

Collapse
 
jarvisscript profile image
Chris Jarvis

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

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.