Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Jun 30, 2020

Created on Jun 29, 2020

This example demonstrates basic shape drawing and grouping within an SVG canvas. It shows a green rectangle and a red circle rendered directly inside an SVG element, with a second copy of both shapes wrapped in a `g` transform group that shifts them downward. The visualization uses raw SVG syntax with inline `fill` attributes, alongside a simple CSS stylesheet that hides document margins and overflow. Notably, the code includes pure SVG elements without any JavaScript libraries, highlighting the visualization’s reliance on native browser rendering.

AI-generated description

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles and rectangles—styled directly with CSS and inline attributes. It shows how shape properties like position, size, fill color, stroke, and grouping via the `<g>` element affect rendering. The visualization uses raw SVG markup within an HTML page, with external styling from `styles.css`. A grouped set of shapes applies a shared fill color and stroke, while individual shapes use explicit `fill` values such as red and hex codes. No JavaScript libraries are involved; rendering is purely declarative SVG.

EEvan Chang

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling. It shows circles and rectangles positioned directly on an SVG canvas, with colors applied through presentation attributes like `fill="red"` and inline styles, as well as a `<g>` group that applies a shared `fill="blue"` to multiple shapes. The code uses native SVG elements (`circle`, `rect`, `g`) with a `transform` attribute for translation, plus an external stylesheet for global page styling. No data source or dynamic behavior is present; all shapes are static and defined directly in the HTML markup.

Ppcbt1125

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

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, with styling and grouping controlled through CSS and SVG attributes. It shows two circles and two rectangles, using explicit fill colors on some shapes and applying a blue fill to a grouped set of shapes via the SVG `<g>` element’s transform and fill attributes. The code uses raw SVG markup within an HTML document, linking to an external stylesheet that sets the body margin and overflow. No JavaScript libraries are involved; the rendering relies entirely on native SVG and CSS.

TTiff

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

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

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged within a single canvas, with styling applied through an external CSS file. It shows how SVG elements inherit presentation attributes like fill and stroke, and how grouping with `<g>` allows applying uniform properties or transforms, such as scaling and translation, to multiple shapes at once. The visualization uses raw Scalable Vector Graphics markup and CSS selectors, including a `.lines` class that customizes stroke width and color for specific elements, highlighting the interplay between inline attributes and stylesheet rules.

Sssd4

91% match