SVG ตึกคณะ

✨ Jabont

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#f1f6ff;
        margin:1rem;
        text-align:center;
        font-family:sans-serif;
      }
      svg{
        background:#80DEEA;
        box-shadow:0 0 20px #0002;
        width:100%;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 200 100">
      <g transform="translate(0, 0)">
        
        <g>
          <rect x="13.9" y="24"
                width="40" height="2"
                fill="#ccd"
                >
          </rect>
          <rect x="13.9" y="calc(24 + 2)"
                width="40" height="12"
                fill="#aac"
                >
          </rect>
          <line stroke-width="2" stroke="#ccd"
                x1="13.9" y1="calc(24 + 2 + 6)" x2="calc(13.9 + 40)" y2="calc(24 + 2 + 6)"
                />
          <line stroke-width="2" stroke="#ccd"
                x1="calc(13.9 + 1)" y1="calc(24 + 2)" x2="calc(13.9 + 1)" y2="calc(24 + 2 + 12)"/>
          <line stroke-width="2" stroke="#ccd"
                x1="calc(13.9 + 39)" y1="calc(24 + 2)" x2="calc(13.9 + 39)" y2="calc(24 + 2 + 12)"/>
          <line stroke-width="2" stroke="#ccd"
                x1="calc(13.9 + 20)" y1="calc(24 + 2)" x2="calc(13.9 + 20)" y2="calc(24 + 2 + 12)"/>
          <line stroke-width="2" stroke="#ccd"
                x1="calc(13.9 + 10.5)" y1="calc(24 + 2)" x2="calc(13.9 + 10.5)" y2="calc(24 + 2 + 12)"/>
          <line stroke-width="2" stroke="#ccd"
                x1="calc(13.9 + 29.5)" y1="calc(24 + 2)" x2="calc(13.9 + 29.5)" y2="calc(24 + 2 + 12)"/>
          <rect x="13.9" y="calc(24 + 2 + 12)"
                width="40" height="4"
                fill="#ccd"
                >
          </rect>
        </g>
        
        <g transform="skewX(30)  scale(1 .6)">
          <rect x="0" y="0"
                width="40" height="40"
                fill="#dde"
                >
          </rect>
          <rect x="10" y="10"
                width="20" height="20"
                fill="#eef"
                >
          </rect>
        </g>
        
        <g transform="translate(0, 0) ">
          <g style="
                    transform:rotateY(60deg) skewY(41deg) scaleX(.69);
                    transform-style: preserve-3d;
                    ">
            <rect x="0" y="0"
                  width="40" height="2"
                  fill="#bbc"
                  >
            </rect>
            <rect x="0" y="calc(0 + 2)"
                  width="40" height="12"
                  fill="#99b"
                  >
            </rect>
            <line stroke-width="2" stroke="#bbc"
                  x1="0" y1="calc(0 + 2 + 6)" x2="calc(0 + 40)" y2="calc(0 + 2 + 6)"
                  />
            <line stroke-width="2" stroke="#bbc"
                  x1="calc(0 + 1)" y1="calc(0 + 2)" x2="calc(0 + 1)" y2="calc(0 + 2 + 12)"/>
            <line stroke-width="2" stroke="#bbc"
                  x1="calc(0 + 39)" y1="calc(0 + 2)" x2="calc(0 + 39)" y2="calc(0 + 2 + 12)"/>
            <line stroke-width="2" stroke="#bbc"
                  x1="calc(0 + 20)" y1="calc(0 + 2)" x2="calc(0 + 20)" y2="calc(0 + 2 + 12)"/>
            <line stroke-width="2" stroke="#bbc"
                  x1="calc(0 + 10.5)" y1="calc(0 + 2)" x2="calc(0 + 10.5)" y2="calc(0 + 2 + 12)"/>
            <line stroke-width="2" stroke="#bbc"
                  x1="calc(0 + 29.5)" y1="calc(0 + 2)" x2="calc(0 + 29.5)" y2="calc(0 + 2 + 12)"/>
            <rect x="0" y="calc(0 + 2 + 12)"
                  width="40" height="4"
                  fill="#bbc"
                  >
            </rect>
          </g>
        </g>
      </g>
    </svg>
  </body>
</html>