どうも！LSSです！！
この間、
即興で「もぐらたたき」を作りました。
即興ゆえ、画像などは用意せずに「もぐら」という字を叩く、という、ネタとしては滑りやすい物になりましたｗ
で、もし、いずれ「画像版」を作るとしたら？
「もぐらの絵」ぐらいは自分で用意したいもの。
で、とりあえず絵だけを「SVGの復習」も兼ねてSVGで描いてみる事にしました！
SVGで描いてみた「もぐら」
コード
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewbox="0 0 100 100">
<path d="M 5,100 Q 5,20 50,20 Q 95,20 95,100" stroke="black" stroke-width="2" fill="brown"></path>
<path d="M 20,55 Q 30,40 45,50" stroke="black" stroke-width="4" fill="none"></path>
<path d="M 55,50 Q 70,40 80,55" stroke="black" stroke-width="4" fill="none"></path>
<circle cx="35" cy="60" r="7" fill="black"></circle>
<circle cx="65" cy="60" r="7" fill="black"></circle>
<circle cx="50" cy="80" r="13" fill="white"></circle>
<circle cx="50" cy="75" r="5" fill="black"></circle>
<ellipse cx="25" cy="80" rx="10" ry="5" fill="pink"></ellipse>
<ellipse cx="75" cy="80" rx="10" ry="5" fill="pink"></ellipse>
<path d="M 20,70 40,75 20,80" fill="none" stroke="black" stroke-width="2"></path>
<path d="M 80,70 60,75 80,80" fill="none" stroke="black" stroke-width="2"></path>
</svg>
SVGのSはScalableのS
SVGの特徴としてScalable（拡大縮小可能）である、というのがあります。
コード１行目の、width="100" height="100" をそれぞれ 300 に変更してみると
それだけで、こんな風に大きく表示されるようになります。
また、どんなに大きく拡大しても、ドット粗くなったりしないのも特徴ですね^^
記事を書きながら、数値を5000とかにして遊んでましたｗ
スマホで見た時に辛いので記事には出しませんが。
コード手打ちで描いてみましたが
この程度ならなんとか描けるものですねｗ
まず、輪郭を描きます
「描きます」ってサラッと言ってますが、もちろん数値を何度も調整してはプレビュー、を繰り返してますｗ
コード
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewbox="0 0 100 100">
<path d="M 5,100 Q 5,20 50,20 Q 95,20 95,100" stroke="black" stroke-width="2" fill="brown"></path>
</svg>
眉毛を片方描きます
コード
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewbox="0 0 100 100">
<path d="M 5,100 Q 5,20 50,20 Q 95,20 95,100" stroke="black" stroke-width="2" fill="brown"></path>
<path d="M 20,55 Q 30,40 45,50" stroke="black" stroke-width="4" fill="none"></path>
</svg>
もう一方の眉毛も、左右対称になるように描きます
コード
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewbox="0 0 100 100">
<path d="M 5,100 Q 5,20 50,20 Q 95,20 95,100" stroke="black" stroke-width="2" fill="brown"></path>
<path d="M 20,55 Q 30,40 45,50" stroke="black" stroke-width="4" fill="none"></path>
<path d="M 55,50 Q 70,40 80,55" stroke="black" stroke-width="4" fill="none"></path>
</svg>
全体の幅（viewbox="0 0 100 100"）が「100」なので、コピペしてから
20に対して80、30に対して70、45に対して55
…と、「100から引いた数値」を指定する事で左右対称になります。
計算でバッチリ位置を決められるのが、コード手打ちで描く利点ですね^^
【JavaScript】ちょっと歪んだ四角形【実験】 - Little Strange Software
に書いた「歪みの愛着」とは逆の話になりますがｗｗｗ
おめめ！
コード
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewbox="0 0 100 100">
<path d="M 5,100 Q 5,20 50,20 Q 95,20 95,100" stroke="black" stroke-width="2" fill="brown"></path>
<path d="M 20,55 Q 30,40 45,50" stroke="black" stroke-width="4" fill="none"></path>
<path d="M 55,50 Q 70,40 80,55" stroke="black" stroke-width="4" fill="none"></path>
<circle cx="35" cy="60" r="7" fill="black"></circle>
</svg>
「普通に円でいいや」と、黒く塗りつぶした（fill="black"）円を配置しています。
そしてまた「35」を「100」から引いた「65」で
コード
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewbox="0 0 100 100">
<path d="M 5,100 Q 5,20 50,20 Q 95,20 95,100" stroke="black" stroke-width="2" fill="brown"></path>
<path d="M 20,55 Q 30,40 45,50" stroke="black" stroke-width="4" fill="none"></path>
<path d="M 55,50 Q 70,40 80,55" stroke="black" stroke-width="4" fill="none"></path>
<circle cx="35" cy="60" r="7" fill="black"></circle>
<circle cx="65" cy="60" r="7" fill="black"></circle>
</svg>
もう片方のおめめも描けました^^
鼻
…このへんで「もぐらの絵ってどんなだっけ？」とGoogleで検索し始めますｗ
コード
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewbox="0 0 100 100">
<path d="M 5,100 Q 5,20 50,20 Q 95,20 95,100" stroke="black" stroke-width="2" fill="brown"></path>
<path d="M 20,55 Q 30,40 45,50" stroke="black" stroke-width="4" fill="none"></path>
<path d="M 55,50 Q 70,40 80,55" stroke="black" stroke-width="4" fill="none"></path>
<circle cx="35" cy="60" r="7" fill="black"></circle>
<circle cx="65" cy="60" r="7" fill="black"></circle>
<circle cx="50" cy="80" r="13" fill="white"></circle>
<circle cx="50" cy="75" r="5" fill="black"></circle>
</svg>
半径13の白い円、その上に乗るように、半径5の黒い円を配置しました。
「もうこれで完成でいいんじゃないか？」ってぐらいに「もぐら」らしくなりましたねｗ
ピンクのほっぺで、かわいく、あざとくｗ
コード
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewbox="0 0 100 100">
<path d="M 5,100 Q 5,20 50,20 Q 95,20 95,100" stroke="black" stroke-width="2" fill="brown"></path>
<path d="M 20,55 Q 30,40 45,50" stroke="black" stroke-width="4" fill="none"></path>
<path d="M 55,50 Q 70,40 80,55" stroke="black" stroke-width="4" fill="none"></path>
<circle cx="35" cy="60" r="7" fill="black"></circle>
<circle cx="65" cy="60" r="7" fill="black"></circle>
<circle cx="50" cy="80" r="13" fill="white"></circle>
<circle cx="50" cy="75" r="5" fill="black"></circle>
<ellipse cx="25" cy="80" rx="10" ry="5" fill="pink"></ellipse>
<ellipse cx="75" cy="80" rx="10" ry="5" fill="pink"></ellipse>
</svg>
あざとかわいさを狙って、ピンクのほっぺを入れてみました。
<ellipse>で楕円を描き、また左右対称になるように配置しています。
あと、もぐらと言えば…ヒゲ！
コード
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewbox="0 0 100 100">
<path d="M 5,100 Q 5,20 50,20 Q 95,20 95,100" stroke="black" stroke-width="2" fill="brown"></path>
<path d="M 20,55 Q 30,40 45,50" stroke="black" stroke-width="4" fill="none"></path>
<path d="M 55,50 Q 70,40 80,55" stroke="black" stroke-width="4" fill="none"></path>
<circle cx="35" cy="60" r="7" fill="black"></circle>
<circle cx="65" cy="60" r="7" fill="black"></circle>
<circle cx="50" cy="80" r="13" fill="white"></circle>
<circle cx="50" cy="75" r="5" fill="black"></circle>
<ellipse cx="25" cy="80" rx="10" ry="5" fill="pink"></ellipse>
<ellipse cx="75" cy="80" rx="10" ry="5" fill="pink"></ellipse>
<path d="M 20,70 40,75 20,80" fill="none" stroke="black" stroke-width="2"></path>
<path d="M 80,70 60,75 80,80" fill="none" stroke="black" stroke-width="2"></path>
</svg>
３本ヒゲにしようかとも思いましたが、なんか面倒くさくなって、
「一本の<path>で描ける折れ線ヒゲ」
にしました。
これも片方決まれば、もう片方は「コピペ＆100から引いて」でいけますｗ
これで完成！！
あとがき
描き終えた後、記事上に部分コピペしながら描いた手順を振り返りましたが、
「もぐらは鼻が決め手」
のような気がしました^^
「もぐらたたき」のほうは、叩いているうちに「もぐらの出現から引っ込むまでの速度」が速くなったり落ち着いたりするようなものを作りたい、って思ってます。
が、そうなると「すぐ引っ込む」事が分かるように動きを加えるべきで、動きを加えるなら、もぐら自体も画像で出すべきかな、と。
どうやって動かすかはまだ考えていませんが、とりあえず描いちゃいましたｗ
…あとあれですね。
「叩かれたもぐら」の絵も描かないと…^^;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
