Hello World! (Copy 7953)
✨ Oof Thiraphop
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; margin: 0; overflow:hidden; } svg{ background:#80DEEA; box-shadow:0 0 20px #0002; width:100%; } .polygon{ stroke-linecap: round; stroke-linejoin: round; } .windrange{ position: absolute; width: 5%; height: 10%; background: black; border-radius: 100%; color: white; text-align: center; display: flex; align-items: center; } .windrange:nth-child(2){ top: 0%; left: 0%; } .windrange:nth-child(3){ top: 0%; left: 10%; } .windrange:nth-child(4){ top: 0%; left: 20%; } .tree{ transition: all 1s ease-in-out; filter: drop-shadow(1px 1px 1px orange) invert(75%); } </style> </head> <body> <svg viewBox="0 0 100 100"> <defs> <pattern id="isometric" width="10" height="5" viewBox="0 0 10 5" patternUnits="userSpaceOnUse" x="0" y="0" > <g stroke="#0004" stroke-dasharray="2 1" stroke-width=".25"> <path d="m0,0 v100"/> <path d="m10,0 v100"/> </g> <path d="m5,0 v100" stroke-width=".25" stroke="#0004" stroke-dasharray=".5"/> <g stroke-width=".25" stroke="#0004"> <path d="m0,0 l10,5"/> <path d="m10,0 l-10,5"/> </g> </pattern> </defs> <!-- code here --> <!--ground--> <path d="m0 30 c100 -12 100 -6 180 0 C200 50 200 44 200 50 v50 h-200 z" stroke="green" fill=green></path> <rect fill="url(#isometric)" width="1000" height="1000"/> <!--tree--> <g class="tree" transform="translate(-60, 0)"> <path d="m70 30 q3 -4 0 -10 q2 5 6 0 q-4 4 0 10 z" fill=""></path> <polygon points="72 22 65 22 60 18 65 14 62 12 68 12 74 6 78 14 82 10 82 16 86 20 84 24 80 26 z" fill="hsla(19, 100%, 72%, 1)"></polygon> <polygon class="polygon" points="72 22 60 18 64 14 z" fill="hsla(19, 100%, 58%, 1)"> </polygon> <polygon class="polygon" points="74 6 74 18 60 12 68 12 z" fill="hsla(19, 100%, 65%, 1)"></polygon> <polygon class="polygon" points="74 18 78 20 72 25 72 22 64 14" fill="hsla(19, 100%, 65%, 1)"></polygon> <polygon class="polygon" points="78 20 80 26 74 23 z" fill="hsla(19, 100%, 49%, 1)"> </polygon> <polygon class="polygon" points="78 20 86 20 84 24 z" fill="hsla(19, 100%, 42%, 1)"> </polygon> <polygon class="polygon" points="84 24 80 26 78 20 z" fill="hsla(19, 99%, 48%, 1)"></polygon> <polygon class="polygon" points="74 18 78 14 74 6 z" fill="hsla(19, 100%, 36%, 1)"></polygon> <polygon class="polygon" points="74 18 82 16 82 10 z" fill="hsla(19, 91%, 41%, 1)"></polygon> </g> <g class="tree" transform="translate(-40, 2)"> <path d="m70 30 q3 -4 0 -10 q2 5 6 0 q-4 4 0 10 z" fill=""></path> <polygon points="72 22 65 22 60 18 65 14 62 12 68 12 74 6 78 14 82 10 82 16 86 20 84 24 80 26 z" fill="hsla(19, 100%, 72%, 1)"></polygon> <polygon class="polygon" points="72 22 60 18 64 14 z" fill="hsla(19, 100%, 58%, 1)"> </polygon> <polygon class="polygon" points="74 6 74 18 60 12 68 12 z" fill="hsla(19, 100%, 65%, 1)"></polygon> <polygon class="polygon" points="74 18 78 20 72 25 72 22 64 14" fill="hsla(19, 100%, 65%, 1)"></polygon> <polygon class="polygon" points="78 20 80 26 74 23 z" fill="hsla(19, 100%, 49%, 1)"> </polygon> <polygon class="polygon" points="78 20 86 20 84 24 z" fill="hsla(19, 100%, 42%, 1)"> </polygon> <polygon class="polygon" points="84 24 80 26 78 20 z" fill="hsla(19, 99%, 48%, 1)"></polygon> <polygon class="polygon" points="74 18 78 14 74 6 z" fill="hsla(19, 100%, 36%, 1)"></polygon> <polygon class="polygon" points="74 18 82 16 82 10 z" fill="hsla(19, 91%, 41%, 1)"></polygon> </g> <g class="tree" transform="translate(-20, -2)"> <path d="m70 30 q3 -4 0 -10 q2 5 6 0 q-4 4 0 10 z" fill=""></path> <polygon points="72 22 65 22 60 18 65 14 62 12 68 12 74 6 78 14 82 10 82 16 86 20 84 24 80 26 z" fill="hsla(19, 100%, 72%, 1)"></polygon> <polygon class="polygon" points="72 22 60 18 64 14 z" fill="hsla(19, 100%, 58%, 1)"> </polygon> <polygon class="polygon" points="74 6 74 18 60 12 68 12 z" fill="hsla(19, 100%, 65%, 1)"></polygon> <polygon class="polygon" points="74 18 78 20 72 25 72 22 64 14" fill="hsla(19, 100%, 65%, 1)"></polygon> <polygon class="polygon" points="78 20 80 26 74 23 z" fill="hsla(19, 100%, 49%, 1)"> </polygon> <polygon class="polygon" points="78 20 86 20 84 24 z" fill="hsla(19, 100%, 42%, 1)"> </polygon> <polygon class="polygon" points="84 24 80 26 78 20 z" fill="hsla(19, 99%, 48%, 1)"></polygon> <polygon class="polygon" points="74 18 78 14 74 6 z" fill="hsla(19, 100%, 36%, 1)"></polygon> <polygon class="polygon" points="74 18 82 16 82 10 z" fill="hsla(19, 91%, 41%, 1)"></polygon> </g> <g class="tree" transform="translate(0,1)"> <path d="m70 30 q3 -4 0 -10 q2 5 6 0 q-4 4 0 10 z" fill=""></path> <polygon points="72 22 65 22 60 18 65 14 62 12 68 12 74 6 78 14 82 10 82 16 86 20 84 24 80 26 z" fill="hsla(19, 100%, 72%, 1)"></polygon> <polygon class="polygon" points="72 22 60 18 64 14 z" fill="hsla(19, 100%, 58%, 1)"> </polygon> <polygon class="polygon" points="74 6 74 18 60 12 68 12 z" fill="hsla(19, 100%, 65%, 1)"></polygon> <polygon class="polygon" points="74 18 78 20 72 25 72 22 64 14" fill="hsla(19, 100%, 65%, 1)"></polygon> <polygon class="polygon" points="78 20 80 26 74 23 z" fill="hsla(19, 100%, 49%, 1)"> </polygon> <polygon class="polygon" points="78 20 86 20 84 24 z" fill="hsla(19, 100%, 42%, 1)"> </polygon> <polygon class="polygon" points="84 24 80 26 78 20 z" fill="hsla(19, 99%, 48%, 1)"></polygon> <polygon class="polygon" points="74 18 78 14 74 6 z" fill="hsla(19, 100%, 36%, 1)"></polygon> <polygon class="polygon" points="74 18 82 16 82 10 z" fill="hsla(19, 91%, 41%, 1)"></polygon> </g> <g class="tree" transform="translate(20, -2)"> <path d="m70 30 q3 -4 0 -10 q2 5 6 0 q-4 4 0 10 z" fill=""></path> <polygon points="72 22 65 22 60 18 65 14 62 12 68 12 74 6 78 14 82 10 82 16 86 20 84 24 80 26 z" fill="hsla(19, 100%, 72%, 1)"></polygon> <polygon class="polygon" points="72 22 60 18 64 14 z" fill="hsla(19, 100%, 58%, 1)"> </polygon> <polygon class="polygon" points="74 6 74 18 60 12 68 12 z" fill="hsla(19, 100%, 65%, 1)"></polygon> <polygon class="polygon" points="74 18 78 20 72 25 72 22 64 14" fill="hsla(19, 100%, 65%, 1)"></polygon> <polygon class="polygon" points="78 20 80 26 74 23 z" fill="hsla(19, 100%, 49%, 1)"> </polygon> <polygon class="polygon" points="78 20 86 20 84 24 z" fill="hsla(19, 100%, 42%, 1)"> </polygon> <polygon class="polygon" points="84 24 80 26 78 20 z" fill="hsla(19, 99%, 48%, 1)"></polygon> <polygon class="polygon" points="74 18 78 14 74 6 z" fill="hsla(19, 100%, 36%, 1)"></polygon> <polygon class="polygon" points="74 18 82 16 82 10 z" fill="hsla(19, 91%, 41%, 1)"></polygon> </g> <!--wind--> <g class="wind" transform="scale(0.6), translate(-30 14)"> <ellipse cx="60" cy="50" rx="12" ry=4 fill=gray stroke="#424949"></ellipse> <ellipse cx="60" cy="20" rx="8" ry=2 fill=gray stroke="gray"></ellipse> <path d="m52 22 l-4 -4 h24 l-4 4 "stroke="#424949"></path> <path d="m48 50 l4 -30 h16 l4 30 z" stroke="gray" fill="gray"></path> <path d="m48 18 l12 -16 l12 16 z"stroke="#424949" fill="#424949"></path> <circle cx="56" cy="12" r="3"></circle> <circle cx="56" cy="12" r="1.6" fill="#B3B6B7"></circle> <defs> <pattern id="star" viewBox="0,0,10,10" width="20%" height="20%"> <rect width="100" height="6" fill="white"></rect> <rect width="4" height="100" fill="white"></rect> </pattern> </defs> <g class="polygon"> <path d="m48 50 q12 8 24 0 z" fill="hsla(0, 0%, 18%, 1)"></path> <polygon points="48 50 49 40 60 44 z"fill="hsla(0, 0%, 65%, 1)"></polygon> <polygon points="48 50 60 44 72 50 z"fill="hsla(0, 0%, 57%, 1)"></polygon> <polygon points="72 50 70 30 60 30 z"fill="hsla(0, 0%, 30%, 1)"></polygon> <polygon points="60 30 50 30 49 40 z"fill="hsla(0, 0%, 76%, 1)"></polygon> <polygon points="49 40 72 50 60 30 z"fill="hsla(0, 0%, 28%, 1)"></polygon> <polygon points="70 30 54 24 52 20 68 20 z"fill="hsla(0, 0%, 32%, 1)"></polygon> <polygon points="52 20 50 30 70 30 54 24 z"fill="hsla(0, 0%, 57%, 1)"></polygon> </g> <!--DOT--><circle r="1" cx="70" cy="30" fill='red'></circle> <path d="m54 14 l-5 20 l-12 -4 l17 -18 z" stroke="white" fill="url(#star)" transform="rotate(0 0 0)"> <animateTransform id="windrotate" attributeName="transform" type="rotate" from="0 56 12" to="360 56 12" dur="12s" repeatCount="indefinite" /></path> <path d="m54 14 l-5 20 l-12 -4 l17 -18 z" stroke="white" fill="url(#star)" transform="rotate(100 56 12)"> <animateTransform attributeName="transform" type="rotate" from="100 56 12" to="460 56 12" dur="12s" repeatCount="indefinite" /></path> <path d="m54 14 l-5 20 l-12 -4 l17 -18 z" stroke="white" fill="url(#star)" transform="rotate(200 56 12)"> <animateTransform attributeName="transform" type="rotate" from="200 56 12" to="560 56 12" dur="12s" repeatCount="indefinite" /></path> <path d="m54 14 l-5 20 l-12 -4 l17 -18 z" stroke="white" fill="url(#star)" transform="rotate(280 56 12)"> <animateTransform attributeName="transform" type="rotate" from="280 56 12" to="640 56 12" dur="12s" repeatCount="indefinite"/> </path> </g> <!--house--> <g class='house' transform="scale(0.5), translate(6 24)"> <path d="m70 79 l60 -5 v-24 l-30 -15 l-30 15 z" fill="#D35400"></path> <path d="m70 79 l-40 -14 q2 0 0 -16 l40 4z" fill="#BA4A00"></path> <path d="m132 54 l4 -4 l-36 -18 l-36 18 l4 4 l32 -16 z" fill=#F0B27A></path> <path d="m68 54 l-39 -4.2 l-1 -4 l38 4 z" fill="#E67E22"></path> <path d="m28 46 l40 -20 l32 6 l-35 18 z" fill="#EB984E"></path> <path d="m94 77 v-20 l14 -1 v20 z" fill="#212F3D" transform="rotate(10, 60, 3)"></path> </g> </svg> <div class="windrange" onclick="range(12)">Speed1</div> <div class="windrange" onclick="range(6)">Speed2</div> <div class="windrange" onclick="range(1)">Speed3</div> </body> </html> <script> function range(time){ document.querySelectorAll("animateTransform")[0].setAttribute("dur", `${time}s`); document.querySelectorAll("animateTransform")[1].setAttribute("dur", `${time}s`); document.querySelectorAll("animateTransform")[2].setAttribute("dur", `${time}s`); document.querySelectorAll("animateTransform")[3].setAttribute("dur", `${time}s`); } function </script>