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

✨ นายพิตรพิบูล เรือนเย็น

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#f1f6ff;
        margin:1rem;
        text-align:center;
        font-family:sans-serif;
      }
      svg{
        background:#00209A;
        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="5" fill="#00EAFF" cx="50" cy="50"/>
      <circle r="10" fill="#fc00" cx="50" cy="50" stroke="#00EAFF" stroke-width="6"/>
      <path d="M50,5 
               h35 v10 h10 v35
               v35 h-10 v10 h-35
               h-35 v-10 h-10 v-35
               v-35 h10 v-10 h35
               " 
            stroke-width="1"
            stroke="#009AD2"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      
      <path d="M50,2
					h38 v9 h10 v77
               h-10 v9.8 h-76 v-10
               h-9.8 v-76 h9 v-9.8
               h50
               "               
            stroke-width="1"
            stroke="#009AD2"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="M50,2
					h38 v9 h10 v77
               h-10 v9.8 h-76 v-10
               h-9.8 v-76 h9 v-9.8
               h50
               "               
            stroke-width="1"
            stroke="#009AD2"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="M50,10 
               h30 v15 h-5 v-5 h15 v30 
               v30 h-15 v-5 h5 v15 h-30
               h-30 v-15 h5 v5 h-15 v-30
               v-30 h15 v5 h-5 v-15 h30
               " 
            stroke-width="1"
            stroke="#009AD2"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="M0,50 
               h36
               " 
            stroke-width="1"
            stroke="#009AD2"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="M100,50 
               h-36
               " 
            stroke-width="1"
            stroke="#009AD2"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="M50,100
               v-36
               " 
            stroke-width="1"
            stroke="#009AD2"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="M50,0
               v36
               " 
            stroke-width="1"
            stroke="#009AD2"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="M50,0
               v36
               " 
            stroke-width="1"
            stroke="#009AD2"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="M0,0
               L40 40
               " 
            stroke-width="1"
            stroke="#009AD2"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="M100,0
               L60 40
               " 
            stroke-width="1"
            stroke="#009AD2"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="M0,100
               L40 60
               " 
            stroke-width="1"
            stroke="#009AD2"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="M100,100
               L60 60
               " 
            stroke-width="1"
            stroke="#009AD2"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      
      <path d="M20,50 
               l30,-30
               l30,30
               l-30,30
               l-30,-30
               " 
            stroke-width="2"
            stroke="#0034FF"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
    </svg>
  </body>
</html>