SVG Path Arcs (Branch 7871) (Copy 8095)
✨ นายฉัตริน รักษา
<html> <head> <title>Let's Start </title> <style> body{ background:black; margin:1em; font-family:sans-serif; color:white; stroke-width:1; animation-name:color-background; animation-duration:20s; animation-iteration-count:infinite; } svg {width:100%;} @keyframes color-background { 0% {background-color:black;} 6.25% {background-color:#6A5ACD} 12.5% {background-color:#104E8B;} 18.75% {background-color:#009ACD;} 25% {background-color:#3CB371;} 31.25% {background-color: #FFFF66;} 37.5% {background-color:#FBCF61;} 43.75% {background-color:#EE7621;} 50% {background-color:#ED2939;} 56.25% {background-color:#EE7621;} 62.5% {background-color:#FBCF61;} 68.5% {background-color: #FFFF66;} 75% {background-color:#3CB371;} 81.25% {background-color:#009ACD;} 87.5% {background-color:#104E8B;} 93.75% {background-color:#6A5ACD} 100% {background-color:black;} } .path { transition:fill 0.4s ease-out; } .path:hover{ fill:black; } </style> </head> <body> <svg viewBox="0 0 1000 1000"> <path d="M500 500 L430 490 L410 400 Z" stroke="white" fill="#D6DBDF" class="path"/> <path d="M500 500 L570 490 L590 400 Z" stroke="white" fill="#D6DBDf" class="path"/> <path d="M500 500 L550 395 L590 400 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M500 500 L450 395 L410 400 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M500 500 L450 395 L500 430 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M500 500 L550 395 L500 430 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M535 380 L550 395 L500 430 Z" stroke="white" fill="#85929E" class="path"/> <path d="M465 380 L450 395 L500 430 Z" stroke="white" fill="#85929E" class="path"/> <path d="M465 380 L480 365 L500 430 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M535 380 L520 365 L500 430 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M480 365 L520 365 L500 430 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M450 395 L470 300 L480 365 Z" stroke="white" fill="#D6DBDF" class="path"/> <path d="M550 395 L530 300 L520 365 Z" stroke="white" fill="#D6DBDF" class="path"/> <path d="M500 500 L570 490 L500 600 Z" stroke="white" fill="#AEB6BF" class="path"/> <path d="M500 500 L430 490 L500 600 Z" stroke="white" fill="#AEB6BF" class="path"/> <path d="M500 740 L430 490 L500 600 Z" stroke="white" fill="#D6DBDF" class="path"/> <path d="M500 740 L570 490 L500 600 Z" stroke="white" fill="#D6DBDF" class="path"/> <path d="M500 740 L554 550 L590 620 Z" stroke="white" fill="#AEB6BF" class="path"/> <path d="M500 740 L446 550 L410 620 Z" stroke="white" fill="#AEB6BF" class="path"/> <path d="M610 550 L554 550 L590 620 Z" stroke="white" fill="#AEB6BF" class="path"/> <path d="M390 550 L446 550 L410 620 Z" stroke="white" fill="#AEB6BF" class="path"/> <path d="M390 550 L350 560 L410 620 Z" stroke="white" fill="#85929E" class="path"/> <path d="M610 550 L650 560 L590 620 Z" stroke="white" fill="#85929E" class="path"/> <path d="M610 550 L650 560 L570 490 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M390 550 L350 560 L430 490 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M370 490 L350 560 L430 490 Z" stroke="white" fill="#AEB6BF" class="path"/> <path d="M630 490 L650 560 L570 490 Z" stroke="white" fill="#AEB6BF" class="path"/> <path d="M630 490 L590 400 L570 490 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M370 490 L410 400 L430 490 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M330 380 L410 400 L370 490 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M670 380 L590 400 L630 490 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M760 380 L670 380 L630 490 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M240 380 L330 380 L370 490 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M240 380 L200 450 L370 490 Z" stroke="white" fill="#D6DBDF" class="path"/> <path d="M760 380 L800 450 L630 490 Z" stroke="white" fill="#D6DBDF" class="path"/> <path d="M700 500 L800 450 L630 490 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M300 500 L200 450 L370 490 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M300 500 L350 560 L370 490 Z" stroke="white" fill="#85929E" class="path"/> <path d="M700 500 L650 560 L630 490 Z" stroke="white" fill="#85929E" class="path"/> <path d="M700 500 L650 560 L840 510 Z" stroke="white" fill="#85929E" class="path"/> <path d="M300 500 L350 560 L160 510 Z" stroke="white" fill="#85929E" class="path"/> <path d="M300 500 L200 450 L160 510 Z" stroke="white" fill="#D6DBDF" class="path"/> <path d="M700 500 L800 450 L840 510 Z" stroke="white" fill="#D6DBDF" class="path"/> <path d="M835 450 L800 450 L840 510 Z" stroke="white" fill="#D6DBDF" class="path"/> <path d="M165 450 L200 450 L160 510 Z" stroke="white" fill="#D6DBDF" class="path"/> <path d="M165 450 L200 450 L240 380 Z" stroke="white" fill="#D6DBDF" class="path"/> <path d="M165 450 L40 300 L240 380 Z" stroke="white" fill="#85929E" class="path"/> <path d="M835 450 L960 300 L760 380 Z" stroke="white" fill="#85929E" class="path"/> <path d="M700 300 L960 300 L760 380 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M300 300 L40 300 L240 380 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M300 300 L330 380 L240 380 Z" stroke="white" fill="#D6DBDF" class="path"/> <path d="M700 300 L760 380 L670 380 Z" stroke="white" fill="#D6DBDF" class="path"/> <path d="M800 450 L760 380 L835 450 Z" stroke="white" fill="#D6DBDF" class="path"/> <path d="M390 550 L446 550 L430 490 Z" stroke="white" fill="#EBEDEF" class="path"/> <path d="M610 550 L554 550 L570 490 Z" stroke="white" fill="#EBEDEF" class="path"/> <!-- Grid --> </svg> </body> </html>