SVG Path Arcs (Branch 7638)

✨ นายอินทนนท์ แต่งตั้ง

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#333;
        margin:1em;
        font-family:sans-serif;
        color:white;
      }
      svg{
        background:#eee;
      }
    </style>
  </head>
  <body>
		
     
    
    <svg viewBox="0 0 100 100">
      
      
      
      
      
      <pattern id="space" viewBox="0,0,8,8" width="30%" height="30%">
        <rect width="10" height="10" fill="#671d8c">
          </rect>
          <path d="M0,4 
               l1,-1
               l1,1
               l-1,1
               l-1,-1
               " 
            fill ="#ffffff"
           
            stroke-linecap="round"
            stroke-linejoin="round"
            ><animate attributeName="opacity"
             	values="0;1;0" dur="2s"
             	repeatCount="indefinite"/></path>
        <path d="M4,1 
               l1,-1
               l1,1
               l-1,1
               l-1,-1
               " 
            fill ="#ffffff"
           
            stroke-linecap="round"
            stroke-linejoin="round"
            ><animate attributeName="opacity"
             	values="0;1;0" dur="2.5s"
             	repeatCount="indefinite"/></path>
        <path d="M6,8 
               l3,-3
               l3,3
               l-3,3
               l-3,-3
               " 
            fill ="#ffffff"
           
            stroke-linecap="round"
            stroke-linejoin="round"
            ><animate attributeName="opacity"
             	values="0;1;0" dur="1.5s"
             	repeatCount="indefinite"/></path>
        <path d="M-2,8 
               l2,-2
               l2,2
               l-2,2
               l-2,-2
               " 
            fill ="#ffffff"
           
            stroke-linecap="round"
            stroke-linejoin="round"
            ><animate attributeName="opacity"
             	values="0;1;0" dur="2.5s"
             	repeatCount="indefinite"/></path>
      </pattern>
      
      
        <pattern id="grid" viewBox="0,0,10,10" width="1%" height="1%">
          <rect fill="#0001" width="1" height="10" x="1" y="0"/>
          <rect fill="#0001" width="1" height="10" x="3" y="0"/>
          <rect fill="#0001" width="1" height="10" x="5" y="0"/>
          <rect fill="#0001" width="1" height="10" x="7" y="0"/>
          <rect fill="#0001" width="1" height="10" x="9" y="0"/>
          <rect fill="#0001" width="10" height="1" x="0" y="1"/>
          <rect fill="#0001" width="10" height="1" x="0" y="3"/>
          <rect fill="#0001" width="10" height="1" x="0" y="5"/>
          <rect fill="#0001" width="10" height="1" x="0" y="7"/>
          <rect fill="#0001" width="10" height="1" x="0" y="9"/>
          <path d="M0 0 h10 L9 1 h-8 v8 L0 10 z" fill="#ff05"/>
          <path d="M10 10 h-10 L1 9 h8 v-8 L10 0 z" fill="#0f05"/>
          <rect fill="#0002" width="10" height=".1" x="0" y="9.9"/>
          <rect fill="#0002" width="10" height=".1" x="0" y="0"/>
          <rect fill="#0002" height="10" width=".1" y="0" x="9.9"/>
          <rect fill="#0002" height="10" width=".1" y="0" x="0"/>
        </pattern>
      
      <rect fill="

#521563

" width="1000" height="1000" x="0" y="0" style="opacity=1"/>
      <path fill="
#671d8c
" stroke="deeppink" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
            d=" M25,35 a1,1 0 0,1 50,0 v60 h-50 v-60 "/>
      <path fill="url(#space)" stroke="
#9f10c7
" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
            d=" M25,35 a1,1 0 0,1 50,0 v60 h-50 v-60 "/>
    </svg>
     
    
  </body>
</html>