SVGの基本

circle

ellipse楕円

rect四角

rect - radius四角(角丸)

polygon多角

text文字

text文字(白抜き)

line

polyline多角線

path - Aパス(円弧)

path - Cパス(ベジェ曲線三次元)

path - Qパス(ベジェ曲線二次元)

stroke-linecap線端 丸(round)

stroke-linejoin角の形状 丸(round)

stroke-dasharray破線 (線分:3)

stroke-dasharray破線 (線分:4,間隔:2,線分:1,間隔:2)

stroke-dasharray破線 (丸ドットっぽい)

animateアニメーション

marker矢印

patternパターン(逆三角の連続)

preserveAspectRatio - noneアスペクト比(引き伸ばし)

maskマスク(ドーナッツ)

linearGradient線状グラデーション

radialGradient放射状グラデーション

linearGradient - rotate線状グラデーション(回転)

linearGradient - slope 線状グラデーション(勾配)

groupグループ

x,y位置の移動

さまざまな形状のSVG

map日本地図

circle-donuts-strokeドーナッツ(円線分)

burgermenu-3lineバーガーメニュー(三本線)

burgermenu-dashバーガーメニュー(破線)

wave

reverse反転

オノマトペで探すSVGアニメーションサンプル

どきどき

ぷるん

りんりん

ぶらんぶらん

かちかち

くるくる

ぐんぐん

びよーん

テキスト白抜き

[HTMLコピペOK]SVGサンプルライブラリー

コメントはまだありません

コメントを残す

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください