Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published0🌍 Public
Lloisasy
Last edited Jan 20, 2020
Created on Jan 20, 2020
Forked from HTML Starter

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.

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

Shapes with SVG and CSS

This example showcases basic SVG shapes—circles, rectangles, lines, and paths—arranged in a grid and styled with both inline attributes and an external CSS stylesheet. The SVG is rendered directly in HTML, with a `scale` transform applied to the root group and a `translate` transform shifting a row of shapes. CSS classes like `.lines` set stroke properties, while inline `fill` and `stroke` attributes define colors, demonstrating the interplay between SVG presentation attributes and CSS styling within a React-free, bare-HTML page.

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

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements and styled with CSS rules. It shows how SVG markup can be combined with CSS classes, such as `.lines`, to apply stroke properties like color and width, while inline attributes control fill and transform behaviors, including scaling and translation. The code uses raw HTML, CSS, and JavaScript within a React starter template, with no external visualization libraries.

SShokoLocoMocco
96% match
Loading thumbnail…

Shapes with SVG and CSS

This example showcases basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS. It demonstrates how SVG elements inherit presentation attributes like fill, stroke, and stroke-width from parent groups, using both inline attributes and CSS class selectors (`.lines`). The code uses raw SVG within an HTML page, with JavaScript and CSS linked externally, to illustrate styling and transformation effects like scaling and translation. The shapes are rendered directly in the browser without any external data.

Aadbirch
96% match