「 svg でお魚を書く 」ミッション。

ボディーが思った以上にうまくいったので満足です。

基本、原図をなぞるように書きましたが、見た目の修正をしています。
第4点を絶対座標にしたのはそのためで、
その座標を目当てに以後の座標を入力していくことになります。


ここからが本番！

ちゃんと絵になるかどうか！！


まず、【尾びれ】を書いていきます。



せっかくなので、「A」円弧を使っちゃう。




持ち上げて。




落として。




つながった！


【尻びれ】



斜めにひらひらと。




おおきく引き上げて、終点へは「L」。
直線で結びます。


オブジェクトは、後で塗りにする予定です。
重ねることで破綻のないようにしています。




【腹びれ】は、もう問題なし！


だいぶコツがつかめてきた！！


一番動きのある【背びれ】です。



ぐいっと、持ち上げました。

この頂点が y の 0 になると仮定して、
ボディーの始点を打ってます。

書いてるときは、相対座標。
絶対座標に変換してみると・・・。


ぴったり 0！


途中、修正をいれているので 10 くらいはずれるかな？
と思ってたんだけどよかったです。

面目躍如ってところでしょうか！
自画自賛です！！


いい気分になったところで、一気に書いちゃう。

トリガーの手前で、「S」も使ってみました。

「S」、便利です。

フリーの線だと、左右のハンドルの長さが違うのが普通。
そうなると、別々にハンドルを指定するしかないんですよねー。


ハンドルを書いていて思ったのは、
普段、けっこう不必要なアンカーを打ってるなって。

ハンドルの引き方にムダがあると、
補うためのアンカーが必要になります。

あらためて、とても勉強になります。


っで、こんな感じで ひれ が描けました！



どうです？


かなりいいんじゃない！？


続けて顔のパーツ。


微妙なニュアンスをだせるかどうかがポイント！


【口】



簡単だと思われがちなんだけど、
細くアンカーを打たないと雰囲気がでないんです。
Illustrator でも、いつもこだわって描いてます。


【目】



円弧を 2ヶ所使ってます。

重宝します！ 円弧。

2点を決めればいいだけ。
あとからいくらでも調整できますからね。

円弧だけでも、かなり描けそうです。


【えら】



トゲがないのが、チョウチョウウオ。
トゲがあるのが、ヤッコ。

自分用に描くときには、ヤッコを描いてます。

このブログのキャラクターも、ヤッコです。

トゲは原図にはなく、完全にフリーで書いてみました！




【胸びれ】を書いて。




【腹びれ】をたしました。


塗りと線のスタイルをつけて。

楕円で瞳をいれたら・・・。




完成！


後半は、なれてきてサクサクと座標が書けたよ！！



自分でいうのもなんだけど。
（だって、だれもいってくれないから）

テキストエディターで書いたとは思えない出来ばえ！


これで、



「svg だったらテキストエディターでベジェ曲線は自由に描ける。」

と、自信をもっていえちゃいます！！


ベジェを理解できている方なら、
きっと、どなたでも書けますよ。


こんなに描けるものだと、正直、予想してなかったから、
原図を単純なイラストにしました。

ちょっとさみしいかな？


もう少し、書きこんでみよう！

関連記事

• svg で自由に描こう！vol.03 【 お魚を書く！グラデーションで塗ろう！ 】
• svg で自由に描こう！vol.02 【 お魚を書く！できたかな？ 】
• svg で自由に描こう！vol.01 【 お魚を書く！できるかな？ 】