Код IT
← Каталог

SVG — рисунки кодом — Домик (стены + крыша + дверь)

Фрагмент из «SVG — рисунки кодом»: Домик (стены + крыша + дверь).

html lab1119 embed URL статья в энциклопедии
HTML main.html 
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Домик SVG</title>
  <style>
    body { margin: 0; display: grid; place-items: center; min-height: 100dvh; background: #e0f2fe; }
  </style>
</head>
<body>
  <svg width="260" height="260" viewBox="0 0 260 260" role="img" aria-label="Домик">
    <!-- стены -->
    <rect x="80" y="120" width="100" height="90" fill="#fde68a" stroke="#92400e" stroke-width="2"/>
    <!-- крыша -->
    <polygon points="60,120 130,60 200,120" fill="#ef4444" stroke="#991b1b" stroke-width="2"/>
    <!-- дверь -->
    <rect x="115" y="155" width="30" height="55" fill="#78350f" stroke="#451a03" stroke-width="1"/>
  </svg>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Домик SVG</title>
  <style>
    body { margin: 0; display: grid; place-items: center; min-height: 100dvh; background: #e0f2fe; }
  </style>
</head>
<body>
  <svg width="260" height="260" viewBox="0 0 260 260" role="img" aria-label="Домик">
    <!-- стены -->
    <rect x="80" y="120" width="100" height="90" fill="#fde68a" stroke="#92400e" stroke-width="2"/>
    <!-- крыша -->
    <polygon points="60,120 130,60 200,120" fill="#ef4444" stroke="#991b1b" stroke-width="2"/>
    <!-- дверь -->
    <rect x="115" y="155" width="30" height="55" fill="#78350f" stroke="#451a03" stroke-width="1"/>
  </svg>
</body>
</html>