SVG Isometric GroupC Sspim
✨ นายปรัชญา ดอกบัว
<html> <head> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; } svg{ background:#90A9A9; box-shadow:0 0 20px #0002; width:100%; } </style> </head> <svg viewBox="0 0 200 200"> <defs> <pattern id="texture1" viewBox="0,0,10,10" width="10%" height="10%"> <circle r="100" fill="hsl(0, 0%, 40%)"/> <rect x="0" y="0" width="100" height="100" fill="hsl(0, 0%, 65%)"/> </pattern> </defs> <path d="M0 90 l200,100 l0,-110 l-200,-100 z"fill="url(#texture1)"/> <path d="M0 200 l200,100 l0,-110 l-200,-100 z"fill="hsl(0, 0%, 12%) "/> <path d="M0 -20 l200,100 l0,-50 l-200,-100 z"fill="hsl(0, 0%, 12%) "/> <g id="Main_Building"transform="translate(-30,-45) scale(0.95)"> <g id="rightwing"> <path d="M60,30 l120,60 l5,-2.5 l-120,-60" fill="#E8EDF4"/> <path d="M60,30 l120,60 l0,50 l-120,-60" fill="#C8D7EE"/> <path d="M180,90 l5,-2.5 l0,50 l-5,2.5" fill="#D7DFEC"/> </g> <!-- cylinder--> <g id="cylinder" transform="translate(0 -5)"> <ellipse cx="115" cy="130" rx="35" ry="25" fill="#4479CA" transform="rotate(0 140 115)"/> <ellipse cx="115" cy="123" rx="35" ry="25" fill="#C8D7EE" transform="rotate(0 140 115)"/> <ellipse cx="115" cy="120" rx="35" ry="25" fill="#E8EDF4" transform="rotate(0 140 115)"/> </g> <g id="lowerbuild"> <path d="M35,107.5 l45,20 l0,12.5 l-45,-22.5" fill="#BEC9DA"/> <path d="M80,122.5 l5,5 l0,10 l-5,2.5" fill="#A9B5C8"/> </g> <g id="column"> <rect x="105" y="140"width="5" height="15" fill="#E8EDF4"/> <circle cx="107.5" cy="155" r=2.5 fill="#E8EDF4"/> </g> <use href="#column" x="-15" y="-7.5"/> <use href="#column" x="-30" y="-15"/> <g id="leftwing-wide"> <path d="M30,90 l40,-20 l80,40 l-40,20" fill="hsl(215, 35%, 91%)"/> <path d="M30,90 l80,40 l0,10 l-80,-40" fill="#C8D7EE"/> <path d="M110,130 l40,-20 l0,10 l-40,20" fill="#D7DFEC"/> <path d="M30,95 l80,40 l0,5 l-80,-40" fill="#3A69B0"/> <path d="M110,135 l40,-20 l0,5 l-40,20" fill="#4479CA"/> <path d="M30,100 l80,40 l0,5 l-80,-40" fill="#C8D7EE"/> <path d="M110,140 l40,-20 l0,5 l-40,20" fill="#D7DFEC"/> </g> <use href="#leftwing-wide" x="0" y="-10"/> <g id="wafer"> <path d="M45 70 l40,20 l30,-15 l-40,-20 z" fill="hsl(216, 53%, 83%)"/> <path d="M70 85 l0,-2.5 l-25,-12.5 l0,2.5 z" fill="#D7DFEC"/> <path d="M44.9 77.9 l40,20 l0,-5.5 l-40,-20 z" fill="#4479CA"/> <path d="M115 108 l0,-5.5 l-45,-22.5 l0,5.5 z" fill="#4479CA"/> <path d="M115 108 l30,-15 l0,-5.5 l-30,15 z" fill="#4479CA"/> <path d="M115 113 l0,-5 l-30,-15 l0,5 z" fill="#D7DFEC"/> <path d="M115 113 l30,-15 l0,-5 l-30,15 z" fill="#D7DFEC"/> <path d="M115 102.5 l0,-5.5 l-45,-22.5 l0,5.5 z" fill="#4479CA"/> <path d="M115 102.5 l30,-15 l0,-5.5 l-30,15 z" fill="#4479CA"/> </g> <g id="lift&roof&rightwin"> <path d="M115 97 l0,-2.5 l-45,-22.5 l0,2.5 z" fill="#D7DFEC"/> <path d="M115 97 l30,-15 l0,-2.5 l-30,15 z" fill="#D7DFEC"/> <path d="M115 94.6 l30,-15 l-45,-22.5 l-30,15 z" fill="#E8EDF4" /> <path d="M101 50.4 l-13,13 l15,7.5 l13,-13 z" fill="hsl(217, 36%, 91%)"/> <path d="M120 85 l18,-9 l0,-12.5 l-18,9 z" fill="#D7DFEC"/> <path d="M120 85 l-18,-9 l0,-12.5 l18,9 z" fill="hsl(217, 36%, 89%)"/> <path d="M120 54.5 l-18,9 l18,9 l18,-9 z" fill="#E8EDF4"/> <path d="M118 79 l0,-2.5 l-6,-3 l0,2.5 z" fill="#212121" fill-opacity="0.8"/> <path d="M110 75 l0,-2.5 l-6,-3 l0,2.5 z" fill="#212121" fill-opacity="0.8"/> <path d="M155 82.5 l0,10 l20,10 l0,-10 z" fill="#4479CA"/> <path d="M155 97.5 l0,10 l20,10 l0,-10 z" fill="#4479CA"/> <path d="M155 112.5 l0,10 l20,10 l0,-10 z" fill="#4479CA"/> </g> <g id="sidewindow"> <path d="M80 124 l-5,2.5 l0,-15 l5,-2.5 z" fill="#4479CA"/> <path d="M45.2 111.5 l0,-15 l30,15 l0,15 z " fill="#4479CA" /> <path d="M75.4 112 l-30,-15 l0,-5 l30,15 z" fill="#C8D7EE" /> <path d="M75.2 112 l0,-5 l5,-2.5 l0,5 z" fill="#C8D7EE" /> <path d="M75 107 l5,-2.5 l-30,-15 l-5,2.5 z" fill="#E8EDF4" /> </g> </g> <g id="cafeteria" transform="translate(30,65) scale(0.85)"> <path d= "M121 66 l10,-5 l0,5 l-10,5 z" stroke="#485e69"fill="white" fill-opacity="0"/> <path d= "M121 68 l10,-5 l0,5 l-10,5 z" stroke="#485e69"fill="white" fill-opacity="0"/> <path d= "M200 60 l-10,-5 l0,10 l10,5 z" fill="#757575"/> <path d="M140 60 l-10,5 l-10,5 l40,20 l40,-20 l-40,-20 z" fill="hsl(0, 0%, 68%)"/> <path d="M149 75 l-10,-5 l0,2.5 l10,5 z" fill="#ffffff00" stroke="#607D8B" stroke-linecap="round" stroke-linejoin="round"/> <path d="M149 78 l-10,-5 l0,2.5 l10,5 z" fill="#ffffff00" stroke="#607D8B" stroke-linecap="round" stroke-linejoin="round"/> <path d="M149 81 l-10,-5 l0,2.5 l10,5 z" fill="#607D8B" stroke="#607D8B" stroke-linecap="round" stroke-linejoin="round"/> <path d="M131 66 l-10,-5 l0,2.5 l10,5 z" fill="#ffffff00" stroke="#607D8B" stroke-linecap="round" stroke-linejoin="round"/> <path d="M131 69 l-10,-5 l0,2.5 l10,5 z" fill="#ffffff00" stroke="#607D8B" stroke-linecap="round" stroke-linejoin="round"/> <path d="M131 72 l-10,-5 l0,2.5 l10,5 z" fill="#607D8B" stroke="#607D8B" stroke-linecap="round" stroke-linejoin="round"/> <path d="M171 80 l10,-5 l0,5 l-10,5 z" fill="white" fill-opacity="0"stroke="#607D8B" stroke-linecap="round" stroke-linejoin="round"/> <path d="M171 82.5 l10,-5 l0,5 l-10,5 z" fill="white" fill-opacity="0"stroke="#607D8B" stroke-linecap="round" stroke-linejoin="round"/> <path d="M189.5 70.5 l10,-5 l0,6 l-10,5 z" fill="white" fill-opacity="0"stroke="#607D8B" stroke-linecap="round" stroke-linejoin="round"/> <path d="M189.5 73 l10,-5 l0,5 l-10,5 z" fill="white" fill-opacity="0"stroke="#607D8B" stroke-linecap="round" stroke-linejoin="round"/> <path d="M150 83 l0,-8 l5,2.5 l0,8 z"stroke="#CFD8DC" fill="#4479CA" fill-opacity="0.8"/> <path d="M155 85.5 l0,-8 l5,2.5 l0,8 z"stroke="#CFD8DC" fill="#4479CA" fill-opacity="0.8"/> <path d="M160 87 l0,-7 l5,-2.5 l0,7 z"stroke="#CFD8DC" fill="#4479CA" fill-opacity="0.8"/> <path d="M165 84.5 l0,-7 l5,-2.5 l0,7 z"stroke="#CFD8DC" fill="#4479CA" fill-opacity="0.8"/> <path d="M150 82 l10,5 l10,-5 l0,2 l-10,5 l-10,-5 z"stroke="#CFD8DC" fill="#CFD8DC"/> <path d="M140 40 l-10,5 l-10,5 l40,20 l40,-20 l-40,-20 z" fill="#C8D7EE"/> <path d="M120 50 l0,10 l40,20 l0,-10 z" fill="#C8D7EE"/> <path d="M200 50 l0,10 l-40,20 l0-10 z" fill="#D7DFEC"/> <path d="M120 70 l0,5 l40,20 l0,-5 z" fill="#C8D7EE"/> <path d="M160 90 l0,5 l40,-20 l0,-5 z" fill="#D7DFEC"/> <path d="M140 35 l-10,5 l-10,5 l40,20 l40,-20 l-40,-20 z" fill="#E8EDF4" /> <path d="M160 35 l20,10 l-20,10 l-20,-10 z" fill="hsl(0, 0%, 58%)"/> <path d="M160 35 l0,20 l-20,-10 z" fill="#616161"/> <ellipse cx="160" cy="63" rx="10" ry="3" fill="#9E9E9E"/> <path d="M150.5 45 l0,18 l19,0 l0,-18 z" stroke="#9E9E9E" fill="#9E9E9E" /> <ellipse cx="160" cy="45" rx="10" ry="3" fill="#9E9E9E" /> <ellipse cx="160" cy="45.5" rx="9" ry="3" fill="#616161" /> <path d="M120 45 l0,5 l40,20 l0,-5 z" fill="#C8D7EE" /> <path d="M160 65 l0,5 l40,-20 l0,-5 z" fill="#D7DFEC"/> <path d="M120 45 l5,2.5 l0,15 l-5,-2.5 z" fill="#616161"/> <path d="M130 50 l5,2.5 l0,15 l-5,-2.5 z" fill="#616161"/> <path d="M140 55 l5,2.5 l0,15 l-5,-2.5 z" fill="#616161"/> <path d="M150 60 l5,2.5 l0,15 l-5,-2.5 z" fill="#616161"/> <path d="M125 51.5 l5,2.5 l0,5 l-5,-2.5 z" fill="#4479CA"/> <path d="M135 56.5 l5,2.5 l0,5 l-5,-2.5 z" fill="#4479CA"/> <path d="M145 61.5 l5,2.5 l0,5 l-5,-2.5 z" fill="#4479CA"/> <path d="M155 66.5 l5,2.5 l0,5 l-5,-2.5 z" fill="#4479CA"/> <path d="M160 65 l5,-2.5 l0,15 l-5,2.5 z" fill="hsl(0, 0%, 58%)"/> <path d="M170 60 l5,-2.5 l0,15 l-5,2.5 z" fill="hsl(0, 0%, 58%)"/> <path d="M180 55 l5,-2.5 l0,15 l-5,2.5 z" fill="hsl(0, 0%, 58%)"/> <path d="M190 50 l5,-2.5 l0,15 l-5,2.5 z" fill="hsl(0, 0%, 58%)"/> <path d="M165 68.5 l5,-2.5 l0,5 l-5,2.5 z" fill="#4479CA" /> <path d="M175 63.5 l5,-2.5 l0,5 l-5,2.5 z" fill="#4479CA" /> <path d="M185 58.5 l5,-2.5 l0,5 l-5,2.5 z" fill="#4479CA" /> <path d="M195 53.5 l5,-2.5 l0,5 l-5,2.5 z" fill="#4479CA" /> </g> <g id="sign" transform="translate(-8,7) scale(0.75)"> <path d="M154.9,152.6 l-5,2.5 v-12.5 l5,-2.5 v12.5z " stroke-width=".5" fill= "hsl(22, 11%, 25%)"> </path> <path d="M110,135 l40,20 v-12.5 l-40,-20 v12.5z" fill= "hsl(22, 11%, 15%)"> </path> <path d="M110,122.8 l5,-2.5 l40,20 l-5,2.5z l40,20" stroke-width=".5" fill= "hsl(22, 11%, 10%)"> </path> <text x=122.5 y=145 transform-origin="152.5 115" transform="rotate(26, 0,0)" rotate ="-16deg"font-size="3.5"fill="hsl(30, 61%, 50%)">คณะเทคโนโลยีสารสนเทศ</text> <text x=122.5 y=148 transform-origin="152.5 115" transform="rotate(26, 0,0)" rotate="-15" font-size="2.2" fill="hsl(30, 61%, 50%) ">FACULTY OF INFORMATION TECHOLOGY</text> </g> <g id="pillar"> <path d="M5.5 93 l0,-15 l5,-2.5 l0,15 z" fill="hsl(0, 61%, 50%)" /> <path d="M5 81 l26,13 z" stroke="hsl(0, 4%, 80%)"/> <path d="M5 84 l26,13 z" stroke="hsl(0, 4%, 80%)"/> <path d="M5 87 l26,13 z" stroke="hsl(0, 4%, 80%)"/> <path d="M5.5 93 l0,-15 l-5,-2.5 l0,15 z" fill="hsl(0, 60%, 41%)"/> <path d="M5.5 78 l5,-2.5 l-5,-2.5 l-5,2.5 z" fill="hsl(0, 61%, 50%)"/> </g> <use href="#pillar" x="30" y="15"/> <use href="#pillar" x="60" y="30"/> <use href="#pillar" x="90" y="45"/> <use href="#pillar" x="120" y="60"/> <use href="#pillar" x="150" y="75"/> <use href="#pillar" x="180" y="90"/> <path d="M0 120 l160,80 l40,0 l0,-10 l-200,-100 z"fill="hsl(0, 0%, 52%) "/> <path d="M0 120 l160,80 l-10,0 l-200,-100z" fill="hsl(0, 0%, 62%) "/> <path d="M140 0 l60,30 l0,-16 l-60,-30 z"fill="hsl(93, 36%, 35%) " stroke="hsl(91, 65%, 15%)" stroke-dasharray="5,5"/> <path d="M200 15 l-60,-30 l10,0 l60,30z"fill="hsl(93, 36%, 55%)" stroke="hsl(91, 65%, 15%) " stroke-dasharray="5,5" /> <!-- Grid <circle r="1" cx="200" cy="15" fill="red"/> <defs> <pattern id="grid" viewBox="0,0,10,10" width="1%" height="1%"> <rect fill="#0001" width="1" height="10" x="1" y="0"/> <rect fill="#0001" width="1" height="10" x="3" y="0"/> <rect fill="#0001" width="1" height="10" x="5" y="0"/> <rect fill="#0001" width="1" height="10" x="7" y="0"/> <rect fill="#0001" width="1" height="10" x="9" y="0"/> <rect fill="#0001" width="10" height="1" x="0" y="1"/> <rect fill="#0001" width="10" height="1" x="0" y="3"/> <rect fill="#0001" width="10" height="1" x="0" y="5"/> <rect fill="#0001" width="10" height="1" x="0" y="7"/> <rect fill="#0001" width="10" height="1" x="0" y="9"/> <path d="M0 0 h10 L9 1 h-8 v8 L0 10 z" fill="#ff05"/> <path d="M10 10 h-10 L1 9 h8 v-8 L10 0 z" fill="#0f05"/> <rect fill="#0002" width="10" height=".1" x="0" y="9.9"/> <rect fill="#0002" width="10" height=".1" x="0" y="0"/> <rect fill="#0002" height="10" width=".1" y="0" x="9.9"/> <rect fill="#0002" height="10" width=".1" y="0" x="0"/> </pattern> </defs> <rect fill="url(#grid)" width="1000" height="1000" x="0" y="0"/> <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"/> </svg> </svg> </html>