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 set the stage by adding styles that would apply to all the elements inside this container.
Then I added an ellipse for the body, something simple:
.body {
width: 80%;
height: 60%;
background: #369;
border-radius: 50%;
top: 50%;
left: 0;
transform: translateY(-50%);
}
Later I would update some of those values to make the body have different colors, you can check the source code on CodePen for more details.
The next step was adding elements into the body: eyes, mouth, cheeks, gills, tail, a fin...
To make it look kawaii I needed large rounded eyes with a spark in them, and for the mouth a semicircular line in between. Also, some elliptical pink-ish cheeks right below the eyes.
.eye {
width: 8%;
aspect-ratio: 1;
border-radius: 50%;
top: 45%;
left: 4%;
background: radial-gradient(circle at 32% 32%, white 14%, black 0);
}
.eye + .eye {
left: 35%;
}
.mouth {
border-radius: 50%;
border: 0.5vmin solid #0000;
border-bottom: 0.75vmin solid #000;
border-left: 0.75vmin solid #000;
width: 10%;
aspect-ratio: 1;
top: 50%;
left: 18%;
transform: rotate(-45deg);
}
.cheek {
width: 10%;
height: 7%;
background: #fcc6;
border-radius: 50%;
left: 3%;
top: 57%;
}
.cheek + .cheek {
left: 34.5%;
}
The fin was easy: an element with one side having 100% border-radius while the others had 0. That way if had the typical shape of a shark fin. I would reuse that shape later for tail and flippers, too! Changing the size and transformations (rotations and skews) would make them different enough.
.fin {
border-radius: 100% 0 0 0;
background: #369;
width: 25%;
height: 35%;
}
Finally, I added a filter to the body element (not the <body> tag) with multiple drop-shadow() so there would be a more or less consistent border all around the shark.
The background was an easy change too. In the video version, I just had a plain light green color. Later, I added a couple of additional backgrounds to simulate sunshine rays and a gradient from lighter (surface) to darker (sea depths).
Here’s a video with a time-lapse of the process:
Adding more details
I stopped with the recording, but later returned to the drawing and decided to add a little detail to it:
- Shadows at the bottom
- Lighter parts at the top
- Some texture on the cheeks
- Add a nicer background
Just with those small things, the illustration gained a lot. It really is the small details that make or break things. Here’s the end result:
Variations
Because it is code and uses variables/custom properties, it is relatively easy to customize and transform into different versions. These are some variations of the drawing with minimal code changes.
A great white shark (same shark, but in gray):
A blue whale (larger, no fin, different body background):
A narwhal (lighter color, no fin, and a tusk):
I liked how they looked like, so I showed them to my children, they looked at the screen for a second, and said “Meh! They look like they are fish… too fishy.” Kids have a way to keep us humble.
If you liked this content, check my YouTube channel, where I have more drawings and videos with CSS tips and tricks.
Top comments (22)
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.
Thanks!
The containers would explain the sad face on the whale :P
lol! Right? Poor whale...
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 ;)
The whole "internet thing" is just a fad. It will never catch on.
Hear, hear! So, while the thing lasts, let us all enjoy some more marine life simulated with CSS:
This looks amazing 🤯
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.
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.
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) 🤯
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.
This is so cute! What a neat little project! Thanks for sharing!
Cuuuute ✨
Great CSS styler!
I was very surprised at the functionality of CSS hahaha
Thank you
this is amazing!
This is really cool man good job
so cute！
These are very cool. Amazing what you can do with just html and css.
These are great. My kid love sharks. I'll have to show him these.