svg で自由に描こう!vol.04 【 お魚を書く!クリッピングマスクで飾ろう! 】

もう少し色気がほしいなぁ。


svg でパターンを書くのは非現実的だ!

と言いましたが・・・。


クリッピングマスクだったら簡単にできちゃいます!


クリッピングパスを用意します。

svg_fish_45

書く位置はここ。
グラデーションを書いたエリアです。


svg_fish_41

このパスは表示されませんが、
わかりやすいように重ねてます。


スタイルの用意。

svg_fish_46

ここでも、グラデーションと同様。
id で指定。


モチーフを書きました。

svg_fish_42

ぐるぐるは、円弧の径を縮めながらつなげただけ。
円弧や座標を反転させると方向が変わります。

縮小は、座標自体を小さくしたけど、
tranceform を使ってもいいですね。

スラロームは、S を使ってハンドルを連結。
角度と距離を等倍にしてコピーです。


いい感じに配置したら。


svg_fish_47

クリッピングパスのスタイルを付けた g でくくってしまう。


svg_fish_43

できた!


これは実践で使えそうです!!

コラムのボックスがちょっとさみしいと思ったら、
書いちゃえばいいんじゃないのかな?

ラインや円弧を組み合わせるだけで、柄ができますからね。
罫線にもなります。


レスポンシブですし!


あとでちょっと作ってみよう。



では・・・完成品。


svg_fish_44

どん!


svg_fish_48

なせばなる!!



最終回は、Illustrator での答えあわせと反省会!!!


関連記事

コメント

非公開コメント

mayahuel

ブログ内検索

カレンダー

04 | 2024/05 | 06
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -

月別アーカイブ