Hello World! (Copy 6931) (Copy 7135)
✨ Chakraphat Sudjai
<html> <head> <style> body{ background:#eee; margin:1em; font-family:sans-serif; } </style> </head> <body> <svg viewBox="0 0 200 200"> <!----> <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 --> <rect fill="url(#isometric)" width="1000" height="1000"/> <!--พื้น--> <rect fill="hsl(112, 100%, 78%)" height="1000" width="1000"/> <pattern id="grass" viewBox="0 0 20 20" patternUnits="userSpaceOnUse" x="0" y="0" width="4" height="4"> </pattern> <!--ฐาน--> <path fill="hsl(220, 100%, 25%)" stroke="hsl(220, 100%, 25%)" stroke-width="0.3" d="M50, 150 l0, 5 l50, 25 l0, -5 l-50, -25"/> <path fill="hsl(220, 100%, 60%)" stroke="hsl(220, 100%, 60%)" stroke-width="0.3" d="M100, 175 l50, -25 l0, 5 l-50, 25"/> <path fill="hsl(220, 100%, 50%)" stroke="hsl(220, 100%, 50%)" stroke-width="0.3" d="M100, 175 l50, -25 l-50, -25 l-50, 25"/> <!--เสาปูน1 **ใช้** --> <path fill="hsl(312, 10%, 81%)" stroke="black" stroke-width="0.01" d="M145, 137.5 l0, 15 l5, -2.5 l0, -15 l-5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M145, 137.5 l-5, -2.5 l0, 15 l5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M150, 135 l-5, -2.5 l-5, 2.5 l5, 2.5"/> <!--เสาปูน2 **ใช้** --> <path fill="hsl(312, 10%, 81%)" stroke="black" stroke-width="0.01" d="M55, 137.5 l0, 15 l5, -2.5 l0, -15 l-5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M55, 137.5 l-5, -2.5 l0, 15 l5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M60, 135 l-5, -2.5 l-5, 2.5 l5, 2.5"/> <!--เสาปูน3 **ใช้**--> <path fill="hsl(312, 10%, 81%)" stroke="black" stroke-width="0.01" d="M100, 115 l0, 15 l5, -2.5 l0, -15 l-5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M100, 115 l-5, -2.5 l0, 15 l5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M105, 112.5 l-5, -2.5 l-5, 2.5 l5, 2.5"/> <!--เสาปูน4 **ใช้** --> <path fill="hsl(312, 10%, 81%)" stroke="black" stroke-width="0.01" d="M100, 160 l0, 15 l5, -2.5 l0, -15 l-5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M100, 160 l-5, -2.5 l0, 15 l5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M105, 157.5 l-5, -2.5 l-5, 2.5 l5, 2.5"/> <!--เสาปูน5 --> <path fill="hsl(312, 10%, 81%)" stroke="black" stroke-width="0.01" d="M70, 145 l0, 15 l5, -2.5 l0, -15 l-5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M70, 145 l-5, -2.5 l0, 15 l5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M75, 142.5 l-5, -2.5 l-5, 2.5 l5, 2.5"/> <!--เสาปูน6 --> <path fill="hsl(312, 10%, 81%)" stroke="black" stroke-width="0.01" d="M85, 152.5 l0, 15 l5, -2.5 l0, -15 l-5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M85, 152.5 l-5, -2.5 l0, 15 l5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M90, 150 l-5, -2.5 l-5, 2.5 l5, 2.5"/> <!--เสาปูน7 --> <path fill="hsl(312, 10%, 81%)" stroke="black" stroke-width="0.01" d="M130, 145 l0, 15 l5, -2.5 l0, -15 l-5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M130, 145 l-5, -2.5 l0, 15 l5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M135, 142.5 l-5, -2.5 l-5, 2.5 l5, 2.5"/> <!--เสาปูน8 --> <path fill="hsl(312, 10%, 81%)" stroke="black" stroke-width="0.01" d="M115, 152.5 l0, 15 l5, -2.5 l0, -15 l-5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M115, 152.5 l-5, -2.5 l0, 15 l5, 2.5"/> <path fill="grey" stroke="black" stroke-width="0.01" d="M120, 150 l-5, -2.5 l-5, 2.5 l5, 2.5"/> <!--เส้นกำกับสำหรับฐานชั้น 2 <path fill="black" stroke="red" stroke-width="1" d="M100, 160 l10, 5" /> <path fill="black" stroke="red" stroke-width="1" d="M100, 160 l-10, 5" /> <path fill="black" stroke="red" stroke-width="1" d="M100, 160 l0, 10" /> <path fill="black" stroke="red" stroke-width="1" d="M150, 135 l10, 5" /> <path fill="black" stroke="red" stroke-width="1" d="M150, 135 l10, -5" /> <path fill="black" stroke="red" stroke-width="1" d="M150, 135 l20, 0" /> <path fill="black" stroke="red" stroke-width="1" d="M50, 135 l-10, 5" /> <path fill="black" stroke="red" stroke-width="1" d="M50, 135 l-10, -5" /> <path fill="black" stroke="red" stroke-width="1" d="M50, 135 l-20, 0" /> <path fill="black" stroke="red" stroke-width="1" d="M100, 110 l10, -5" /> <path fill="black" stroke="red" stroke-width="1" d="M100, 110 l-10, -5" /> <path fill="black" stroke="red" stroke-width="1" d="M100, 110 l0, -10" /> --> <!-- ชึ้น 2 **ใช้**--> <path fill="hsl(312, 10%, 81%)" stroke="hsl(312, 10%, 81%)" stroke-width="0.5" d="M100, 155 l0, 15 l70, -35 l0, -15 l-70, 35" /> <path fill="grey" stroke="grey" stroke-width="0.5" d="M100, 155 l-70, -35 l0, 15 l70, 35" /> <path fill="hsl(312, 10%, 90%)" stroke="hsl(312, 10%, 90%)" stroke-width="0.5" d="M30, 120 l70, -35 l70, 35 l-70, 35" /> <!--เส้นกำกับสำหรับฐานพีระมิดหาจุดแหลม <path fill="transparent" stroke="blue" stroke-width="1" d="M100, 145 l50, -25 l-50, -25 l-50, 25 l50,25" /> <path fill="transparent" stroke="blue" stroke-width="1" d="M100, 145 l0, -40" /> <path fill="transparent" stroke="blue" stroke-width="1" d="M125, 132.5 l-25, -12.5" /> --> <!--สามเหลี่ยมพีระมิด **ใช้**--> <path fill="hsl(201, 100%, 15%)" stroke="hsl(201, 100%, 15%)" stroke-width="0.5" d="M100, 105 l0, 40 l50, -25 l-50, -15" /> <path fill="hsl(201, 100%, 12%)" stroke="hsl(201, 100%, 12%)" stroke-width="0.5" d="M100, 105 l-50, 15 l50, 25" /> <path fill="hsl(201, 100%, 10%)" stroke="hsl(201, 100%, 10%)" stroke-width="0.5" d="M100, 105 l0, -10 l-50, 25" /> <path fill="hsl(201, 100%, 12%)" stroke="hsl(201, 100%, 12%)" stroke-width="0.5" d="M100, 105 l0, -10 l50, 25" /> <!--โครงร่างบรรได <path fill="transparent" stroke="black" stroke-width="0.2" d="M70, 165 l0, -2.5 l10, 5 l0, 2.5 l-10, -5 l-2.5, 1.25 l0, -2.5 l10, 5 l0, 2.5" />--> <!--บรรได 77.5 168.75--> <path fill="hsl(312, 10%, 81%)" stroke="hsl(312, 10%, 81%)" stroke-width="0.3" d="M77.5, 168.75 l0, 2.5 l2.5, -1.25 l0, -2.5 l-2.5, 1.25"/> <path fill="grey" stroke="grey" stroke-width="0.3" d="M77.5, 168.75 l-10, -5 l0, 2.5 l10, 5"/> <path fill="hsl(312, 10%, 90%)" stroke="hsl(312, 10%, 90%)" stroke-width="0.3" d="M77.5, 168.75 l2.5, -1.25 l-10, -5 l-2.5, 1.25"/> <!--ถนน --> <rect fill="url(#isometric)" width="1000" height="1000"/> <path fill="grey" stroke="red" stroke-width="0.5" d="M130, 0 l-200, 100 l0, 30 l300, -150" /> <path fill="transparent" stroke="red" stroke-width="0.5" d="M165, 60 l-10,5 l5,2.5 l10, -5 l-5,-2.5"/> <path fill="white" stroke="red" stroke-width="0.5" d="M160, -2 l-10,5 l5,2.5 l10, -5 l-5,-2.5"/> <path fill="white" stroke="red" stroke-width="0.5" d="M120, 17.5 l-10,5 l5,2.5 l10, -5 l-5,-2.5"/> <path fill="white" stroke="red" stroke-width="0.5" d="M80, 37.5 l-10,5 l5,2.5 l10, -5 l-5,-2.5"/> <path fill="white" stroke="red" stroke-width="0.5" d="M40, 57.5 l-10,5 l5,2.5 l10, -5 l-5,-2.5"/> <path fill="white" stroke="red" stroke-width="0.5" d="M0, 77.5 l-10,5 l5,2.5 l10, -5 l-5,-2.5"/> <rect fill="url(#isometric)" width="1000" height="1000"/> </svg> </body> </html>