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>