使用 HTML 和 CSS 绘制卡哇伊鲨鱼和海洋生物
这个过程是这样进行的（或多或少）：
首先，我创建了一个用作画布的容器（绘画画布而不是 HTML <canvas>），并通过添加适用于该容器内所有元素的样式来设置舞台。
然后我为身体添加了一个椭圆，很简单：
.body {
width: 80%;
height: 60%;
background: #369;
border-radius: 50%;
top: 50%;
left: 0;
transform: translateY(-50%);
}稍后我会更新其中一些值以使主体具有不同的颜色。
下一步是在身体中添加元素：眼睛、嘴巴、脸颊、鳃、尾巴、鳍……
为了让它看起来卡哇伊，我需要大而圆的眼睛，眼睛里闪闪发光，嘴巴之间有一条半圆形的线。 此外，眼睛下方还有一些椭圆形的粉红色脸颊。
.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%;
}鳍很简单：一个元素的一侧具有 100% 的边界半径，而其他侧的边界半径为 0。这样，如果具有典型的鱼翅形状。 稍后我也会将这种形状重新用于尾巴和鳍状肢！ 改变大小和变换（旋转和倾斜）会使它们不同。
.fin {
border-radius: 100% 0 0 0;
background: #369;
width: 25%;
height: 35%;
}
最后，我用多个 drop-shadow() 向 body 元素（不是 <body> 标签）添加了一个过滤器，这样鲨鱼周围就会有或多或少一致的边框。
背景也很容易改变。 在其他版中，我只有一种普通的浅绿色。 后来，我添加了一些额外的背景来模拟阳光和从浅色（表面）到深色（海洋深处）的渐变。
添加更多细节
回到绘图，我决定在其中添加一些细节：
底部的阴影
顶部高光部件
脸颊上有些纹理
添加更好的背景
就凭这些小东西，插画收获颇丰。 真正决定成败的是小细节。 这是最终结果：
变化
因为是代码，使用了变量/自定义属性，所以相对容易自定义和转换成不同的版本。 这些是绘图的一些变体，代码更改很少。
一条大白鲨（同一条鲨鱼，但是使用灰色）：
蓝鲸（更大，没有鳍，身体和背景不同）：
独角鲸（颜色较浅，无鳍和长牙）：
我喜欢它们的样子，所以我把它们拿给我的孩子们看，他们看了一秒钟屏幕，然后说：“嗯！ 它们看起来像鱼……。” 孩子们有办法让我们保持谦虚。
