Hello World! (Copy 7855) (Copy 8340)
✨ 63070024-ปลื้ม เจษฎากร
<html> <head> <style> body{ margin: 1rem; margin-top: 1.5rem; background: rgb(114, 114, 114); } svg{ background:hsl(222, 33%, 30%); width:100%; } .site{ animation: disap 5s; } .dust{ animation: poof 5s; } @keyframes disap{ 0% {opacity:0;} 24% {opacity:0;} 25% {opacity:1;} 25% {opacity:1;} 75% {opacity:1;} 85% {opacity:1;} 100% {opacity:0;} } @keyframes poof{ 0% {opacity:0;} 5% {opacity:0;} 25% {opacity:1;} 30% {opacity:1;} 45% {opacity:0;} 75% {opacity:0;} 85% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} </style> </head> <body> <svg viewBox="0 0 200 90"> <g transform="scale(0.6) translate(40 -10)"> <defs> <pattern id="meshsheet" viewBox="0 0 5 5" width="1" height="1" patternUnits="userSpaceOnUse" x="0" y="0"> <rect width="15" height="1" fill="#20492f"/> <rect width="1" height="5" fill="#0c2716"/> </pattern> <pattern id="metalsheet" viewBox="0 0 10 5" width="4" height="1" patternUnits="userSpaceOnUse" x="0" y="0"> <rect width="5" height="15" fill="#3a3a3a"/> </pattern> </defs> <g class="site" transform="scale(1) translate(60 20)" opacity="0"> <!--ทราย--> <g transform=" skewY(26.5) skewX(-45)"> <rect width="80" height="50" x="70" y="20" fill="#c2b280"/> </g> <!--สังกะสี--> <g transform="skewY(-26.5)"> <rect width="40" height="15" x="0" y="55" fill="#545454" /> <rect width="40" height="15" x="0" y="55" fill="url(#metalsheet)" /> </g> <!--ผ้าใบ--> <g transform="skewY(-26.5)"> <rect width="40" height="35" x="10" y="40" fill="#17582f" /> <rect width="40" height="35" x="10" y="40" fill="url(#meshsheet)" /> </g> <!--ผ้าใบ--> <g transform="skewY(26.5)"> <rect width="50" height="35" x="50" y="-10" fill="#175d31"/> <rect width="50" height="35" x="50" y="-10" fill="url(#meshsheet)"/> </g> <!--เสา--> <g transform="translate(0 0)"> <g transform=" skewY(26.5) skewX(-45)"> <rect width="4" height="4" x="75" y="60" style="fill:transparent;stroke-width:1;stroke:#222" /> </g> <g transform="skewY(26.5)"> <rect width="1" height="45" x="19" y="15" fill="#333"/> <rect width="1" height="45" x="14" y="16" fill="#282828"/> <rect width="1" height="45" x="10" y="20" fill="#333"/> <rect width="1" height="45" x="14" y="20" fill="#333"/> </g> </g> <!--เสา--> <g transform="translate(80 5)"> <g transform=" skewY(26.5) skewX(-45)"> <rect width="4" height="4" x="75" y="60" style="fill:transparent;stroke-width:1;stroke:#222" /> </g> <g transform="skewY(26.5)"> <rect width="1" height="45" x="19" y="15" fill="#333"/> <rect width="1" height="45" x="14" y="16" fill="#282828"/> <rect width="1" height="45" x="10" y="20" fill="#333"/> <rect width="1" height="45" x="14" y="20" fill="#333"/> </g> </g> <!--เสา--> <g transform="translate(35 -17)"> <g transform=" skewY(26.5) skewX(-45)"> <rect width="4" height="4" x="75" y="60" style="fill:transparent;stroke-width:1;stroke:#222" /> </g> <g transform="skewY(26.5)"> <rect width="1" height="45" x="19" y="15" fill="#333"/> <rect width="1" height="45" x="14" y="16" fill="#282828"/> <rect width="1" height="45" x="10" y="20" fill="#333"/> <rect width="1" height="45" x="14" y="20" fill="#333"/> </g> </g> <!--floor--> <g transform=" skewY(26.5) skewX(-45)"> <rect width="50" height="40" x="50" y="0" fill="#555"/> <rect width="5" height="5" x="40" y="-10" fill="#666666"/> <rect width="5" height="5" x="85" y="-10" fill="#666666"/> <rect width="5" height="5" x="40" y="25" fill="#666666"/> <rect width="5" height="5" x="85" y="25" fill="#666666"/> </g> <!--เสา--> <g transform="translate(45 22.5)"> <g transform=" skewY(26.5) skewX(-45)"> <rect width="4" height="4" x="75" y="60" style="fill:transparent;stroke-width:1;stroke:#222" /> </g> <g transform="skewY(26.5)"> <rect width="1" height="45" x="19" y="15" fill="#333"/> <rect width="1" height="45" x="14" y="16" fill="#282828"/> <rect width="1" height="45" x="10" y="20" fill="#333"/> <rect width="1" height="45" x="14" y="20" fill="#333"/> </g> </g> <g transform="skewY(-26.5)"> <rect width="5" height="10" x="14" y="45" fill="#444"/> <rect width="5" height="10" x="50" y="45" fill="#444"/> </g> <g transform="skewY(26.5)"> <rect width="5" height="10" x="45" y="-5" fill="#474747"/> <rect width="5" height="10" x="90" y="-5" fill="#474747"/> </g> <!--ผ้าใบ--> <g transform="skewY(26.5)"> <rect width="5" height="10" x="45" y="-5" fill="#444444"/> <rect width="5" height="10" x="90" y="-5" fill="#444444"/> <rect width="50" height="35" x="10" y="30" fill="#2a5e3d"/> <rect width="50" height="35" x="10" y="30" fill="url(#meshsheet)"/> </g> <!--ผ้าใบ--> <g transform="skewY(-26.5)"> <rect width="40" height="35" x="60" y="90" fill="#38744e" /> <rect width="40" height="35" x="60" y="90" fill="url(#meshsheet)" /> </g> <!--สังกะสี--> <g transform="skewY(26.5)"> <rect width="50" height="15" x="0" y="55.5" fill="#626262"/> <rect width="50" height="15" x="0" y="55.5" fill="url(#metalsheet)"/> </g> <!--crane--> <g transform="scale(0.9) translate(13 13)"> <g transform="skewY(-26.5)"> <rect width="8" height="8" x="100" y="120.75" fill="#232323"/> <rect width="8" height="8" x="92" y="112" fill="#232323"/> </g> <g transform="skewY(26.5)"> <rect width="8" height="8" x="92" y="21" fill="#333333"/> </g> <g transform="skewY(26.5) skewX(-45)"> <rect width="8.5" height="8.25" x="112.75" y="12.75" fill="#434343"/> </g> <!--ตัวเครน--> <g transform="skewY(-26.5)"> <rect width="1" height="50" x="101" y="70" fill="#bab824"/> <rect width="1" height="50" x="101" y="66" fill="#bab824"/> <rect width="4" height="1" x="101" y="119" fill="#bab824"/> <rect width="4" height="1" x="101" y="115" fill="#bab824"/> <rect width="4" height="1" x="101" y="111" fill="#bab824"/> <rect width="4" height="1" x="101" y="107" fill="#bab824"/> <rect width="4" height="1" x="101" y="103" fill="#bab824"/> <rect width="4" height="1" x="101" y="99" fill="#bab824"/> <rect width="4" height="1" x="101" y="95" fill="#bab824"/> <rect width="4" height="1" x="101" y="91" fill="#bab824"/> <rect width="4" height="1" x="101" y="87" fill="#bab824"/> <rect width="4" height="1" x="101" y="83" fill="#bab824"/> <rect width="4" height="1" x="101" y="79" fill="#bab824"/> <rect width="4" height="1" x="101" y="75" fill="#bab824"/> <rect width="1" height="50" x="95" y="64" fill="#bab824"/> <rect width="5" height="1" x="95.25" y="113" fill="#bab824"/> <rect width="5" height="1" x="95.25" y="109" fill="#bab824"/> <rect width="5" height="1" x="95.25" y="105" fill="#bab824"/> <rect width="5" height="1" x="95.25" y="101" fill="#bab824"/> <rect width="5" height="1" x="95.25" y="97" fill="#bab824"/> <rect width="5" height="1" x="95.25" y="93" fill="#bab824"/> <rect width="5" height="1" x="95.25" y="89" fill="#bab824"/> <rect width="5" height="1" x="95.25" y="85" fill="#bab824"/> <rect width="5" height="1" x="95.25" y="81" fill="#bab824"/> <rect width="5" height="1" x="95.25" y="77" fill="#bab824"/> <rect width="5" height="1" x="95.25" y="73" fill="#bab824"/> <rect width="5" height="1" x="95.25" y="69" fill="#bab824"/> <rect width="0.5" height="2.5" x="61.75" y="70.75" fill="#232323"/> <rect width="0.5" height="2.5" x="66.75" y="70.75" fill="#232323"/> <rect width="0.5" height="2.5" x="73.25" y="70.75" fill="#232323"/> <rect width="0.5" height="2.5" x="78.25" y="70.75" fill="#232323"/> <rect width="0.5" height="2.5" x="83.25" y="70.75" fill="#232323"/> <rect width="0.5" height="2.5" x="88.25" y="70.75" fill="#232323"/> <rect width="0.5" height="2.5" x="93.25" y="70.75" fill="#232323"/> <rect width="0.5" height="2.5" x="98.25" y="70.75" fill="#232323"/> <rect width="0.5" height="2.5" x="102.25" y="70.75" fill="#232323"/> <rect width="0.5" height="3" x="57.5" y="65.75" fill="#232323"/> <rect width="0.5" height="3" x="62.5" y="65.75" fill="#232323"/> <rect width="0.5" height="3" x="68.5" y="65.75" fill="#232323"/> <rect width="0.5" height="3" x="74" y="65.75" fill="#232323"/> <rect width="0.5" height="3" x="79" y="65.75" fill="#232323"/> <rect width="0.5" height="3" x="84" y="65.75" fill="#232323"/> <rect width="0.5" height="3" x="89" y="65.75" fill="#232323"/> <rect width="0.5" height="3" x="94" y="65.75" fill="#232323"/> <rect width="0.5" height="3" x="98" y="65.75" fill="#232323"/> <rect width="2" height="3" x="63" y="65.75" fill="#333"/> <rect width="6.25" height="2.5" x="67" y="70.75" fill="#333"/> <rect width="0.5" height="25" x="68" y="72.75" fill="#aaa"/> <rect width="3" height="5" x="92" y="80" fill="#7d7c1d"/> <rect width="3.2" height="4.34" x="97" y="86" fill="#7d7c1d"/> <rect width="8" height="4" x="105" y="70" fill="#232323"/> </g> <g transform="skewY(26.5)"> <rect width="1" height="50" x="100.1" y="-30.7" fill="#bab824"/> <rect width="1" height="50" x="100.1" y="-34.7" fill="#bab824"/> <rect width="5" height="1" x="95.3" y="18.3" fill="#bab824"/> <rect width="5" height="1" x="95.3" y="14.3" fill="#bab824"/> <rect width="5" height="1" x="95.3" y="10.3" fill="#bab824"/> <rect width="5" height="1" x="95.3" y="6.3" fill="#bab824"/> <rect width="5" height="1" x="95.3" y="2.3" fill="#bab824"/> <rect width="5" height="1" x="95.3" y="-2.3" fill="#bab824"/> <rect width="5" height="1" x="95.3" y="-6.3" fill="#bab824"/> <rect width="5" height="1" x="95.3" y="-14.3" fill="#bab824"/> <rect width="5" height="1" x="95.3" y="-18.3" fill="#bab824"/> <rect width="5" height="1" x="95.3" y="-22.3" fill="#bab824"/> <rect width="5" height="1" x="95.3" y="-26.3" fill="#bab824"/> <rect width="1" height="50" x="95" y="-30.7" fill="#bab824"/> <rect width="5" height="1" x="100.3" y="12.75" fill="#bab824"/> <rect width="5" height="1" x="100.3" y="8.75" fill="#bab824"/> <rect width="5" height="1" x="100.3" y="4.75" fill="#bab824"/> <rect width="5" height="1" x="100.3" y="0.75" fill="#bab824"/> <rect width="5" height="1" x="100.3" y="-4.25" fill="#bab824"/> <rect width="5" height="1" x="100.3" y="-8.25" fill="#bab824"/> <rect width="5" height="1" x="100.3" y="-12.25" fill="#bab824"/> <rect width="5" height="1" x="100.3" y="-16.25" fill="#bab824"/> <rect width="5" height="1" x="100.3" y="-20.25" fill="#bab824"/> <rect width="5" height="1" x="100.3" y="-24.25" fill="#bab824"/> <rect width="5" height="1" x="100.3" y="-28.25" fill="#bab824"/> <rect width="5" height="1" x="100.3" y="-32.25" fill="#bab824"/> <rect width="3.7" height="3" x="63" y="2.75" fill="#333"/> <rect width="5.2" height="4.5" x="92" y="-11" fill="#7d7c1d"/> <rect width="5" height="3.8" x="100" y="-35" fill="#333333"/> </g> <g transform="skewY(26.5) skewX(-45)"> <rect width="0.5" height="43" x="73" y="-31.75" fill="#232323"/> <rect width="0.5" height="43" x="68.75" y="-31.75" fill="#232323"/> <rect width="0.5" height="44" x="65.75" y="-34.75" fill="#232323"/> <rect width="0.5" height="44" x="70.75" y="-34.75" fill="#232323"/> <rect width="5" height="0.5" x="65.75" y="8.75" fill="#232323"/> <rect width="5" height="0.5" x="65.75" y="3.75" fill="#232323"/> <rect width="5" height="0.5" x="65.75" y="-2.75" fill="#232323"/> <rect width="5" height="0.5" x="65.75" y="-7.75" fill="#232323"/> <rect width="5" height="0.5" x="65.75" y="-12.75" fill="#232323"/> <rect width="5" height="0.5" x="65.75" y="-17.75" fill="#232323"/> <rect width="5" height="0.5" x="65.75" y="-22.75" fill="#232323"/> <rect width="5" height="0.5" x="65.75" y="-27.75" fill="#232323"/> <rect width="5" height="0.5" x="65.75" y="-31.75" fill="#232323"/> <rect width="5" height="0.5" x="65.75" y="-34.75" fill="#232323"/> <rect width="4" height="0.5" x="69" y="10.75" fill="#232323"/> <rect width="4" height="0.5" x="69" y="5.75" fill="#232323"/> <rect width="4" height="0.5" x="69" y="-0.75" fill="#232323"/> <rect width="4" height="0.5" x="69" y="-5.75" fill="#232323"/> <rect width="4" height="0.5" x="69" y="-10.75" fill="#232323"/> <rect width="4" height="0.5" x="69" y="-15.75" fill="#232323"/> <rect width="4" height="0.5" x="69" y="-20.75" fill="#232323"/> <rect width="4" height="0.5" x="69" y="-25.75" fill="#232323"/> <rect width="4" height="0.5" x="69" y="-29.75" fill="#232323"/> <rect width="5" height="7" x="65.75" y="-3" fill="#353535"/> <rect width="5.35" height="3" x="81" y="-14" fill="#7d7c1d"/> <rect width="5.5" height="8" x="65" y="-43" fill="#434343"/> </g> <g transform="skewY(-26.5)"> <rect width="1" height="50" x="105" y="70" fill="#bab824"/> </g> <g transform="skewY(26.5)"> <rect width="1" height="50" x="105.1" y="-35.7" fill="#bab824"/> </g> <g transform="scale(0.3) translate(129 140)"> <g transform="skewY(-26.5)"> <rect width="8" height="8" x="100" y="120.75" fill="#555"/> </g> <g transform="skewY(26.5)"> <rect width="8" height="8" x="92" y="21" fill="#656565"/> </g> <g transform="skewY(26.5) skewX(-45)"> <rect width="8.5" height="8.25" x="112.75" y="12.75" fill="#666"/> </g> </g> </g> <!--barricade--> <g transform="scale(0.6) translate(100 55)"> <g transform="skewY(26.5)"> <rect width="3" height="7" x="77" y="55" fill="#f00"/> </g> <g transform=" skewY(26.5) skewX(-45)"> <rect width="3" height="8" x="132.3" y="47" fill="#f00" /> <rect width="3" height="8" x="132.3" y="39" fill="#fff" /> <rect width="3" height="8" x="132.3" y="31" fill="#f00" /> <rect width="3" height="8" x="132.3" y="23" fill="#fff" /> </g> <g transform="skewY(-26.5)"> <rect width="8" height="7" x="80" y="135" fill="#f00" /> <rect width="8" height="7" x="88" y="135" fill="#fff" /> <rect width="8" height="7" x="96" y="135" fill="#f00" /> <rect width="8" height="7" x="104" y="135" fill="#fff" /> </g> </g> <!--barricade--> <g transform="scale(0.6) translate(70 70)"> <g transform="skewY(26.5)"> <rect width="3" height="7" x="77" y="55" fill="#f00"/> </g> <g transform=" skewY(26.5) skewX(-45)"> <rect width="3" height="8" x="132.3" y="47" fill="#f00" /> <rect width="3" height="8" x="132.3" y="39" fill="#fff" /> <rect width="3" height="8" x="132.3" y="31" fill="#f00" /> <rect width="3" height="8" x="132.3" y="23" fill="#fff" /> </g> <g transform="skewY(-26.5)"> <rect width="8" height="7" x="80" y="135" fill="#f00" /> <rect width="8" height="7" x="88" y="135" fill="#fff" /> <rect width="8" height="7" x="96" y="135" fill="#f00" /> <rect width="8" height="7" x="104" y="135" fill="#fff" /> </g> </g> </g> <g class="dust" transform="scale(0.525) translate(20 -35)" opacity="0"> <circle style="fill: rgb(216, 216, 216);" cx="182.777" cy="147.039" r="65.152"></circle> <circle style="fill: rgb(216, 216, 216);" cx="205.242" cy="174.268" r="69.238"></circle> <circle style="fill: rgb(216, 216, 216);" cx="156.909" cy="165.419" r="77.224"></circle> <circle style="fill: rgb(216, 216, 216);" cx="198.434" cy="189.244" r="85.095"></circle> <circle style="fill: rgb(216, 216, 216);" cx="148.741" cy="159.973" r="51.2"></circle> <circle style="fill: rgb(216, 216, 216);" cx="185.5" cy="155.208" r="40.691"></circle> <circle style="fill: rgb(216, 216, 216);" cx="277.4" cy="147.039" r="35.043"></circle> <circle style="fill: rgb(216, 216, 216);" cx="197.754" cy="157.931" r="61.319"></circle> <circle style="fill: rgb(216, 216, 216);" cx="205.922" cy="221.239" r="62.428"></circle> <circle style="fill: rgb(216, 216, 216);" cx="179.374" cy="227.366" r="26.277"></circle> <circle style="fill: rgb(216, 216, 216);" cx="242.001" cy="217.835" r="58.154"></circle> <circle style="fill: rgb(216, 216, 216);" cx="235.194" cy="151.804" r="60.769"></circle> <circle style="fill: rgb(216, 216, 216);" cx="171.886" cy="179.033" r="46.609"></circle> <circle style="fill: rgb(216, 216, 216);" cx="205.242" cy="176.991" r="64.108"></circle> <circle style="fill: rgb(216, 216, 216);" cx="219.537" cy="155.208" r="61.733"></circle> <circle style="fill: rgb(216, 216, 216);" cx="300.545" cy="144.316" r="44.514"></circle> <circle style="fill: rgb(216, 216, 216);" cx="308.713" cy="218.516" r="45.365"></circle> <circle style="fill: rgb(216, 216, 216);" cx="322.328" cy="178.353" r="50.476"></circle> <circle style="fill: rgb(216, 216, 216);" cx="241.321" cy="243.703" r="54.049"></circle> <circle style="fill: rgb(216, 216, 216);" cx="159.632" cy="243.703" r="38.538"></circle> <circle style="fill: rgb(216, 216, 216);" cx="237.236" cy="189.244" r="76.078"></circle> </g> </g> </svg> <script> </script> </body> </html>