SVG Path Arcs (Copy 7508)

✨ นายธนเดช แซ่ฉั่ว

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#333;
        margin:1em;
        font-family:sans-serif;
      }
      svg{
        background:#eee;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      <path fill="black" stroke="black" stroke-width="2" stroke-linecap="square"
            d="
               m50,60
               a1,1 0 0,1 -10,-40
               a1,1 0 0,1 10,40
               "
            >
      </path>
      <path fill="#b71c1c" stroke="black" stroke-width="1" stroke-linecap="square"
            d="
               m48,60
               a0.3,0.8 0 0,1 -5, -40
               a0.3,0.8 0 0,1 5, 40
               m0,-10
               a0.3,0.8 55 0,1 -3, -16
               a0.3,0.8 55 0,1 3, 16
               m6,4
               a0.3,0.8  -55   0,1   -20,-25
               a0.3,0.8  -55   0,1   20,25
               "
            >
      </path>
      <path fill="black" stroke="black" stroke-width="1" stroke-linecap="square"
            d="
               m46.5,43.5
               a1,1 0 0,1 -2, -2
               a1,1 0 0,1 2, 2
               "
            >
        <animate attributeName="d" values="
                                          m46.5,43.5
                                          a1,1 0 0,1 -2, -2
                                          a1,1 0 0,1 2, 2;
               									m47.5,44.5
               									a1,1 0 0,1 -4, -4
               									a1,1 0 0,1 4, 4;
                                          m46.5,43.5
                                          a1,1 0 0,1 -2, -2
                                          a1,1 0 0,1 2, 2;
               									"dur="2s" repeatCount="indefinite" />
      </path>
      
      <defs>
        <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>
      </defs>
      <!--rect fill="url(#grid)" width="1000" height="1000" x="0" y="0" style="opacity:.5"/>
    </svg>
  </body>
</html>