SVG Path คลาสพิเศษ (Branch 6351)

✨ นางสาวกัลยรักษ์ ชุบผา

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:grey;
        margin:1em;
        font-family:sans-serif;
      }
      svg{
      background:white;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      
      <circle r="1" fill="red" cx="50" cy="50"/>
      <path d="
M8,8 H89 v80 h-80 v-80
               " 
            stroke-width="2"
            stroke="#ffc500"
            fill="#010101"
            />
      <path d="M12,12 h3 v3 h-3 v-3 h3 v9 h3 v-6 h-3 v6 h3 v-3 h3 v-3 h-3 v3 h-6 v60 h9 v4 h-9 v3 h3 v-10 h3 v10 h62 v-10 h3 v10 h3 v-3 h-9 v-3 h9 v-60 h-10 v-4 h10 v-3 h-3 v10 h-3 v-10 h-60 v3"
            stroke-width="1"
            stroke="#ffc500"
            fill="#010101"
      />
      <circle r="30" cx="50" cy="50" stroke="#ffc500" fill="url(#kickit)" stroke-width="2"></circle>
      <circle r="15" cx="50" cy="50" stroke="black" stroke-width="1"></circle>
      <path d="M50,35 l16,16 l-16,16 l-16,-16 l16,-16z"
            stroke-width="1"
            stroke="#ffc500"
            fill="0"/>
       <circle r="10" cx="50" cy="51" stroke="#ffc500" fill="#ffc500" stroke-width="2"></circle>
      <ellipse rx="9" ry="6" cx="50" cy="51" fill="white" stroke-width="2"/>
      <ellipse rx="3" ry="6" cx="50" cy="51" fill="#010101" stroke-width="2"/>
      <path d="M50,50 l1,1 l-1,1 l-1,-1 l1,-1z"
            stroke-width="0.5"
            stroke="white"
            fill="white"/>
      
      <defs>
        <pattern id="kickit"
                 viewBox="0 0 10 10"
                 width="10" height="10"
                 patternUnits="userSpaceOnUse">
          <line x1="0" y1="0" x2="10" y2="10"style="stroke:white;stroke-width:2" ></line>
        </pattern>
      </defs>
    </svg>
  </body>
</html>