shapes with SVG

100%

shapes with SVG

✓ Published0🌍 Public

Last edited Oct 3, 2020

Created on Oct 3, 2020

A simple SVG scene displays a red circle and a green square, alongside a blue circle and rectangle grouped inside a `<g>` element with a translation applied. The example demonstrates basic SVG shape creation and grouping using native SVG elements like `circle`, `rect`, and `g`, with fill colors set via attributes. The SVG is embedded directly in the HTML with a viewport of 960 by 500 pixels. A linked stylesheet defines page-level margins and overflow behavior, while an unused `.heighlighted` class is also present. The code uses no JavaScript libraries, relying solely on static SVG markup.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes With SVG

This example demonstrates basic SVG shape rendering using static circle and rectangle elements defined directly in the HTML markup. It shows how coordinates, dimensions, and fill colors control each shape’s appearance, with a grouping element (`<g>`) applying a shared blue fill and vertical translation to a second row of shapes. The scene uses plain SVG attributes without external libraries, paired with a minimal CSS file that resets margins and hides overflow for a clean full-viewport canvas.

Ssalvar2134

91% 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

90% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered with SVG, including two circles and a red rectangle. The circles are grouped using an SVG `<g>` transform to shift them horizontally, while the rectangle is positioned independently. Styling is handled through an external CSS file, which sets the page margin to zero and hides overflow. The visualization uses raw SVG elements within an HTML document, with a green color class defined for potential highlighting, though no dynamic behavior is shown.

Uuskh580e

90% match

Loading thumbnail…

Shapes With SVG

This example demonstrates how to draw and group basic shapes using only SVG, with no external libraries or data. It shows circles and rectangles in different positions and sizes, some with individual colors and others grouped inside a `<g>` element that applies a shared blue fill and a translation transform. The code defines shapes directly in a static SVG canvas using standard elements such as `<circle>` and `<rect>`, with styling from a linked stylesheet that sets page margins and hides overflow.

KKateryna

90% match

Loading thumbnail…

Shapes with svg and css

This example demonstrates basic SVG shapes—a circle and a rectangle—styled with CSS and rendered in a fixed 960 by 500 viewport. The shapes appear twice: first as a standalone circle and rect, then grouped together inside an SVG `<g>` element with a green stroke applied to the group. The second set uses inline attributes like `fill="red"` and `fill="#719bde"`, while the CSS file sets global margins and hides overflow. The code uses raw SVG elements (`<circle>`, `<rect>`, `<g>`) with no JavaScript libraries or data binding.

HHarshit Birla

90% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic SVG shapes—circles and rectangles—positioned on a 960 by 500 canvas, with individual elements styled directly via fill attributes or grouped within a `<g>` element to apply shared styling. The HTML markup uses standard SVG tags like `<circle>`, `<rect>`, and `<g>` with a transform for translation, while a linked stylesheet defines global body margins and a `.highlighted` class. Shapes appear in their default black unless explicitly colored red, green, or blue, demonstrating how SVG attributes and CSS rules combine for static vector rendering without JavaScript interaction.

Mmkdeeps01

89% match

Loading thumbnail…

Shapes with SVG and CSS

A single SVG canvas displays a small collection of primitive shapes, including a red circle, a blue square, a diagonal line, and a multi-segment path. The shapes are grouped and transformed using nested SVG `<g>` elements, with the outer group scaled and inner groups applying fill and stroke styles. The image is rendered directly in an HTML page with inline SVG markup, using CSS-like presentation attributes such as `fill`, `stroke`, and `stroke-width` to define the visual appearance. No external JavaScript libraries or data sources are used.

Sskrishnau

89% match

Loading thumbnail…

shapes with svg

This example demonstrates basic SVG shapes—circles, rectangles, and a path—rendered on a red background using static markup in index.html. It shows how to apply fill colors, stroke styling, and group transformations using the `<g>` element, with shapes appearing both unstyled and with inline attributes. The code directly embeds SVG elements in HTML and uses a separate styles.css file that imports D3’s `select` function, though no dynamic data or interaction is present. The visualization relies solely on declarative SVG syntax without JavaScript-driven updates.

Nnexus1058

89% match