風景を平面に分ける
稜線・木立・波などをSVGのpathで描きます。同じバリエーション番号なら同じ形になり、縦横比に合わせて座標を再計算します。
SVG LAYERS / PAPER CUT ILLUSTRATION
SVG Paper Cut Scene Studio.
紙を重ねたような風景を作る。層・配色・影を調整して、SVG・PNGで保存。
PAPER CUT WORKSPACE
形を重ね、影で奥行きをつける
各平面をずらした構造確認です。クリックすると編集する層を選べます。
分解表示は保存されません
LAYER EDITOR
層ごとに色と位置を調整
上方向がマイナス、下方向がプラス。数値はキャンバスの高さに対する割合です。
EXPORT SCENE
完成した風景を、SVG・PNGで保存
SVGは図形・影・粒子のフィルターを含み、画像ファイルや外部フォントに依存しません。PNGも同じSVGから描画します。
SVGコードを見る
16 SCENE RECIPES
使いたい風景から選ぶ
山・森・海・砂丘・洞窟。輪郭と装飾の異なる16構図。
該当する風景がありません。
HOW IT WORKS
図形を重ね、輪郭に影をつける
層の輪郭に影を落とす
feDropShadowで形に沿った影を付けます。濃さを0%にすると、影なしのフラットなイラストとして保存できます。
外部素材なしで持ち帰る
完成表示を1つのSVGに保存します。紙の粒子はfeTurbulence、洞窟の穴はevenoddの塗りで作り、写真を埋め込んではいません。
切り紙を模した2Dのイラストです。紙の厚みや立体形状をシミュレーションするものではありません。分解表示の平行投影は構造確認用で、出力には含めません。
影の距離・ぼかしはSVG座標の単位です。PNGの2倍保存は2400px幅で描画します。SVGフィルターに対応しないアプリでは影や粒子の表示が変わる場合があるため、見た目を固定したい場合はPNGを使ってください。