Drawing kawaii sharks and sea life with HTML and CSS
Tags: css, html, webdev, showdev
Published: 2023-01-05 19:25:20

---
title: Drawing kawaii sharks and sea life with HTML and CSS
published: true
description: How to draw a shark and customize it into different cartoons
tags: css,html,webdev,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/111x4qzyommlc0759z86.png
canonical_url: https://alvaromontoro.com/blog/68021/drawing-a-shark-with-css
canonical_url: https://alvaromontoro.com/blog/68021/drawing-a-shark-with-css
---

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:

```css
.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](https://codepen.io/alvaromontoro/pen/poZEqdj) 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.

```css
.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.

```css
.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:

{% youtube -PO7By_m8OY %}

## 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wcdzgivgqipk044aqtu0.png)

## 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](https://codepen.io/alvaromontoro/pen/poZEqdj) (same shark, but in gray):

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7v4tlcg961tekmowznzi.png)

A [blue whale](https://codepen.io/alvaromontoro/pen/bGjwZMj) (larger, no fin, different body background):

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cechjopg7trwls6h1p3i.png)

A [narwhal](https://codepen.io/alvaromontoro/pen/MWBjxdg) (lighter color, no fin, and a tusk):

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1soj97u5dtenzy83e664.png)

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](https://www.youtube.com/alvaromontoro), where I have more drawings and videos with CSS tips and tricks.