SVG 線、円、四角形で超かんたんな顔 #SVG

svg入門で超簡単な顔

rect
circle
line
の使い方の備忘録

hoge.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg</title>
</head>
<body>
    <svg width="500" height="500">

        <!-- 目 -->
        <circle cx="200" cy="100" r="20" fill="black"/>
        <circle cx="100" cy="100" r="20" fill="black"/>

        <!-- 鼻？ -->
        <line x1="150" y1="130" x2="150" y2="180" stroke-width="5" stroke="black"/>

        <!-- 口 -->
        <rect x="50" y="200" width="200" height="20" fill="red"/>

    </svg>

</body>
</html>

SVG 線、円、四角形 で超かんたんな顔

SVG 線、円、四角形で超かんたんな顔