【直打ちSVG】ドキソちゃんの輪郭を書く

前回、直打ちSVGでアソパソマソを書いたので今回はドキソちゃんを書きます。

見るからにレベルが高い！丸と四角だけのキャラとはレベルが違う！！

ってことでまずは輪郭から。要するに丸い顔とツノです。

普通にソフト使って書くなら、大きな丸と長方形と小さな丸(ツノの先端)を合成すれば出来上がりなんだけど、SVGには合成する機能が無いので自力で書きます。。

ツノを書く

<path class="line face horn" d="
    M 50 12,
    L 70 5,
    A 7 5, 20 1 1, 74 10,
    L 50 30,
" />

MはMoveTo(始点)、LはLineTo(線)、AはArc(弧)を描く機能です。日本語にすると

(50, 12)から(70, 5)に線を引く
(70, 5)から(74 10)に弧を描く
(74 10)から(50, 30)に線を引く

鬼門は弧なので詳しく書く

A rx ry, deg flag1 flag2, ex ey

rx: 楕円の半径x
ry: 楕円の半径y
deg: 楕円の角度
flag1 flag2: それぞれ0か1が入る。とにかくフラグw
ex: 終点x
ey: 終点y

フラグってなんだよ！って話ですが、適当に解説すると、始点・終点・半径・角度が決まると、定まる弧は4つある。なのでフラグを適切にいじって解を定めてくださいってことです。もちろんflagに意味があるんだけど、それ考えるより4パターンを適当に入力して目視で確認した方が早いです。

顔の輪郭を重ねる

適当に丸を重ねれば完成です。

できた！
が。。。

ツノと頭の境界線は無しにしたい。。。

輪郭すべてをpathで書いて完成

頭の部分もツノのpathに加えます。
そのためにツノと頭の接点を求めます。
どうやら(50 12)と(67.3 15.8)らしい。
そしてこれが完全版！

カンペキや！今日はこのへんで。

<svg
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100">
  <defs>
  <style>
  .line {
    stroke: #111;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
  .face {
    fill: #e6a;
  }
  </style>
  </defs>
  <path class="line face" d="
    M 50 12,
    L 70 5,
    A 7 5, 20 1 1, 74 10,
    L 67.3 15.8,
    A 40 38, 0 1 1, 50 12
    " />
</svg>