ปรีณาภัสร์-พรปวีณ์-ศุภพล (Copy 7585)

✨ SUPAPHOL KODTOM

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#333;
        margin:1em;
        font-family:sans-serif;
      }
      svg{
        background:linear-gradient(to bottom,#06143A ,#030E29,#010716 );
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      
      
      <path fill="#04253D " stroke="#3d0099 " stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m4,5
               a2,2 0 1,1 4,0
               a2,2 0 1,1 -4,0
               "
            />
      <path fill="#909 " stroke="#608000 " stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m24,15
               a2,2 0 1,1 4,0
               a2,2 0 1,1 -4,0
               "
            />
      <path fill="#3c3" stroke="deeppink " stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m15,18
               a2,2 0 1,1 4,0
               a2,2 0 1,1 -4,0
               "
            />
      <path fill="#04253D " stroke="yellow" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m7,32
               a2,2 0 1,1 4,0
               a2,2 0 1,1 -4,0
               "
            />
      <path fill="#04253D " stroke="#4d4d00 " stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m75,12
               a1.2,1.2 0 1,1 2.4,0
               a1.2,1.2 0 1,1 -2.4,0
               "
            />
      <path fill="#04253D " stroke="#e0ccff " stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m4,55
               a2,2 0 1,1 4,0
               a2,2 0 1,1 -4,0
               "
            />
      <path fill="#ff00ff" stroke="green " stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m94,55
               a1.25,1.25 0 1,1 2.5,0
               a1.25,1.25 0 1,1 -2.5,0
               "
            />
      <path fill="#992600 " stroke="#b38f00" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m90,35
               a1.5,1.5 0 1,1 3,0
               a1.5,1.5 0 1,1 -3,0
               "
            />
      <path fill="#660 " stroke="#069 " stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m94,85
               a1.25,1.25 0 1,1 2.5,0
               a1.25,1.25 0 1,1 -2.5,0
               "
            />
      <path fill="#030 " stroke="#009 " stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m88,75
               a1.25,1.25 0 1,1 2.5,0
               a1.25,1.25 0 1,1 -2.5,0
               "
            />
      <path fill="#963 " stroke="yellow" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m62,5
               a1.25,1.25 0 1,1 2.5,0
               a1.25,1.25 0 1,1 -2.5,0
               "
            />
      <path fill="yellow " stroke="#fff " stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m88,5
               a1.25,1.25 0 1,1 2.5,0
               a1.25,1.25 0 1,1 -2.5,0
               "
            />
     <path fill="green" stroke="deeppink " stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m8,75
               a1.25,1.25 0 1,1 2.5,0
               a1.25,1.25 0 1,1 -2.5,0
               "
            />
      <path fill="#400080 " stroke="#93f " stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m28,5
               a1.25,1.25 0 1,1 2.5,0
               a1.25,1.25 0 1,1 -2.5,0
               "
            />
      <path fill="#039 " stroke="#006 " stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m48,3
               a1,1 0 1,1 2,0
               a1,1 0 1,1 -2,0
               "
            />
      
      
      <path id="motionPath"fill="#04253D " stroke="#fff " stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m16.5,50
               a25,30 0 1,1 70,0
               a25,30 0 1,1 -70,0
               "
            />
      <path id="Path"fill="#06031A " stroke="#3A20DC " stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
            d="
               m24,50
               a11,13 0 1,1 55,0
               a11,13 0 1,1 -55,0
               "
            />
      <svg>
      <path id="cat" fill="black" stroke="gray" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
            d="
               m-2,2
               a1,1 0 0,1 5,0
               a1,1 0 0,1 -5,0
               "/>
            <animateMotion 
           xlink:href="#cat"
           dur="2s"
           begin="0s"
           fill="freeze"
            repeatCount="indefinite"
             >
    <mpath xlink:href="#Path" />
  </animateMotion>
        </svg>
      <svg>
      <path id="cas" fill="#774E43 " stroke="#4A3B37 " stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
            d="
               m-3,2
               a1,1 0 0,1 5,0
               a1,1 0 0,1 -5,0
               "/>
            <animateMotion 
           xlink:href="#cas"
           dur="2.5s"
           begin="0s"
           fill="freeze"
            repeatCount="indefinite"
             >
    <mpath xlink:href="#Path" />
  </animateMotion>
        </svg>
      <svg>
      <path id="ca" fill="gray" stroke="brown" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
            d="
               m-2,2
               a1,1 0 0,1 5,0
               a1,1 0 0,1 -5,0
               "/>
            <animateMotion 
           xlink:href="#ca"
           dur="3.7s"
           begin="0s"
           fill="freeze"
            repeatCount="indefinite"
             >
    <mpath xlink:href="#motionPath" />
  </animateMotion>
        </svg>
      <svg>
      <path id="car" fill="#807774 " stroke="#ecd9c6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
            d="
               m-3,2
               a1,1 0 0,1 5,0
               a1,1 0 0,1 -5,0
               "/>
            <animateMotion 
           xlink:href="#car"
           dur="3s"
           begin="0s"
           fill="freeze"
            repeatCount="indefinite"
             >
    <mpath xlink:href="#motionPath" />
  </animateMotion>
        </svg>
        
      <svg>
      <animate attributeName="x" 
                     values="-100;10;20;0;-10;20;0;100" dur="5s" repeatCount="indefinite"></animate>
      <path fill="#0000" stroke="#b3ecff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m40,50
               a10,15 20 0,1 22,1
               a10,15 20 1,1 -22,-1
               "
            />
        <path fill="#cc6600"stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
               m40,50
               a10,10 0 0,1 20,0
               a10,10 0 0,1 -20,0
            	"
            />
        <path fill="#F38E07 " stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
               m40,50
               a5,5 0 0,1 18,0
               a5,5 0 0,1 -18,0
            	"
            />
      	<path fill="#0000" stroke="#b3ecff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"
            d="
               m62,50.1
               a10,15 20 0,1 -26,1
               "
            />
      <path fill="#0000" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
            d="
               m37,50
               a10,15 20 0,1 27,1
               a10,15 20 1,1 -27,-1
               "
            />
      	<path fill="#0000" stroke="#008fb3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
            d="
               m35,50
               a10,15 20 0,1 31,1
               a10,15 20 1,1 -31,-1
               "
               /></svg>
      
      <svg viewBox="0 0 100 100">
        <svg>
          <path fill="#EEEEEE" stroke="#EEEEEE" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
            d="
               m10,83
               a5,5 20 0,1 5,1
               a5,5 20 1,1 -5,-1
               "/>
          <path fill="#FFEB3B"
            d="
               m9.5,92
               a1,1 20 0,1 4,1
               a1,1 20 1,1 -4,-1
               "/>
          <path fill="#FFEB3B"
            d="
               m6,91
               a1,1 20 0,1 4,1
               a1,1 20 1,1 -4,-1
               "/>
          <path fill="#FFEB3B"
            d="
               m13,91
               a1,1 20 0,1 4,1
               a1,1 20 1,1 -4,-1
               "/>
          <path fill="#FF5722" stroke="#FF5722" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
            d="
               m16,88
               a2,10 90 0,1 5,1
               a2,10 90 1,1 -5,-1
               "/>
          <path fill="#FFEB3B"
            d="
               m14.8,89
               a1,11 90 0,1 8,1
               a1,11 90 1,1 -8,-1
               "/>
        </svg>
        <animate attributeName="y"
                 values="-5;0;-5;0;-5"
                 dur="3s" repeatCount="indefinite"></animate>
      </svg>
      <!svg>
      <!animate attributeName="d" values="
                                           m30,50
               a60,40 0 0,1 -10,-40
               a60,40 0 0,1 10,40;
                                           m30,50
               a60,40 0 0,1 0,-40
               a60,40 0 0,1 0,40;
                                           m30,50
               a60,40 0 0,1 -10,-40
               a60,40 0 0,1 10,40;
                                           " dur="1s" repeatCount="indefinite" />
      
      <!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"/>
          <!1path 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>