geometry

100%

✓ Published0🌍 Public

Last edited Jun 19, 2017

Created on Jun 19, 2017

A simple SVG scene displays three basic geometric shapes: a green circle, a yellow rectangle, and a blue line. The circle is positioned at coordinates (90, 90) with a radius of 50, while the rectangle has a width and height of 20 and appears at the default origin (0, 0). The line stretches from (0, 100) to (200, 300) with a stroke width of 3. The visualization uses D3.js v4 to append these SVG elements to a 960-by-500 canvas, demonstrating basic shape creation with d3-selection.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes within a single static scene, showing how basic geometric elements compose a simple graphic. It includes a red rectangular border, a semi-transparent blue circle, a black diagonal line, and a path outlining an angular polyline. The code defines these shapes directly in SVG markup embedded in an HTML file, using attributes like `cx`, `cy`, `r`, and `d` to set positions and geometry. No external libraries are used; the visualization relies entirely on native SVG rendering in the browser.

VVincent Leduc

79% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates three basic SVG shapes—a red circle, a yellow rectangle with a navy border, and a diagonal line—positioned on a 960×500 canvas. The code uses raw SVG elements (`circle`, `rect`, `line`) directly in HTML, with attributes such as `cx`, `cy`, `r`, `stroke`, and `stroke-width` controlling geometry and styling. No JavaScript libraries are involved; the rendering is purely declarative SVG. The visualization serves as a minimal reference for how SVG coordinates, fill colors, and strokes work in a standalone document.

DDilara Bozkurt

78% match

Loading thumbnail…

Shapes

The visualization displays a collection of basic geometric shapes—an ellipse, rectangle, and circle—colored individually and grouped to illustrate SVG styling and transformation. A second group applies a uniform fill and stroke, while a line and an unclosed path demonstrate stroke properties and line joins. The example is built with d3.v5, using the `select` API to target the SVG, and relies on raw SVG elements and CSS classes for rendering, with a fixed viewport enforced by the stylesheet.

Bbakstorage00001

78% match

Loading thumbnail…

fresh block

A simple SVG scene displays a red circle, a rounded rectangle, and a diagonal line positioned on a fixed 960×500 canvas. The circle sits at the center-left, the rectangle occupies the upper-left area, and the line connects the circle’s center to the lower-right corner. Using D3 v4, the code selects the body element, appends an SVG container, and then creates each shape via `svg.append`, setting attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `x1`/`y1`/`x2`/`y2` directly. No data binding or interactions occur; the visualization is purely static.

Aantichaos

78% match

Loading thumbnail…

SVG Shapes

This example demonstrates fundamental SVG shape elements—circle, rect, and line—positioned within a fixed 960 by 960 coordinate system. The visualization compares shapes with default styling against those customized with explicit `fill` and `stroke` attributes, while a `<g>` group applies shared `fill="teal"` and `stroke="black"` to its children. Beyond these static SVG primitives, the code also showcases basic D3 integration by importing `select` from `d3` and using it to set the text content of a div element, along with a separate ES6 module export. The rendering relies entirely on SVG markup.

YYogesh Joshi

78% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn directly with SVG elements, including circles, rectangles, lines, and paths, with styling applied through presentation attributes and a separate CSS stylesheet. The scene shows how fill colors, stroke widths, and group transformations (via the `g` element's `translate` attribute) alter the appearance of primitive shapes. The SVG markup defines shapes like a red circle, a green rectangle, and a blue group with black outlines, while the un-styled `path` and `line` elements create simple angular forms. The code relies on native SVG syntax and CSS, with no JavaScript libraries, and uses a fixed `960x900` canvas.

Iikimes

78% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental Scalable Vector Graphics (SVG) shapes rendered directly within an HTML document. It shows a pink circle, a yellow rectangle with a navy border, a black diagonal line, and a red polyline path composed of relative line commands. The visualization relies on the native SVG element namespace inside an HTML file, using attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and the `d` path data syntax to define each shape's geometry and styling without any external libraries.

Aanqiwoo

78% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the basic building blocks of SVG graphics by rendering three distinct shapes: a black circle with a red companion, a thick navy diagonal line, and an open polyline path. The code uses raw SVG elements—`circle`, `line`, and `path`—to construct the visual scene. It defines each shape’s geometry through attributes like `cx`, `cy`, `r`, `x1`, `y1`, and the path’s `d` data, with styling applied via `fill`, `stroke`, and `stroke-width`. The shapes are placed directly inside an `svg` viewport of 900 by 500 pixels, showcasing how SVG’s XML-based structure maps coordinates to the canvas.

Yyejichun@naver.com

78% match