QE Pattern

✨ นายณัฐภัทร วัฒนพิทักษ์พงศ์

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#f1f6ff;
        margin:1rem;
        text-align:center;
        font-family:sans-serif;
      }
      svg{
        background:pink;
        box-shadow:0 0 20px #0002;
        width:100%;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      <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"/>
          <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"/>
          <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"/>
          <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"/>
          <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"></rect>
    </svg>
  </body>
</html>