SVG with CSS House
How do I make an svg with css house?
What is a svg with css house? How do you make a svg with css house? This script and codes were developed by Tom on 11 January 2023, Wednesday.
SVG with CSS House - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG with CSS House</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head> <meta charset="utf-8"> <title>You, Me & SVG</title> <link rel="stylesheet" href="stylesheets/style.css">
</head>
<body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 340 340" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Home Icon</title> <desc>A yellow house with blue windows.</desc> <!-- Bg Circle --> <circle class="background-circle" cx="170" cy="170" r="162"/> <!-- Clouds --> <path d="M146.487 131.174c-1.34-9.782-13.134-3.526-13.134-3.526-3.228-9.335-12.414-4.146-12.414-4.146-.05-12.91-12.168-7.175-12.168-7.175-2.36-12.985-19.217-13.93-25.15-5.115-4.768 7.05-.497 13.53-.497 13.53C76.05 122.61 76 131.175 76 131.175v2.507h83"/> <path d="M286.487 131.174c-1.34-9.782-13.134-3.526-13.134-3.526-3.228-9.335-12.414-4.146-12.414-4.146-.05-12.91-12.167-7.175-12.167-7.175-2.36-12.985-19.217-13.93-25.15-5.115-4.768 7.05-.497 13.53-.497 13.53-7.076-2.134-7.126 6.432-7.126 6.432v2.507h83"/> <!-- Chimney --> <rect class="chimney" x="98" y="127" width="14" height="21"/> <rect class="chimney-topper" x="95" y="123" width="20" height="4"/> <!-- House --> <rect class="body" x="90" y="198" width="162" height="84"/> <polygon class="roof" points="256,148 262,203 80,203 87,148 327,148"></polygon> <!-- Door --> <rect class="door" x="153" y="222" width="36" height="60"/> <rect class="door" x="153" y="218" width="36" height="10" rx="5" ry="5"/> <rect class="door-knob" x="183" y="252" width="2" height="8"/> <g class="windows" transform="translate(72 110)"> <!-- Window R --> <rect x="36" y="113" width="14" height="14"/> <rect x="52" y="113" width="14" height="14"/> <rect x="36" y="129" width="14" height="14"/> <rect x="52" y="129" width="14" height="14"/> <line x1="34" y1="147" x2="69" y2="147"/> <!-- Window L --> <rect x="130" y="113" width="14" height="14"/> <rect x="146" y="113" width="14" height="14"/> <rect x="130" y="129" width="14" height="14"/> <rect x="146" y="129" width="14" height="14"/> <line x1="128" y1="147" x2="162" y2="147"/> </g> <!-- Flowers --> <symbol id="bloom"> <circle class="flower-outer" cx="228" cy="267" r="6"/> <circle class="flower-inner" cx="231" cy="266" r="2"/> </symbol> <g class="flower" transform="scale(.8) translate(60,71)"> <line x1="228" y1="267" x2="228" y2="282"/> <use xlink:href="#bloom"/> </g> <g class="flower" transform="translate(-22, 0)"> <line x1="228" y1="267" x2="228" y2="282"/> <g transform="rotate(195,228,267)"> <use xlink:href="#bloom"/> </g> </g> <g class="flower" transform="translate(-93, 0)"> <line x1="228" y1="267" x2="228" y2="282"/> <g transform="rotate(50,228,267)"> <use xlink:href="#bloom"/> </g> </g> <g class="flower" transform="translate(-116, 0) scale(.8) translate(55,71)"> <line x1="228" y1="267" x2="228" y2="282"/> <use xlink:href="#bloom"/> </g> <!-- TEXT --> <text x="85" y="97">Haaase</text> </svg>
</body>
</html>
</body>
</html>
SVG with CSS House - Script Codes CSS Codes
svg { width: 30%; height: auto;
}
.background-circle { fill: #068C70; stroke: #FFFFFF; stroke-width: 15px;
}
.chimney { fill: #FBF6A7;
}
.chimney-topper { fill: #E04E27;
}
.body { fill: #FBF6A7;
}
.roof { fill: #E04E27;
}
.door { fill: #E04E27;
}
.door-knob { fill: #FBF6A7;
}
.flower line { fill: #068C70; stroke: #068C70; stroke-width: 1px;
}
.flower-outer { fill: #EC7E23;
}
.flower-inner { fill: #FBCE1D;
}
text { font-family: Filmotype Major; font-size: 70px; fill: #3E9FD8; stroke: #FFFFFF; stroke-width: 2px;
}
.windows rect { fill: #3E9FD8;
}
.windows line { stroke: #E04E27; stroke-width: 4px;
}
path { fill: none; stroke: #FFFFFF; stroke-width: 2px;
}
Developer | Tom |
Username | tomltd |
Uploaded | January 11, 2023 |
Rating | 3 |
Size | 2,865 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Quiz | 2,224 Kb |
Portfolio page my own framework | 2,306 Kb |
Airpoints single faq | 37,929 Kb |
A Pen by Tom | 10,502 Kb |
Vue todo | 2,021 Kb |
Presentations | 3,039 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS Google Now | Jackmoran | 3,196 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
Blog | Rottingroom | 1,430 Kb |
Video mute | Leon9208 | 2,131 Kb |
Draggables in pure angular | Rlo206 | 5,167 Kb |
Simple CSS loader. | Cabrera | 2,574 Kb |
Font stack | Adrianjacob | 1,868 Kb |
Twitch TV | Natester13 | 4,488 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!