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

✨ APICHET KOMWATCHARAPONG

<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">
       <path d="M10,10 H90 V90 H10 Z"
            fill="#fc00"
            stroke-width="1"
            stroke="#fc0"/>
      
       <path d="M2,2 H98 V98 H2 Z"
            fill="#fc00"
            stroke-width=".4"
            stroke="#fc09"/>
      
      <circle r="3" cx="9" cy="12.5" fill="#fc0" />
      <circle r="3" cx="6" cy="10.5" fill="#fc0" />
      <circle r="3" cx="12" cy="10.5" fill="#fc0" />
      <circle r="3" cx="7" cy="7" fill="#fc0" />
      <circle r="3" cx="11" cy="7" fill="#fc0" />
      <circle r="2" cx="9" cy="9.5" fill="#c00" />
      
      <circle r="2" cx="20" cy="12" fill="#fc0" />
      <circle r="2" cx="18" cy="10.5" fill="#fc0" />
      <circle r="2" cx="22" cy="10.5" fill="#fc0" />
      <circle r="2" cx="18.5" cy="8" fill="#fc0" />
      <circle r="2" cx="21.5" cy="8" fill="#fc0" />
      <circle r="1.5" cx="20" cy="10" fill="#c00" />
      
      <circle r="3" cx="91" cy="92.5" fill="#fc0" />
      <circle r="3" cx="94" cy="90.5" fill="#fc0" />
      <circle r="3" cx="88" cy="90.5" fill="#fc0" />
      <circle r="3" cx="93" cy="87" fill="#fc0" />
      <circle r="3" cx="89" cy="87" fill="#fc0" />
      <circle r="2" cx="91" cy="89.5" fill="#c00" />
  		
      <circle r="2" cx="80" cy="92" fill="#fc0" />
      <circle r="2" cx="82" cy="90.5" fill="#fc0" />
      <circle r="2" cx="78" cy="90.5" fill="#fc0" />
      <circle r="2" cx="81.5" cy="88" fill="#fc0" />
      <circle r="2" cx="78.5" cy="88" fill="#fc0" />
      <circle r="1.5" cx="80" cy="89.5" fill="#c00" />
      
     	<path d="M30,30 L35,35"
            fill="#fc00"
            stroke-width="3"
             stroke-linecap="round"
            stroke="#fc0"/>
      
      <path d="M30,43 L45,43
               L30,60"
            fill="#fc00"
            stroke-width="3"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke="#fc0"/>
      
       <path d="M40,70 
               V50 L48,53"
            fill="#fc00"
            stroke-width="3"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke="#fc0"/>
      
      <path d="M55,32.5 L70,30"
            fill="#fc00"
            stroke-width="3"
            stroke-linecap="round"
            stroke="#fc0"/>
      
      <path d="M55,39.5 L70,37
               L67,44
               L58,45 z"
            fill="#fc00"
            stroke-width="3"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke="#fc0"/>
      
      <path d="M52,53 L72,51
               L69,70
               L57,70 z"
            fill="#fc00"
            stroke-width="3"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke="#fc0"/>
      
      <path d="M55,61.5 L70,60 
               L62.5,60.8 v8 v-16"
            fill="#fc00"
            stroke-width="3"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke="#fc0"/>
      
       <path d="M20,25 h60 v-4 h-3 v59
                h3 v-4 h-60 v4 h3 v-59
                h-3 z
              "
            fill="#fc03"
            stroke-width=".4"
            stroke="#fc0"/>
    </svg>
  </body>
</html>