Shapes with SVG

100%

Shapes with SVG

✓ Published2🌍 Public

Last edited Nov 18, 2019

Created on Nov 18, 2019

This example shows two colored circles in an SVG canvas, with a single black line positioned below them. The circles use solid fills of orange and blue, while the line spans from an upper-left to a lower-right coordinate. The visualization is rendered entirely through inline SVG markup in the HTML body, with no dynamic data or interaction. The code imports the `select` function from D3.js to update a message div, and an ES6 module exports a greeting string.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape creation using D3 version 6, showing circles, rectangles, lines, and paths rendered inside a 960×500 SVG canvas. The code uses the `select` function from the D3 library to display a text message, while shapes are styled through inline attributes and CSS classes. A group element with a transform translates and fills shapes with a light blue color and black stroke. The visualization highlights how SVG elements and D3’s selection API work together in a simple, static scene without data binding.

Jjakenachlas

89% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes in an SVG canvas, displaying circles and a rectangle with default black fills except for one red circle. The scene is rendered entirely through SVG markup, with external styling handled by a CSS stylesheet. The code uses the D3.js `select` function to update a message element’s text content, while also showcasing an ES6 module import from a local file. The page layout is set with CSS to remove margins and hide overflow.

Rrmaldonadosnz

88% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic geometric shapes—circles, rectangles, lines, and paths—using SVG elements combined with CSS classes. It highlights the flexibility of SVG for drawing shapes and the ability to control their appearance, such as fill colors, strokes, and line joins, through stylesheets. The visualization uses a D3 v5 selection to update a text message in the DOM, while the layout is achieved with SVG transformations. The code imports the `select` function from D3 and relies on an ES6 module for the displayed message.

VVito

88% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, lines, and paths—using SVG and CSS styling. It shows various fill colors, stroke properties, and grouped transformations like scaling and translation to position shapes across the canvas. The visualization uses raw SVG elements within an HTML file, with a linked stylesheet providing additional styling rules for line elements. The code includes D3.js imports but primarily relies on native SVG markup to render the shapes, with CSS classes and attributes controlling appearance.

Bbobi0017

87% match

Loading thumbnail…

Shapes with SVG and CSS

A single SVG canvas displays basic geometric shapes, including circles, rectangles, lines, and a path, colored with fills and strokes. The code uses plain SVG elements with CSS classes for styling, such as the `.lines` class for stroke properties, and applies a group transform for scaling and translation. The shapes are arranged in overlapping groups to demonstrate how SVG coordinates and CSS styling affect rendering, with no interactive behavior.

Iisaachowen

87% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays basic SVG shapes—a circle, rectangle, line, and path—arranged in two groups on a 960×500 canvas. The shapes are rendered with inline SVG markup, while CSS styles the line group with a black stroke and the path with a red, round-joined stroke. A `<g>` element with a `fill="blue"` attribute applies color to the circle and rectangle, and the overall graphic is transformed using SVG `translate` and `scale` operations. No JavaScript libraries are used; the visualization relies entirely on static HTML, SVG, and CSS.

VVeena Muralidharan

87% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged on a 960x500 canvas. It demonstrates how SVG graphics are used directly in HTML. The code uses SVG elements like `<circle>`, `<rect>`, and `<line>`, with a CSS stylesheet defining stroke attributes for grouped `.lines` elements. Some shapes have explicit fill colors, while a transformed group applies a teal fill and black stroke. Rendering is done entirely with inline SVG.

RRoger Yu-Hsiang Lo

87% match

Loading thumbnail…

Shapes with CSS and SVG

This example displays two circles rendered inside an SVG container on a plain HTML page. The circles are drawn with SVG elements, using a `<g>` group transformed along the x-axis, with one circle having a pink fill and the other having no fill but a thick black stroke. The page applies basic CSS for typography and layout, including a monospace font and hidden overflow. No JavaScript libraries are used; the visualization relies solely on native SVG markup and CSS styling.

Ooreltop

87% match