Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Jul 23, 2020

Created on Jul 23, 2020

This example demonstrates how to combine SVG shape elements with CSS styling and transformations to create a static geometric composition. It shows circles, rectangles, lines, and a path arranged in a grid-like layout, with some shapes inheriting default black fills while others are explicitly colored red, blue, or green. The code uses raw SVG markup with nested `g` groups, CSS class selectors for stroke styling, and React’s `ReactDOM.render` to display a simple “Hello React!” message. Transform attributes apply scaling and translation to the entire SVG canvas.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using CSS and inline attributes. It shows basic geometric forms composed in a single SVG canvas, with properties like fill, stroke, stroke-width, and transform applied to individual elements or grouped via the `<g>` tag. The code uses plain React to render static JSX, relying on SVG’s native presentation attributes and a linked stylesheet for class-based styling, such as colored strokes on line groups. No data or interactivity is involved; the focus is purely on visual construction and CSS inheritance.

Ccledevoute

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged on a red background. It shows how SVG elements can be styled with inline attributes, grouped using the `<g>` element, and transformed with the `translate` attribute. The code uses plain React to render the SVG markup and relies on CSS for the page’s background color. It also illustrates applying stroke properties like `stroke-width` to grouped lines and paths, showcasing fundamental vector graphics composition without external libraries.

Mmagua

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to compose basic geometric shapes—circles, rectangles, lines, and paths—within an SVG canvas, styled with CSS. It shows shape grouping via nested `<g>` elements, transforms for scaling and translation, and both inline SVG attributes and CSS classes for controlling fill, stroke, and stroke-width. The code uses plain React rendering with SVG’s native elements, including a `<path>` with a `d` attribute for a custom line. A `styles.css` file applies stroke styling to grouped elements and defines a `.highlighted` class.

TThomas Seberechts

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes using SVG elements within a React application, styled with CSS. It shows circles, rectangles, lines, and paths rendered on an SVG canvas with fixed dimensions. The code uses raw SVG markup for circles and rectangles, applying inline fill colors like red and green, while grouping elements with `<g>` tags to apply shared styling attributes such as fill and stroke. A purple stroke with a thick stroke-width highlights the line and path elements. The accompanying CSS file sets body margins to zero and hides overflow.

Ssumaiyamahin

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements with CSS styling. It shows how presentation attributes like `fill` and `stroke` can be set either directly on elements, grouped in a `<g>` tag, or via CSS classes such as `.lines`. The code uses raw SVG markup within a React application, applying transforms for scaling and translation. The styling approach highlights CSS’s role in controlling stroke width, line joins, and colors, while the SVG namespace handles the coordinate-based drawing.

KKarol Paks

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes can be styled and grouped using CSS and SVG attributes. It shows circles, rectangles, a line, and a path rendered on an SVG canvas, with fills and strokes applied directly or inherited from a `<g>` group. The code uses React to render the SVG elements, with styles defined in an external CSS file, and showcases SVG transforms for positioning shapes without repeated coordinates.

Bbcwein

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic SVG shapes—circles, rectangles, lines, and paths—using React and CSS styling. It shows both default black shapes and colored variants, with a specific group (`g`) applying a cyan fill and black stroke, while a `.lines` class adds thick green strokes with rounded line joins. The SVG canvas uses a scale transformation and translation to position elements. Styling is handled entirely through the linked `styles.css` file, with no JavaScript data manipulation, as the example relies solely on static markup.

KKumhee

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows how SVG shapes can be styled and composed using React, with circles and rectangles rendered in three variations. The code uses React 16.10 to create SVG elements directly in JSX, including circles with default black fills and rectangles, followed by colored versions using red and green fill attributes. A third group applies a transform translation to reposition a red circle and green rectangle together. The rendering approach relies on ReactDOM to mount the SVG component inside a 960x500 canvas, demonstrating basic vector shape placement and CSS-independent styling through SVG presentation attributes.

SScott

94% match