Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published0🌍 Public
Yyann-toullec
Last edited Oct 19, 2020
Created on Oct 19, 2020
Forked from HTML Starter

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.

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 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
96% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS and inline attributes. It shows how presentational properties like `fill`, `stroke`, and `stroke-width` can be set directly on SVG elements or inherited from a parent `<g>` group. The code uses plain React-rendered SVG without additional libraries, featuring a static composition of colored and outlined shapes. CSS resets the page margin and hides overflow, while styles are applied via an external stylesheet. The visualization highlights fundamental SVG syntax, including coordinate attributes and the `<path>` `d` command.

Aant999
96% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes—circles, lines, and a path—can be styled with CSS within a React-based HTML page. It shows the rendering of three filled circles, a group of unfilled strokes, and a polygonal path, using attributes like `fill`, `stroke`, and `stroke-width`. The code relies on vanilla SVG elements and CSS class selectors (`.lines`, `.lines path`) to apply visual properties, without any JavaScript libraries. The layout uses SVG `transform` scales and translations to position the shapes, illustrating a static, style-driven approach to vector graphics.

Rrvdv
96% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—within a React application. It shows how CSS classes can control stroke, fill, and line-join properties, while inline attributes and nested `<g>` elements apply transformations like scaling and translation. The code renders static shapes without data or interaction, using the SVG API directly in JSX to illustrate layering and styling techniques.

BBhavyatulasi
96% 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
96% 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 presentation attributes like `fill` and `stroke` can be set inline or via classes, and how transforms scale and translate groups of elements. The React-based code uses plain SVG markup in JSX, with a separate CSS file controlling stroke styles and line joins. The visualization is static, with no interaction or data binding, purely illustrating geometric primitives and styling mechanisms.

Ttanvirmahdad
96% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and paths—within a React-rendered HTML page. Using inline SVG elements, it applies CSS classes and presentation attributes to control fill colors, strokes, and transformations like scaling and translation, illustrating the interplay between SVG markup and CSS styling for static vector graphics.

RRicardo Tejerina
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and CSS classes. It shows how fill colors, stroke properties, and geometric transforms like scaling and translation affect the visual output. The code uses plain SVG elements within a React-less HTML page, with the styles.css file applying stroke width and line joins to the `.lines` group. Rendering is done entirely through the browser's native SVG support, with no additional JavaScript libraries.

Lloisasy
95% match