Hello World! (Copy 7898) (Branch 8005)

✨ นายชินทัศน์ พรหมมี

<html>
<head>
	<title>Take Home 63070099</title>
  <style>
    body{
      background:black;
      margin:1em;
      font-family:sans-serif;
    }
    .monmon{
		animation:logspin 5s linear infinite;
    }
    .momm{
		animation:logspin2 5s linear infinite;
    }
    @keyframes logspin {
  100% {
    transform: rotateZ(360deg);
   }
  }
   @keyframes logspin2 {
  		100% {
    transform: rotateZ(-360deg);
   }
  </style>
</head>
<body>
<svg viewBox="-100 -150 200 300">
  <rect  x="21" y="0" fill="#F1EDAD"width="0.5" height="0.5">
  <animate attributeName="opacity"
             values="0.1;1;0.1" dur="2s"
             repeatCount="indefinite"/>
  <animate attributeName="fill"
             values="#F70B49;#F7270B;#E6F70B;#81F70B;#0B50F7;#A40BF7" dur="5s"
             repeatCount="indefinite"/></rect>
  <rect  x="31" y="20" fill="#F1EDAD"width="0.5" height="0.5">
   <animate attributeName="opacity"
             values="0.1;1;0.1" dur="1.2s"
             repeatCount="indefinite"/><animate attributeName="fill"
             values="#F70B49;#F7270B;#E6F70B;#81F70B;#0B50F7;#A40BF7" dur="5s"
             repeatCount="indefinite"/></rect>
  <rect  x="21" y="23" fill="#F1EDAD"width="0.5" height="0.5">
     <animate attributeName="opacity"
             values="0.1;1;0.1" dur="3s"
             repeatCount="indefinite"/></rect>
  <rect  x="1" y="23" fill="#F1EDAD"width="0.5" height="0.5">
     <animate attributeName="opacity"
             values="0.1;1;0.1" dur="2s"
             repeatCount="indefinite"/><animate attributeName="fill"
             values="#F70B49;#F7270B;#E6F70B;#81F70B;#0B50F7;#A40BF7" dur="5s"
             repeatCount="indefinite"/></rect>
  <rect  x="-10" y="18" fill="#F1EDAD"width="0.5" height="0.5">
     <animate attributeName="opacity"
             values="0.1;1;0.1" dur="1.2s"
             repeatCount="indefinite"/></rect>
  <rect  x="21" y="-10" fill="#F1EDAD"width="0.5" height="0.5">
     <animate attributeName="opacity"
             values="0.1;1;0.1" dur="3s"
             repeatCount="indefinite"/></rect>
  <rect  x="-10" y="-10" fill="#F1EDAD"width="0.5" height="0.5">
     <animate attributeName="opacity"
             values="0.1;1;0.1" dur="2s"
             repeatCount="indefinite"/>
  <animate attributeName="fill"
             values="#F70B49;#F7270B;#E6F70B;#81F70B;#0B50F7;#A40BF7" dur="5s"
             repeatCount="indefinite"/></rect>
  <rect  x="-14" y="-20" fill="#F1EDAD"width="0.5" height="0.5">
     <animate attributeName="opacity"
             values="0.1;1;0.1" dur="1.2s"
             repeatCount="indefinite"/>
  <animate attributeName="fill"
             values="#F70B49;#F7270B;#E6F70B;#81F70B;#0B50F7;#A40BF7" dur="5s"
             repeatCount="indefinite"/></rect>
   <rect  x="-30" y="-10" fill="#F1EDAD"width="0.5" height="0.5">
     <animate attributeName="opacity"
             values="0.1;1;0.1" dur="3s"
             repeatCount="indefinite"/></rect>
  <rect  x="-32" y="-5" fill="#F1EDAD"width="0.5" height="0.5">
     <animate attributeName="opacity"
             values="0.1;1;0.1" dur="2s"
             repeatCount="indefinite"/></rect>
  <rect  x="-32" y="20" fill="#F1EDAD"width="0.5" height="0.5">
     <animate attributeName="opacity"
             values="0.1;1;0.1" dur="1.2s"
             repeatCount="indefinite"/><animate attributeName="fill"
             values="#F70B49;#F7270B;#E6F70B;#81F70B;#0B50F7;#A40BF7" dur="5s"
             repeatCount="indefinite"/></rect>
  <rect  x="-35" y="-8" fill="#F1EDAD"width="0.5" height="0.5">
     <animate attributeName="opacity"
             values="0.1;1;0.1" dur="1.2s"
             repeatCount="indefinite"/></rect>
  <rect  x="20" y="-25" fill="#F1EDAD"width="0.5" height="0.5">
     <animate attributeName="opacity"
             values="0.1;1;0.1" dur="2s"
             repeatCount="indefinite"/></rect>
  <rect  x="15" y="30" fill="#F1EDAD"width="0.5" height="0.5">
     <animate attributeName="opacity"
             values="0.1;1;0.1" dur="1.2s"
             repeatCount="indefinite"/></rect>
  <rect  x="-15" y="-28" fill="#F1EDAD"width="0.5" height="0.5">
     <animate attributeName="opacity"
             values="0.1;1;0.1" dur="1.2s"
             repeatCount="indefinite"/></rect>
  
    <circle fill="#E4FBF5" cx="0" cy="0" r="10" opacity="0.5" stroke="none">
  <animate attributeName="opacity"
             values="0;.4;0" dur="2s"
             repeatCount="indefinite"/>
  <animate attributeName="fill"
             values="#4DE6BD;#E4FBF5;#4DE6BD" dur="2s"
             repeatCount="indefinite"/>
  <animate attributeName="r"
             values="10;12;10;" dur="2s"
             repeatCount="indefinite"/>
	</circle>
  <circle fill="#E4FBF5" cx="0" cy="0" r="10" opacity="0.5" stroke="none">
  <animate attributeName="opacity"
             values="0;.4;0" dur="2s"
             repeatCount="indefinite"/>
  <animate attributeName="fill"
             values="#4DE6BD;#E4FBF5;#4DE6BD" dur="2s"
             repeatCount="indefinite"/>
  <animate attributeName="r"
             values="10;12;10;11;" dur="2.1s"
             repeatCount="indefinite"/>
  </circle>
  <circle fill="#E4FBF5" cx="0" cy="0" r="10" opacity="0.5" stroke="none">
  <animate attributeName="opacity"
             values="0;.4;0" dur="10s"
             repeatCount="indefinite"/>
  <animate attributeName="fill"
             values="#4DE6BD;#E4FBF5;#4DE6BD" dur="2s"
             repeatCount="indefinite"/>
  <animate attributeName="r"
             values="10;10;10;90" dur="10s"
             repeatCount="indefinite"/>
  </circle>
  <circle fill=#4DE6BD cx="0" cy="0" r="9.6"/>
  <circle fill="#EEEEEE" cx="0" cy="0" r="8"/>
  <circle fill="white" cx="0" cy="0" r="6">
  <animate id="animation3"
             attributeName="r"
             values="6;8;6" dur="5s"
             repeatCount="indefinite"/>
	</circle>
  	
   <path fill="none" stroke="#E4FBF5" stroke-linejoin="round" stroke-width="0.1"
    d="M -20,0
       A1,1 0 0 1 20 0" >
  <animate attributeName="d"
             values="M -20,0
       A1,1 0 0 1 20 0;M -25,0
       A1,1 0 0 1 25 0;M -20,0
       A1,1 0 0 1 20 0;" dur="10s"
             repeatCount="indefinite"/>
	</path>
  <path fill="none" stroke="#E4FBF5" stroke-linejoin="round" stroke-width="0.1"
    d="M -20,0
       A1,1 0 0 0 20 0" >
     <animate attributeName="d"
             values="M -20,0
       A1,1 0 0 0 20 0;M -25,0
       A1,1 0 0 0 25 0;M -20,0
       A1,1 0 0 0 20 0" dur="10s"
             repeatCount="indefinite"/>
	</path>
  <path fill="none" stroke="#E4FBF5" stroke-linejoin="round" stroke-width="0.1"
    d="M -30,0
       A1,1 0 0 1 30 0" >
  <animate attributeName="d"
             values="M -30,0
       A1,1 0 0 1 30 0;M -35,0
       A1,1 0 0 1 35 0;M -30,0
       A1,1 0 0 1 30 0;" dur="10s"
             repeatCount="indefinite"/>
	</path>
  <path fill="none" stroke="#E4FBF5" stroke-linejoin="round" stroke-width="0.1"
    d="M -30,0
       A1,1 0 0 0 30 0" >
     <animate attributeName="d"
             values="M -30,0
       A1,1 0 0 0 30 0;M -35,0
       A1,1 0 0 0 35 0;M -30,0
       A1,1 0 0 0 30 0" dur="10s"
             repeatCount="indefinite"/>
	</path>
   
    <path class = "momm" fill="none" stroke="#E4FBF5" stroke-linejoin="round" stroke-width="0.1"
    d="M -40,0
       A1,1 0 0 1 40 0" >
  <animate attributeName="d"
             values="M -40,0
       A1,1 0 0 1 40 0;M -45,0
       A1,1 0 0 1 45 0;M -40,0
       A1,1 0 0 1 40 0;" dur="10s"
             repeatCount="indefinite"/>
	</path>
  	<path class = "monmon" fill="none" stroke="red" stroke-linejoin="round" stroke-width="0.1"
    d="M -35,0
       A1,1 0 10 0 40 0" >
  <animate attributeName="d"
             values="M -38,0
       A1,1 0 0 0 38 0;M -43,0
       A1,1 0 0 0 43 0;M -38,0
       A1,1 0 0 0 38 0;" dur="10s"
             repeatCount="indefinite"/>
	</path>
  <circle class = "momm" fill="white" cx="30" cy="0" r="1.5">
    <animate attributeName="cx"
             values="30;35;30" dur="10s"
             repeatCount="indefinite"/>
    <animate attributeName="r"
             values="1;1.5;1.3;1" dur="5s"
             repeatCount="indefinite"/>
    <animate attributeName="fill"
             values="#F70B49;#F7270B;#E6F70B;#81F70B;#0B50F7;#A40BF7" dur="5s"
             repeatCount="indefinite"/>
	</circle>
  
      
  	<circle class = "momm" fill="white" cx="-23" cy="20" r="1.5">
    <animate attributeName="cx"
             values="-23;-28;-23" dur="10s"
             repeatCount="indefinite"/>
    <animate attributeName="r"
             values="1;1.5;1.3;1" dur="5s"
             repeatCount="indefinite"/>
	</circle>
  
   <ellipse class = "momm"  fill="red" cx="-23" cy="20" rx="1" ry="0.5">
  		<animate attributeName="cx"
             values="-23;-28;-23" dur="10s"
             repeatCount="indefinite"/>
    	<animate attributeName="rx"
             values="2;3;2;3" dur="5s"
             repeatCount="indefinite"/>
	</ellipse>
  
  
  <path class = "monmon" fill="#E5DCDC" stroke="black" stroke-opacity="0.3" stroke-linejoin="round" stroke-width="0.5"
    d="M 19.4,0
       h1 v5 a1,1 0 0 0 1.6 1 v-7 h-2 z" >
    <animate attributeName="d"
             values="M 19.4,0
       h1 v5 a1,1 0 0 0 1.6 1 v-7 h-2 z;M 24.4,h1 v5 a1,1 0 0 0 1.6 1 v-7 h-2 z" dur="10s"
             repeatCount="indefinite"/>
	</path>
   <rect class = "monmon" x="21" y="0" fill="red"width="0.5" height="0.5"/>
   <rect class = "monmon" x="21" y="1" fill="red"width="0.5" height="0.5"/>
   <rect class = "monmon" x="21" y="2" fill="red"width="0.5" height="0.5"/>
   <rect class = "monmon" x="21" y="3" fill="red"width="0.5" height="0.5"/>
   <rect class = "monmon" x="21" y="5" fill="red"width="0.5" height="1.5"/>
  
  	<path class = "monmon" fill="none" stroke="yellow" stroke-linejoin="round" stroke-width="0.3" stroke-opacity="0.3"
    d="M -18,10
       l3 0,l-2 3, z" >
    <animate attributeName="d"
             values="M -18,10
       l3 0,l-2 3, z;M -24,10
       l3 0,l-2 3, z;M -18,10
       l3 0,l-2 3, z" dur="10s"
             repeatCount="indefinite"/>
     <animate attributeName="stroke-opacity"
             values="0.1;1;0.1" dur="5s"
             repeatCount="indefinite"/>
	</path>
  <path fill="#D8CEA8" stroke="yellow" stroke-linejoin="round" stroke-width="0.3" stroke-opacity="0.3"
    d="M 10,-60
       h2 l2 -3 v-10 l2 -10 l2 -10 l4 -5 z">
	</path>
  <path fill="none" stroke="yellow" stroke-linejoin="round" stroke-width="0.3" stroke-opacity="0.3"
    d="M 10,10
       C20,20 30,30 10,50">
	</path>
  <circle fill="white" cx="10" cy="10" r="1.5">
	</circle>
  <circle fill="white" cx="30" cy="30" r="1.5">
	</circle>
  <circle fill="white" cx="30" cy="30" r="1.5">
	</circle>
  <circle fill="white" cx="10" cy="50" r="1.5">
	</circle>
</svg>
</body>
</html>