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

✨ นายบุฒฐไชย์ อารมณ์

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:grey;
        margin:1em;
        font-family:sans-serif;
      }
      svg{
      background:red;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      <circle r="6.5" fill="yellow" cx="50" cy="50"/>
      <circle r="6" fill="#ffcc00" cx="50" cy="50"/>
		<circle r="5.5" fill="yellow" cx="50" cy="50"/>
      <circle r="5" fill="#ffcc00" cx="50" cy="50"/>
      <circle r="4.5" fill="yellow" cx="50" cy="50"/>
      <circle r="4" fill="#ffcc00" cx="50" cy="50"/>
      <circle r="3.5" fill="yellow" cx="50" cy="50"/>
      <circle r="3" fill="#ffcc00" cx="50" cy="50"/>
      <circle r="2.5" fill="yellow" cx="50" cy="50"/>
      <circle r="2" fill="#ffcc00" cx="50" cy="50"/>
      <circle r="1.5" fill="yellow" cx="50" cy="50"/>
      <circle r="1" fill="red" cx="50" cy="50"/>
      <path d="
					M10,10 
               h80 v80 h-80 v-80 h-5 v-5 h5 v5 h85 v-5 h-5 v90 h5 v-5 h-90 v5 h5 v-5
               " 
            stroke-width="1.5"
            stroke="yellow"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="
					M20,20 
               h-5 v-5 h5 v15 h-5 v-5 h10 v-10 h5 v5 h-10 v5 h15 v-10 
               h30 v10 h10 v-10 h-5 v5 h15 v-5 h-5 v15 h5 v-5 h-10 v10 h10 
               v30 h-10 v10 h10 v-5 h-5 v15 h5 v-5 h-15 v5 h5 v-10 h-10 v10 
               h-30 v-10 h-10 v10 h5 v-5 h-15 v5 h5 v-15 h-5 v5 h10 v-10 h-10 v-30 h10 v-10" 
            stroke-width="1.5"
            stroke="yellow"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="M35,50 
               l15,-15 l15,15 l-15,15 l-15,-15" 
            stroke-width="1"
            stroke="yellow"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />  
      <path d="M40,50 
               v10 h20 v-20 h-20 v10" 
            stroke-width="1"
            stroke="yellow"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
    </svg>
  </body>
</html>