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>