Drawing kawaii sharks and sea life with HTML and CSS

Read Time:2 Minute, 28 Second

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:

Enter fullscreen mode Exit fullscreen mode

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.

Enter fullscreen mode Exit fullscreen mode

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.

Enter fullscreen mode Exit fullscreen mode

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:

Drawing kawaii sharks and sea life with HTML and CSS


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.

Source: https://dev.to/alvaromontoro/drawing-kawaii-sharks-and-sea-life-with-html-and-css-fei

CyberSEO Pro - OpenAI GPT-3 autoblogging and content curation plugin for WordPress

Tag Cloud

Java Java Logical Programs OTP Generation in Java python Recursion youtube video ASCII Upper and Lower Case blockchain javascript graph learn to code software development Successful Software Engineers breadth first search Java Array Programs Java Programs Uncategorized android ios programming kotlin web-development django data sql cybersecurity database swiftui serverless aws swift rust react background-position gradients loader mask grid nth-child pseudo elements indieweb WordPress Print Array without brackets C++ factorial Java String Programs Final Keyword Static Variable Axie Infinity Cryptokitties NFT games tool inserting MISC Tips Codes python code python projects python3 system info python project Bigginers How to Do Integrations Payment Gateways PHP checkout page in php Implement stripe payment gateway in Step by step in PHP integrate stripe gatway in php mysql payment gateway integration in php step by step payment gateway integration in php step by step with source code payment gateway integration in website PHP Integrate Stripe Payment Gateway Tutorial PHP shopping cart checkout code shopping cart in php stripe php checkout PHP/MySQL/JSON best international payment gateway does google pay accept international payments how to accept international payments in india paytm payment gateway razorpay codeigniter github razorpay custom checkout github razorpay get payment details razorpay integration in codeigniter github razorpay international payments Razorpay payment gateway integration in CodeIgniter razorpay payment gateway integration in php code Razorpay payment gateway integration with PHP and CodeIgniter Razorpay payment gateway setup in CodeIgniter Library & Frameworks Tips & Tricks UI/UX & Front-end coding birds online html code for google sign in login with google account in PHP login with google account using javascript login with google account using javascript codeigniter login with google account using php login with google account using php source code
Learn CSS: Create the Google Logo Previous post Learn CSS: Create the Google Logo
What Are People Building With WebAssembly? Next post What Are People Building With WebAssembly?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.