Create House desig using SVG in HTML.
Create House desig using SVG in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<svg height="400px" width="900px" style="border: 3px solid rgb(0, 0, 0)">
<!-- Backgroungd sky -->
<rect x="0" y="0" width="900px" height="300px" fill="#00e7ff"></rect>
<!-- Green Grass -->
<rect x="0" y="300" height="100px" width="900px" fill="green"></rect>
<!-- Chimnni -->
<rect x="500" y="110" height="40" width="20" fill="#b07f00" stroke="black" stroke-width="2px"></rect>
<rect x="497.5" y="105" height="5" width="25" fill="#b07f00" stroke="black" stroke-width="2px"></rect>
<!-- Triangle roof -->
<polygon points="330,175,570,175,450,100" fill="brown" stroke="black" stroke-width="3px"></polygon>
<!-- Main square body of house -->
<polygon points="350,175,350,300,550,300,550,175" fill="orange" stroke="black" stroke-width="3px"></polygon>
<!-- Roof Circle & Pluse(+) symbole -->
<circle cx="450" cy="137" r="15" fill="yellow" stroke="black" stroke-width="3px"></circle>
<line x1="450" y1="122" x2="450" y2="152" stroke="black" stroke-width="1.5px"></line>
<line x1="435" y1="137" x2="465" y2="137" stroke="black" stroke-width="1.5px"></line>
<!-- Windows -->
<rect x="490" y="210" height="40px" width="50" fill="#ddf7fa" stroke="black" stroke-width="2px"></rect>
<line x1="514" y1="210" x2="514" y2="250" stroke="black" stroke-width="1px"></line>
<line x1="516" y1="210" x2="516" y2="250" stroke="black" stroke-width="1px"></line>
<rect x="360" y="210" height="40px" width="50" fill="#ddf7fa" stroke="black" stroke-width="2px"></rect>
<line x1="384" y1="210" x2="384" y2="250" stroke="black" stroke-width="1px"></line>
<line x1="386" y1="210" x2="386" y2="250" stroke="black" stroke-width="1px"></line>
<!-- Door -->
<rect x="420" y="200" height="100px" width="60" fill="#5d5d5d" stroke="black" stroke-width="2px"></rect>
<rect x="424" y="204" height="92px" width="52" fill="gray" stroke="black" stroke-width="2px"></rect>
<circle cx="430" cy="250" r="2" fill="black"></circle>
<!-- Path out side the house -->
<polygon points="420,300,520,400,580,400,480,300" stroke="black" stroke-width="2px"></polygon>
<polygon points="440,320,460,340,520,340,500,320" stroke="black" fill="#d0d0d0" stroke-width="2px"></polygon>
<polygon points="480,360,500,380,560,380,540,360" stroke="black" fill="#d0d0d0" stroke-width="2px"></polygon>
<!-- Mountens -->
<polygon points="0,200,100,75,250,300,0,300" stroke="black" fill="#680000"></polygon>
<!-- Sun -->
<circle cx="250" cy="50" r="30" fill="#ff7a01" stroke="Orange" stroke-width="4px"></circle>
<!-- Clouds -->
<circle cx="675" cy="50" r="15" fill="white" ></circle>
<circle cx="775" cy="50" r="25" fill="white" ></circle>
<circle cx="750" cy="50" r="30" fill="white" ></circle>
<circle cx="700" cy="50" r="25" fill="white" ></circle>
<circle cx="725" cy="50" r="30" fill="white" ></circle>
<circle cx="800" cy="50" r="15" fill="white" ></circle>
<circle cx="450" cy="50" r="15" fill="white" ></circle>
<circle cx="425" cy="50" r="20" fill="white" ></circle>
<circle cx="375" cy="50" r="15" fill="white" ></circle>
<circle cx="400" cy="50" r="20" fill="white" ></circle>
<!-- Bountry -->
<rect x="10" y="275" width="330" height="4" stroke="black" fill="#d7a900"></rect>
<rect x="20" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="40" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="60" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="80" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="100" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="120" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="140" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="160" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="180" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="200" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="220" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="240" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="260" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="280" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="300" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="320" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="560" y="275" width="340" height="4" stroke="black" fill="#d7a900"></rect>
<rect x="570" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="590" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="610" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="630" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="650" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="670" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="690" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="710" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="730" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="750" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="770" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="790" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="810" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="830" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="850" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="870" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<rect x="890" y="265" width="4" height="35" stroke="black" fill="#d7a900"></rect>
<!-- Tree -->
<rect x="750" y="250" height="75px" width="25px" fill="brown" stroke="black"></rect>
<circle cx="735" cy="250" r="30px" fill="yellowgreen"></circle>
<circle cx="790" cy="250" r="30px" fill="yellowgreen"></circle>
<circle cx="762.5" cy="212.5" r="30px" fill="yellowgreen" ></circle>
<!-- Fruit -->
<circle cx="725" cy="260" r="2.5" fill="red"></circle>
<circle cx="740" cy="245" r="3.5" fill="red"></circle>
<circle cx="800" cy="255" r="3" fill="red"></circle>
<circle cx="765" cy="200" r="2.5" fill="red"></circle>
<circle cx="775" cy="230" r="3" fill="red"></circle>
<!-- Birds -->
<polygon points="775,95,800,104,825,95,800,101" stroke="black" stroke-width="1px"></polygon>
<polygon points="185,45,210,54,235,45,210,51" stroke="black" stroke-width="1px"></polygon>
<polygon points="495,45,520,54,545,45,520,51" stroke="black" stroke-width="1px"></polygon>
<!-- <path d="M480 300 C 40 10, 65 10, 95 80 S 0 0, 180 80 Z" stroke="black" fill="yellow"/> -->
<text x="790" y="390" fill="white">© By dev Shah</text>
</svg>
</body>
</html>
Output:
Comments
Post a Comment