Skip to main content
SimilarExport ZIP
100%

House / d3

✓ Published0🌍 Public
CCharisma9
Last edited Aug 1, 2016
Created on Aug 1, 2016

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.

AI-generated description

Built with blockbuilder.org

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

SVG House

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.

DDDDDDanica
85% match
Loading thumbnail…

The House

A whimsical SVG scene renders a small house with a sky blue sky, a bright yellow sun, brown triangular roof sections, and a green lawn. A grid of thin black lines overlays the entire 100×100 viewBox, creating a blueprint-like effect. The house is detailed with a white picket fence, drawn as a path with vertical line segments, across the lower portion of the lawn. The illustration is hand-coded using raw SVG elements—paths, circles, and lines—with explicit stroke and fill attributes, rather than relying on a JavaScript visualization library. The scene’s charm comes from its simple, direct construction.

Sshabdullah05
82% 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
81% match
Loading thumbnail…

nature scene

This example shows a simple nature scene built with D3.js, depicting a house, trees, clouds, sun, and a fence in an SVG canvas. The code uses D3’s selection and append methods to create each shape, including rectangles for the house and door, polygons for the roof, lines for palm tree trunks and fronds, and a path with d3.curveBasisClosed for the cloud silhouette. A circle represents the sun, while a long rectangle forms the fence. The visualization renders entirely with SVG elements, using hardcoded coordinates and colors to assemble the static scene.

Ssaisathyapriya097@gmail.com
80% 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
79% match
Loading thumbnail…

Fork of The House

This visualization displays a schematic house built on a grid of vertical and horizontal lines, using SVG paths and shapes. It shows a simple dwelling with a brown roof, yellow windows, a blue door, and a small circular window. The rendering uses raw SVG elements like `path`, `rect`, and `circle` within a React component. The grid lines are drawn with stroke-based paths, while the house features use filled paths and rectangles. The code relies on React for rendering the SVG structure, with no additional data or animation libraries. The scene is static and purely geometric, emphasizing a clean, minimal illustration style.

Cchalasanigayaetiri@gmail.com
79% match
Loading thumbnail…

Fork of The House

This visualization shows a stylized outdoor scene with a house, tree, human figure, dog, bench, and sun, all drawn directly in SVG. The code uses React to render a single SVG element with inline shapes, including rectangles, paths, and circles. It employs SVG attributes like `fill` and `stroke` for colors and outlines, with specific coordinates for each component. The rendering approach relies on static SVG markup embedded in JSX, with no external data source or dynamic interactions. The scene is constructed from basic geometric primitives to depict a simple, colorful garden environment.

SSrividya Madasu
78% match
Loading thumbnail…

Fork of Fork of The House

This example renders a static, hand-coded scene of a house with a garden, mango tree, dog, bench, and two horses using only SVG primitives. The visualization shows a playful, low-fidelity illustration of a domestic outdoor setting. The code directly embeds SVG elements such as `<rect>`, `<circle>`, and `<path>` within an `index.html` file, using inline attributes like `fill`, `stroke`, and `d` to define shapes. No external libraries are used; the rendering relies on the browser’s native SVG support. The viewBox is set to 150 by 100, and the scene is styled with a green border and lightgreen background, emphasizing a simple, hand-drawn aesthetic.

Cchalasanigayaetiri@gmail.com
77% match