Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published0🌍 Public
KKumhee
Last edited Sep 12, 2020
Created on Sep 12, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

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 how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using both inline SVG attributes and an external CSS stylesheet. It shows how presentational properties like fill, stroke, and stroke-width can be set directly on elements or inherited from parent `<g>` groups and CSS classes. The visualization uses React to render the SVG elements within an HTML page, with the `.lines` class applying green strokes and rounded line joins to paths, while a group transform scales and translates the shapes.

Jjcksnm
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS. It shows how SVG elements inherit presentation attributes like fill and stroke from parent `<g>` groups, and how CSS classes can override those defaults, as seen with the `.lines` class applying green strokes to the path. The code uses raw SVG markup within React, with explicit positioning and transform attributes to arrange the shapes.

BBhavyatulasi
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows basic SVG shapes—circles, rectangles, lines, and paths—styled with both inline attributes and CSS classes. Using React, the markup renders in an SVG element with inherited fill, stroke, and stroke-width properties for grouped shapes. The `lines` class in an external stylesheet applies black strokes, while a path overrides this with red and a round line join. Scaling and translation transforms position the shapes within a 960×500 viewport.

AAaron Guillen
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled using CSS. It shows how SVG elements can inherit styling from parent `<g>` groups and how CSS classes like `.lines` apply stroke properties. The code uses raw SVG markup with React as the rendering framework, featuring inline `fill` and `stroke` attributes alongside CSS rules. A transform group scales and translates the shapes, while a path with `stroke-linejoin: round` illustrates geometric line styling. The visualization highlights the interplay between SVG presentation attributes and external stylesheet rules.

Rratschke
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
95% 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 SVG elements within a simple HTML page. It shows how CSS classes control stroke styling, while SVG attributes like `fill` and `stroke-width` set individual shape colors directly. The visualization also uses `<g>` groups to apply shared styling and transformations, such as translating shapes and applying a uniform fill and stroke. The code relies on standard SVG APIs and CSS, with no external JavaScript libraries beyond React for rendering.

Yyann-toullec
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the basic drawing of primitive SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed layout on a 960×500 canvas. It shows how SVG styling is applied in several ways: directly with inline `fill` and `stroke` attributes, through inherited properties on a `<g>` group, and via CSS rules defined in an external `styles.css` file. The React-based code uses raw SVG elements within an HTML page, leveraging group transforms for scaling and translation.

Aavglim3
95% match