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

✨ VISAL SUWANARAT

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#f1f6ff;
        margin:1rem;
        text-align:center;
        font-family:sans-serif;
      }
      svg{
        background:#c00;
        box-shadow:0 0 20px #0002;
        width:80%;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      <circle r="1" fill="#fc0" cx="50" cy="50"/>

      <circle r="2.5" fill="#fc0" cx="50" cy="50"/>
      <circle r="7.5" fill="#fc00" cx="50" cy="50" stroke="#fc0" stroke-width="6"/>
      <path d="M50,5 
               h10 v10 h10 v10 h10 v10 h10
               v30 h-10 v10 h-10 v10 h-10 v10
               h-20 v-10 h-10 v-10 h-10 v-10
               h-10 v-30 h10 v-10 h10 v-10 h10 v-10 h10
               " 
            stroke-width="1"
            stroke="#fc0"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      
      <path d="M50,5 
               v5 h15 v10 h10 v10 h10 v10 h10 v20 h-10
               v10 h-10 v10 h-10 v10 h-30 v-10 h-10 v-10 h-10
               v-10 h-10 v-20 h10 v-10 h10 v-10 h10 v-10 h20
               " 
            stroke-width="1"
            stroke="#fc0"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      
       <path d="M50,5 
              v15 l20 25 r
               " 
            stroke-width="2"
            stroke="#fc0"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      
       <path d="M50,95
              v-15 l20 -25 v-10
               " 
            stroke-width="2"
            stroke="#fc0"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="M50,80
             l-20 -25 v-10 l20 -25
               " 
            stroke-width="2"
            stroke="#fc0"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      
      
      
       <path d="M5,5
              v90 h90 v-90 h-90
               " 
            stroke-width="2"
            stroke="#fc0"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      
      <path d="M5,5
              v10 h10 v-10
               " 
            stroke-width="2"
            stroke="#fc0"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
       
      
      <path d="M95,85
              h-10 v10
               " 
            stroke-width="2"
            stroke="#fc0"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      
      <path d="M95,5
              h-10 v10 h10
               " 
            stroke-width="2"
            stroke="#fc0"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      
      <path d="M5 85
              v10 h10 v-10 h-10
               " 
            stroke-width="2"
            stroke="#fc0"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
     
    </svg>
  </body>
</html>