QE C’Thx – CODEBOX

QE C’Thx

✨ นายภาณุพงศ์ แก้วคำ

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

<svg viewBox="0 0 100 100"> 
      <defs>
        <pattern id="flip" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
          <rect width="100" height="100" fill="black">
            <animate attributeName="fill" values="#804141; #5c3d2d; #5c3d2d; #5e5b2e; #5e5b2e; #456932; #456932; #316653; #316653" dur="5s" repeatCount="indefinite"/>
          </rect>
          <path fill="transparent" stroke-width="1" stroke="white">
            <animate attributeName="d" values="M0,0 L10,10 M10,0 L0,10;
                                               M5,0 L5,10 M10,5 L0,5;
                                               M5,0 L5,10 M10,5 L0,5;
                                               M10,0 L0,10 M10,10 L0,0;
                                               M10,0 L0,10 M10,10 L0,0;
                                               M10,5 L0,5 M5,10 L5,0;
                                               M10,5 L0,5 M5,10 L5,0;
                                               M10,10 L0,0 M0,10 L10,0;
                                               M10,10 L0,0 M0,10 L10,0;"
                                       dur="5s" repeatCount="indefinite"/>
            <animate attributeName="stroke" values="#ff8080; #ffa77a; #ffa77a; #fff67a; #fff67a; #a9ff7a; #a9ff7a; #456932; #456932" dur="5" repeatCount="indefinite"/>
          </path>
        </pattern>
      </defs>
      <rect fill="url(#flip)" width="100" height="100"/>
    </svg>

<svg viewBox="0 0 100 100" style="background: #80DEEA"> 
      <defs>
        <pattern id="wow"
                 viewBox="0 0 10 10"
                 patternUnits="userSpaceOnUse"
                 x="0" y="0"
                 width="10" height="10">
          <path stroke="#5E35B1" fill="white"
                stroke-linejoin="square"
                d="m5,3 l2,2 l-2,2 l-2,-2 z"></path>
          </defs>
        <defs> 
          <pattern id="wow2"
                 viewBox="0 0 10 10"
                 patternUnits="userSpaceOnUse"
                 x="0" y="0"
                 width="10" height="10">
          <path stroke="#311B92" fill="transparent"
                stroke-linejoin="square"
                d="m5,0.5 l4.5,4.5 l-4.5,4.5 l-4.5,-4.5 z"/>
        </defs>
        <defs> 
          <pattern id="wow3"
                 viewBox="0 0 10 10"
                 patternUnits="userSpaceOnUse"
                 x="0" y="0"
                 width="10" height="10">
          <path stroke="#ffcdd2" fill="transparent"
                stroke-linejoin="round"
                stroke-width="0.5"
                d="m0,0 l5,5 l-5,5"/>
        </defs>
          <defs> 
          <pattern id="wow4"
                 viewBox="0 0 10 10"
                 patternUnits="userSpaceOnUse"
                 x="0" y="0"
                 width="10" height="10">
          <path stroke="#ffcdd2" fill="transparent"
                stroke-linejoin="round"
                stroke-width="0.5"
                d="m10,0 l-5,5 l5,5"/>
        </defs>
        </defs>
          <defs> 
          <pattern id="wow5"
                 viewBox="0,0,10,10" width="10%" height="10%">
          <circle r="2" cx="10" cy="0" fill="#4FC3F7"/>
          <circle r="2" cx="0" cy="10" fill="#4FC3F7"/>
          <circle r="2" cx="10" cy="10" fill="#4FC3F7"/>
          <circle r="2" cx="0" cy="0" fill="#4FC3F7"/>
          <path stroke="#ffcdd2" fill="transparent"
                stroke-linejoin="round"
                stroke-width="0.5"
                d="m10,0 l-5,5 l5,5"/>
            <path stroke="#ffcdd2" fill="transparent"
                stroke-linejoin="round"
                stroke-width="0.5"
                d="m0,0 l5,5 l-5,5"/>
        </defs>
      <rect fill="url(#wow)" 
            width=100 height="100"/>
        <rect fill="url(#wow2)" 
            width=100 height="100"/>
        <rect fill="url(#wow3)"
              width="100" height="100"/>
			<rect fill="url(#wow4)"
              width="100" height="100"/>
          <rect fill="url(#wow5)"
            width="100" height="100"/> 
      </defs>
    </svg>

</body>
</html>