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>
    
    <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" />
    
    
    
    
    
   
        <rect fill="url(#isometric)" width="1000" height="1000"/>
    </svg>
        </svg>
</html>