Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Jan 16, 2020

Created on Jan 16, 2020

This example uses SVG and CSS to draw a geometric composition of overlapping circles and rectangles. The shapes are rendered in two groups: one with translucency and default styling, and a second with black outlines and thicker strokes, demonstrating CSS class-based styling for lines and paths. The code uses raw SVG elements like `rect`, `circle`, `line`, and `path` within a React render, with transforms for scaling and positioning, and a stylesheet defining stroke colors and widths.

AI-generated description

React Starter code. Hi

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create a static composition of circles, rectangles, lines, and a path. The view shows basic geometric primitives arranged in groups, with some shapes using default black fills and others explicitly colored via the `fill` attribute or CSS classes. The code uses React to render an SVG container with a scaling transform, while a CSS class named `.lines` applies stroke properties to the line and path elements, including a rounded line join. The visualization relies on native SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, with no external data source.

Ssimon0863

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes rendered through React, showcasing circles, rectangles, lines, and paths with varied fill, stroke, and grouping. The code uses raw SVG elements and CSS classes, such as `.lines` and `.lines path`, to apply styling like stroke width and line joins. A CSS rule sets the body margin to zero and hides overflow, while the SVG is scaled with a transform. The example highlights how SVG structure and external CSS work together to control visual properties without additional libraries.

TTravy Trav

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example showcases basic geometric shapes drawn with SVG and styled using CSS, including circles, rectangles, lines, and a path. The shapes demonstrate grouping and transformation via SVG `<g>` elements, with one group applying translation and fill overrides, while another uses CSS classes for stroke styling. The code uses raw SVG markup within JSX, scaled by a transform, and relies on CSS for stroke properties and line joins. No external libraries are used; it is a pure React rendering of SVG primitives.

Sscotti15

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 CSS and SVG

This example demonstrates how CSS and SVG can be used together to create and style basic geometric shapes, including circles, rectangles, lines, and paths, within a scalable vector graphic. The SVG elements are organized using transforms for scaling and translation, while CSS classes apply stroke and fill properties, showcasing the interplay between presentation and structure. The example is built with React and renders purely through SVG markup.

Ffedericojv

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

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and external CSS rules. The code uses raw SVG elements within an HTML page, with a React starter context, and applies CSS selectors like `.lines` and `.lines path` to control stroke color, width, and line joins. A grouping element with translate and fill/stroke attributes shows inherited styling, while a scale transform enlarges the entire visualization. The rendering relies entirely on SVG markup and CSS, with no data or JavaScript logic involved.

JJordan Chiu

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a variety of SVG shapes—circles, rectangles, lines, and paths—styled with CSS and grouped using SVG transforms. It shows how presentation attributes like fill and stroke can be overridden by CSS rules, such as the `.lines` class applying stroke width and color. The visualization uses raw SVG elements within a React-compatible HTML page, with a scale transform applied to enlarge the content. No data is involved; the focus is purely on SVG syntax and cascading style behavior.

Ggilbster

94% match