テキストエディタだけで絵が描ける！？CSSとSVGで作る風景イラスト１２選

SVGとは画像形式の１つで、おなじみのJPG形式やPNG形式と違い、２次元ベクターなので拡大縮小しても画質が落ちないというメリットがあります。また、XMLというマークアップ言語で記述されるため、テキストとしてテキストエディタで編集できるのが特徴です。
 
 
このSVGをwebデザインに応用すると、かなりクレイジーなことができてしまいます。なんと、ページにコードを書くだけで、画像ファイルを用意することなくイラストやアニメーションを描くことができるのです。
 
 
今回ここでご紹介するのは、webページに貼り付けて使えるSVGを使ったクールな風景イラストです。アニメーションやパララックスなどのギミックは、いくつかの簡単なCSSとJavaScriptで作られています。そしてこれらはすべて、自由に編集して使用することが可能です。
 
 
それでは行ってみましょう！
 
 
 
１．タカのいる入江
See the Pen
SVG Landscape, Hawke’s Bay by Louis Coyle (@dropside)
on CodePen.
この美しい入江のイラストは、Louis Coyleが制作したものです。
 
 
作者は3Dレンダリングでよく見られる、

リンク元