QE C’Thx – CODEBOX

QE C’Thx

✨ นายณัฐนันท์ เบญจกรณ์

<html>
  <style>
    body {
  		background: black;
  		margin: 1rem;
  		text-align: center;
  		font-family: sans-serif;
	}
	svg {
  		width: 100%;
      margin-bottom: 1rem;
	}
  </style>
  <body>

<svg viewBox="0 0 100 100" style="background: ">
  <defs>
    <pattern id="bro" viewBox="0,0,10,10" width="10%" height="10%">
    <rect width="10" height="10" fill="#FFAC3BE8" stroke="#FF7111"/>
    <circle cx="0" cy="0" r="5" stroke="black" stroke-width="1" fill="white" />
	 <circle cx="0" cy="0" r="4" stroke="pink" stroke-width="1" fill="white" />
    <circle cx="10" cy="10" r="5" stroke="black" stroke-width="1" fill="white" />
    <circle cx="10" cy="10" r="4" stroke="pink" stroke-width="1" fill="white" />
    <circle cx="5" cy="5" r="1" stroke="#65BBFF" stroke-width="0.5" fill="#85FFD5" />
          </rect>
          <path fill="transparent" stroke-width="1" stroke="white">
            <animate attributeName="d" values="M0,0   M10,0  L0,10;
                                               M5,0   M10,5  L0,5;
                                               M5,0   M10,5  L0,5;
                                               M10,0  M10,10 L0,0;
                                               M10,0  M10,10 L0,0;
                                               M10,5  M5,10  L5,0;
                                               M10,5  M5,10  L5,0;
                                               M10,10 M0,10  L10,0;
                                               M10,10 M0,10  L10,0;"
                                       dur="5s" repeatCount="indefinite"/>
            <animate attributeName="stroke" values="#000000; #7FFFD4; #F0F8FF; #0000FF; #A52A2A; #A9A9A9; #556B2F; #9400D3; #FF00FF" dur="5" repeatCount="indefinite"/>
    </pattern>
  </defs>

<rect x="0" y="0" width="100" height="100" fill="url(#bro)" />
</svg>

</body>
</html>