SVG House

100%

✓ Published0🌍 Public

Last edited Apr 4, 2017

Created on Mar 22, 2017

This example draws a simple house composed entirely of SVG shapes. A hot pink roof, a rectangular body, a door, and a window are assembled using `d3` selections with `<path>`, `<rect>`, `<circle>`, and `<line>` elements. The door is semi-transparent, and the window includes a cross pattern. The code renders these shapes directly in an `index.html` file, using D3 v4 to create the SVG structure against a light gray background.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

House / d3

A static SVG scene depicts a stylized house with a red roof, a yellow sun, a green lawn, and a white door, all composed of basic geometric shapes. The code uses d3.v4 to render the graphic, explicitly drawing each element with `<rect>`, `<circle>`, and `<path>` tags. Two rotated rectangles form the door, while a transparent path outlines the ground. The visualization relies on hard-coded coordinates and SVG styling, with no data or interaction.

CCharisma9

85% match

Loading thumbnail…

flower_vase.js!

This example shows a simple house built from basic SVG shapes by directly manipulating the DOM with D3.js. It uses `d3.select` to target the SVG canvas and appends rectangles, a polygon, and circles to construct the house, roof, windows, door, and doorknob. The code relies on D3's chained `.attr` methods to set coordinates, dimensions, and fill colors on each shape, while the accompanying stylesheet provides a light gray background for the SVG. The scene is static, with no interaction or animation.

Ssriram.official9@gmail.com

83% match

Loading thumbnail…

My Home

This example draws a night-time scene of a house with a roof, door, windows, streetlight, and bushes, rendered as SVG shapes. It demonstrates fundamental DOM manipulation with D3.js by appending rectangles, circles, lines, and paths to a pre-selected SVG element. The code uses d3.select and .attr methods to position and style elements, and creates a reusable window-building function to simplify repeated structure. The scene is composed entirely with hard-coded coordinates and scale factors, with no external data source.

SSai Krishna Doultabad

83% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG graphics by constructing a simple house illustration from basic geometric shapes. The visualization uses inline SVG within an HTML page, drawing rectangles and lines as raw SVG elements to form the house structure and roof. The code applies CSS properties directly to SVG tags, specifying fill colors, stroke colors, and stroke widths for each shape. This serves as a bare-minimum introduction to how SVG can be used for data visualization, working with the standard SVG API for shapes and lines without any additional JavaScript or visualization libraries.

HHieuVu179

80% match

Loading thumbnail…

house

A static SVG illustration of a house scene depicts a red building with a brown roof, yellow door, green ground, and a column of smoke rising from a chimney. The composition includes decorative stars, a whiskey label, and text reading “SMOKE NO FIRE.” The code applies a gooey filter effect to the smoke shapes using SVG filters and animates nothing. It is built with pure SVG markup inside an HTML file, using no JavaScript or D3 APIs, and renders entirely via inline SVG elements.

MMoximillian

80% match

Loading thumbnail…

The House

The House shows a simple cartoon house built from SVG shapes, including a brown roof, yellow lit windows, a blue door, and a circular window, all overlaid on a grid of thin black lines. The visualization is rendered using raw SVG path, circle, and rect elements inside an HTML page, with no external libraries or frameworks active. The grid lines are drawn via multiple SVG path elements, while the house components use fills and strokes. The design demonstrates basic SVG drawing with React metadata indicated, but the code itself relies on plain HTML and JavaScript markup.

Sshabdullah05

80% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental Scalable Vector Graphics (SVG) shapes—circles, rectangles, lines, and a path—assembled into a simple house-like composition on a 600x600 canvas. It shows how static SVG markup can define geometry with attributes like coordinates, dimensions, colors, and strokes. The code uses a single exported `main` function that injects the SVG directly into a container, and includes a variable controlling font size for interactive editing via VizHub's alt-drag widget.

SSampan Naik

79% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes and positioning within a fixed 960×500 viewport. It shows a house-like structure composed of rectangles—a cyan-tinted door, two windows, and a larger body—all outlined in navy, beneath a red triangular roof formed by three connected line segments. The code uses plain SVG elements such as `rect` and `line` with explicit `x`, `y`, and `stroke-width` attributes, rendered directly in the HTML without any JavaScript or external libraries.

HHieuVu179

79% match