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

✨ ANANYA JINAPONG

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#f1f6ff;
        margin:1rem;
        text-align:center;
        font-family:sans-serif;
      }
      svg{
        background:#CD6155 ;
        box-shadow:0 0 20px #0002;
        width:80%;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
            <path d = "M50,30
                 L70,50
                 L50,70
                 L30,50
                 L50,30
            "
               stroke-width="0.5"
            stroke="#AF7AC5 "
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="pink"
            />
      <circle r="2" fill="#fc0" cx="50" cy="50"/>
      <circle r="10" fill="#29ADFD"cx="50" cy="50" stroke="#7DCEA0" stroke-wigth="1"/>
      <circle r="20" fill="#fc00" cx="50" cy="50" stroke="#fc0" stroke-width="1"/>
      <path d="M10,10 
               h80 v80
               h-80 v-80
               "
            stroke-width="2"
            stroke="#fc0"
            stroke-linecap="square"
            stroke-linejoin="arcs"
            fill="#0000"
      />
  		<path d = "M13,15
                 h5 v2.5
                 h65 v-3 
                 h3
            "
               stroke-width="0.5"
            stroke="white"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      	<path d = "M12,85
                 h5 v-2.5
                h65 v3
                    h3
            "
               stroke-width="0.5"
            stroke="white"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
       <path d="M20,15
              h60 v5 h5 v60 h-5 v5 h-60 v-5 h-5 v-60 h5 v-5
               "
            stroke-width="1"
            stroke="#fc0"
            stroke-linecap="square"
            stroke-linejoin="arcs"
            fill="#0000"
      />
      <path d = "M85,5
                 v10 h10
                 v-10 h-10
            "
               stroke-width="1"
            stroke="white"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d = "M5,85
                 v10 h10
                 v-10 h-10
            "
               stroke-width="1"
            stroke="white"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
    </svg>
  </body>
</html>