Hello World! (Copy 8123)
✨ CHANIKARN KAMWONG
<html> <head> <title>โกๆ</title> <style> @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap'); body{ margin: 0; } svg{ background-color: #93aec0; background-image: linear-gradient(145deg, #3498db 0%, #2c3e50 74%); width:100%; } #mountain-ice{ transition: 1.5s; } #mountain-ice:hover{ opacity: 0.75; cursor: pointer; } #key{ cursor: pointer; transition: 1.5s; } #chest{ transition: 1.5s; transition-delay: 5.5s; } .ice{ transition: 2s; } #paper{ display: none; opacity: 0; animation: appear 2s; animation-fill-mode: forwards; } #caption{ font-size: 37%; font-family: 'Itim', cursive; } @keyframes appear{ 100% { opacity: 1; } /* 100% { opacity: 1; } */ } </style> </head> <body> <svg viewBox="0 0 100 100"> <g> <path d="M109,49 l-26,48.5 l-25,-16.5" fill="#37aed9"></path> <path d="M13.8,77.5 l30,40 l22.5,-32 v-20 h-30" fill="#3aabd5"></path> <path d="M31.8,68.5 v1 l34,16.5 l-22,-37" fill="#48bee2"></path> <path d="M13.8,77.5 l40,28 l-22,-37" fill="#4abce1"></path> <path d="M100,49 v15 l-34,22 l-10,-25" fill="#a0dff1"></path> <path d="M100,49 v15 l-55,-3 v-9" fill="#6dd2ec"></path> <path d="M100,49 v15 l-25,-10" fill="#a2dff2"></path> <path d="M-1,49 l7.5,50 l7.5,-21 v-15" fill="#59c2e2"></path> <path d="M43,67 l23,19 l-9,-25 v-15 h-120" fill="#6bd1ec"></path> <path d="M-1,49 l10,17 l5,12 l19,-8 l10,-3 l-9,-12" fill="#a1def1"></path> <path d="M20.5,66 l12.5,4 l1,-19 h-20" fill="#73d2e8"></path> <path d="M-1,49 l10,17 l5,12 7,-12 v-15" fill="#73d2e8"></path> <path d="M-1,49 l10,17 l15,-17" fill="#9fdff1"></path> <path d="M-1,49 h10 v17" fill="#88d5e7"></path> <path d="M85,49 l5,10 l1,-2 l3,5 l1-10" fill="#d4eaef"></path> <path d="M-1,49 l3,17 l2,-6 l1,3 l2,-13" fill="#d4eaef"></path> <path d="M25,48 l1,10 l1,-3 h10 l1,3 l1,-9" fill="#d4eaef"></path> <path d="M0,43.5 l10,-2 l17,-2 l50,1 l17,3 l7,2 v5 l-5,2 l-17,2 l-15,-1 l-17,-1.5 l-18,1 l-15,-0.5 l-12,-0.5 l-5,-1" fill="#d4eaef" ></path> </g> <g transform="translate(7,-3)"> <g id="chest" transform="translate(10,30) scale(0.3)"> <path d="M50,50 h-2 l-1,-10 l0.5,-3 q2,-6 3,-5.7 h24 q2,0 3,5.7 l0.5,3 l-1,10 h-25.1" fill="#fdb62f" stroke="none" stroke-width="0.3"></path> <path d="M50,50 l-1,-10 l0.5,-3 q2,-6 3,-5.7 h20 q2,0 3,5.7 l0.5,3 l-1,10 h-25.1" fill="#8c421c" stroke="none" stroke-width="0.3"></path> <line x1=48 y1=40 x2=77 y2=40 stroke="#fdb62f" stroke-width="0.75"></line> <!-- <path d="M49.5,37 h26 l-0.75,-3 h-24.1" fill="#964820"></path> --> <path d="M49.5,37 h26" stroke="#964820" stroke-width="0.2"></path> <path d="M50.75,34 h24" stroke="#964820" stroke-width="0.2"></path> <path d="M53,40.5 l0.5,9.5" stroke="#964820" stroke-width="0.2"></path> <path d="M57,40.5 l0.5,9.5" stroke="#964820" stroke-width="0.2"></path> <path d="M61,40.5 l0.5,9.5" stroke="#964820" stroke-width="0.2"></path> <path d="M65,40.5 l-0.5,9.5" stroke="#964820" stroke-width="0.2"></path> <path d="M69,40.5 l-0.5,9.5" stroke="#964820" stroke-width="0.2"></path> <path d="M73,40.5 l-0.5,9.5" stroke="#964820" stroke-width="0.2"></path> <circle cx=63 cy=40 r=1.5 stroke="#30160a" fill="none"></circle> <g id="key"> <ellipse cx=63 cy=42.5 rx=1 ry=1.5 stroke="#fdb62f" fill="none" stroke-width="0.75"></ellipse> <rect x="60.95" y="42" rx="1" ry="1" width="4" height=4 fill="#fdb62f"></rect> <circle cx=63 cy=43.25 r=0.35 fill="#30160a"></circle> <line x1=63 y1=43.25 x2=63 y2=45 stroke="#30160a" stroke-width=0.3 stroke-linejoin="round" stroke-linecap="round"></line> </g> </g> <g transform="scale(0.7)" id="mountain-ice"> <path class="ice" d="M80,65.5 l-0.1,-4.1 l-9,-1" fill="#6594db"></path> <path class="ice" d="M78,69.5 l2,-4 l-7,-6" fill="#c7e6ff"></path> <path class="ice" d="M62,68 l16,1.5 l-4,-10 h-10" fill="#a2d8ff"></path> <path class="ice" d="M70.75,57.3 l9,4 l-17,-1" fill="#c8e6fe"></path> <path class="ice" d="M60.65,54.9 l-7,-13.9 v15" fill="#164398"></path> <path class="ice" d="M48.65,41.1 l5,-0.1 l2,10" fill="#486ec6"></path> <path class="ice" d="M48.65,50.3 l12,5 l-15,-17.75" fill="#01498f"></path> <path class="ice" d="M53.65,59.3 l17,-2 l-5.5,3 l-2.9,7.7 h-10" fill="#374f7d"></path> <path class="ice" d="M53.65,59.4 l17,-2 l-25,-8.25" fill="#5779a9"></path> <path class="ice" d="M44.25,74 h13 l5,-6 l-8.6,-8.6" fill="#113873"></path> <path class="ice" d="M53.75,59.5 l-7,-13 v18" fill="#133c85"></path> <path class="ice" d="M44.25,74 l9.5,-14.5 l-7,2" fill="#3a5a8d"></path> <path class="ice" d="M32.1,73.75 l-6,4 l12.5,-2" fill="#92cffe"></path> <path class="ice" d="M34.75,32 l3,-16 l-3.5,6.6" fill="#fcfffe"></path> <path class="ice" d="M34.75,32 l3,-16 l5.5,20 v3 h-5" fill="#d0f0fd"></path> <path class="ice" d="M37.75,38 l6,-7.5 l5.1,11 h-15" fill="#154dcb"></path> <path class="ice" d="M37.75,38 l6,-7.5 l-9,3.55" fill="#fffbfe"></path> <path class="ice" d="M43.8,58.1 l5,3 l0,-20" fill="#6293d5"></path> <path class="ice" d="M43.8,58.1 l5,3 l-4.5,13" fill="#154399"></path> <path class="ice" d="M43.8,58.1 l5,3 l-3,-15" fill="#004175"></path> <path class="ice" d="M39.8,61.6 l4,-3.5 l5,-17 l-11,-3 l-0.5,-5 l-7,-3" fill="#aad2ff"></path> <path class="ice" d="M39.8,61.6 l4,-3.5 l5,-17 l-11,-3 l-3,7" fill="#b8e1ff"></path> <path class="ice" d="M39.8,61.6 l4,-3.5 l5,-17 l-11,-3 l0.5,15" fill="#4979db"></path> <path class="ice" d="M39.8,61.6 l4,-3.5 l5,-17 l-15,10" fill="#00519f"></path> <path class="ice" d="M39.8,61.6 l4,-3.5 l0.5,16 h-10" fill="#6daafc"></path> <path class="ice" d="M39.8,61.6 v5 h-5 l-2,-10" fill="#144fc2"></path> <path class="ice" d="M36.75,60.6 l7.5,13.5 l-5.55,1.5" fill="#4979db"></path> <path class="ice" d="M39.8,61.6 l4,-3.5 l-8.4,-15 l-3,7" fill="#6da9ff"></path> <path class="ice" d="M39.8,61.6 l4,-3.5 l-10,-10.5" fill="#4b79d7"></path> <path class="ice" d="M36.8,60.6 l3,1 l-5,-13.5 l-3,6" fill="#b8ddff"></path> <path class="ice" d="M36.85,61.25 l-2,-15 l-5,10" fill="#8fc0fd"></path> <path class="ice" d="M32.25,73.8 l6.5,2 l-2,-15.25 l-5,-2.35" fill="#6ca8fe"></path> <path class="ice" d="M34.25,59.5 l1.4,-16.3 l-12,15" fill="#759fe7"></path> <path class="ice" d="M27.7,69.7 l0.55,-14.8 l4,19 l2,-14.5 l-6,-3.5" fill="#4878da"></path> <path class="ice" d="M32.2,29.2 l2,-6.5 l1.3,20.7" fill="#cdedf8"></path> <path class="ice" d="M32.2,29.2 l2,-6.5 l-4.5,4.8 l-3,8.8" fill="#92cffb"></path> <path class="ice" d="M35.45,43.2 l-7,7 l3.75,-21" fill="#a9cffe"></path> <path class="ice" d="M28.45,56.2 l7,-13 l-10,5" fill="#d7eefe"></path> <path class="ice" d="M28.45,56.2 l3.75,-27 l-5.6,7" fill="#c0e9ff"></path> <path class="ice" d="M24.35,46.2 l2.25,-10 l1.85,20 h-5" fill="#18459d"></path> <path class="ice" d="M27.7,69.7 l0.55,-14.8 l4,19" fill="#00304e"></path> <path class="ice" d="M27.75,69.75 l0.55,-14.8 h-10 l-5,10" fill="#103670"></path> <path class="ice" d="M21.75,71.75 l6,-2 l-10,-10" fill="#465b71"></path> <path class="ice" d="M19,71 l2.75,0.75 l-1,-20" fill="#5a6c74"></path> <path class="ice" d="M12.5,67 l-0.2,-7 l13,-10 l3,5 l-7.5,9" fill="#3b5995"></path> <path class="ice" d="M12.5,67 l-0.2,-7 l13,-10 L19,71" fill="#506d94"></path> <path class="ice" d="M12.5,67 l-0.2,-7 l13,-10 l-0.9,-4 L12.3,60" fill="#bcdffc"></path> <path class="ice" d="M12.5,67 l-0.2,-7 l13,-10" fill="#94d1fe"></path> <path class="ice" d="M19,71 L12.5,67 l1.15,-1.5" fill="#2a4463"></path> <path class="ice" d="M7,70 l12,1 l-6.5,-4" fill="#b7defd"></path> </g> <g id="paper" transform="translate(-19,-5)"> <rect x="42.5" y="40" width=30 height=10 rx=1 ry=1 fill=white></rect> <text x=43.75 y=46.7 id="caption">ผนงรจตกม</text> </g> </g> </svg> <!-- <img src="https://imgur.com/q5t6V8f.png"> <img src="https://imgur.com/lW5rHCs.png"> --> <script> const chest = document.querySelector('#chest'); const mountain = document.querySelector('#mountain-ice'); const ice = document.querySelectorAll('.ice'); const key = document.querySelector('#key'); const paper = document.getElementById('paper'); document.getElementById('mountain-ice').addEventListener('click', function(){ chest.style.transform = "scale(1.2) translate(-2vw,-0.5vw)"; for (i = 0; i < ice.length; i++) { var num = i/10; ice[i].style.transitionDelay = num+"s"; ice[i].style.transform = "translateY(2vw)"; ice[i].style.opacity = "0"; ice[i].style.cursor = "context-menu"; } }) document.getElementById('key').addEventListener('click', function(){ var text; key.style.transform = "translateX(-2vw)" key.style.opacity = "0"; document.querySelector('#paper').style.display = "block" }) </script> </body> </html>