Skip to main content
SimilarExport ZIP
100%

SVG shapes

✓ Published1🌍 Public
CChinzorigt Ganbat
Last edited Sep 17, 2020
Created on Sep 17, 2020
Forked from HTML Starter

This example demonstrates basic SVG shape rendering in a React visualization, showing circles, rectangles, lines, and a path. The shapes appear in three groups, with the first two displaying default and explicit fill colors, while the third uses a combined fill and stroke style. The line and path elements use a CSS class to apply black strokes with rounded joins. The SVG is scaled by 1.5 and uses inline transformation attributes like `translate` to position groups, with rendering handled directly through SVG markup rather than a charting library.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered directly in a React component. It uses plain SVG elements with attributes for positioning, sizing, and styling, including stroke widths, fills, and a group transform. A second group applies a cyan fill and black stroke to selected shapes, while a path uses round line joins. The code relies on React’s JSX to embed SVG markup, with styles from an external stylesheet. No data source is used; the visualization solely shows static geometric primitives.

Kkierra
93% match
Loading thumbnail…

SVG Shapes

This example demonstrates basic SVG shapes—circles, rectangles, and lines—rendered directly in a React application using plain SVG markup. The code creates a static composition with various colored fills, strokes, and a grouped transformation that offsets and recolors shapes. It also includes minimal CSS styling for the page layout and a highlighted text class. The visualization uses no external libraries, relying solely on the built-in SVG elements and attributes defined in the HTML file, making it a simple illustration of declarative vector graphics.

HHeath Wilkinson
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes rendered within a React application, using inline SVG elements styled with CSS. The code displays circles, rectangles, and lines with varying fills, strokes, and transformations, including a group translated along the Y-axis. A path element with a pink stroke is also included, while CSS classes control the styling of grouped line elements. The visualization is built with React and uses raw SVG syntax (circle, rect, line, path) within an HTML page, with Dart styling applied via an external stylesheet.

MMayaJava
92% match
Loading thumbnail…

Shapes with SVG

This example showcases a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged and transformed to illustrate foundational vector graphics concepts. The visualization demonstrates how a single SVG canvas can compose primitive elements, use grouping to apply consistent styling and translations, and employ transforms like scaling and translation to position and resize shapes. The code uses raw SVG markup within a React framework, with styling handled by an external CSS file that defines a class for the line group and modifies stroke attributes on the path. This serves as a minimal demonstration of rendering structured vector graphics directly in a web browser.

EEllednera
92% match
Loading thumbnail…

Shapes with SVG

This example demonstrates how to draw basic SVG shapes—circle, rectangle, line, and path—directly in a React-based HTML page. It shows how the `<g>` element groups shapes with shared transform and fill attributes, while CSS classes apply stroke styling to the line and path elements. The visualization relies solely on native SVG markup within the browser, rendered at a fixed 1000x1000 viewport, with no external charting library involved.

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

Shapes with SVG & CSS

This example demonstrates how to create and style basic geometric shapes using SVG elements within a React-based visualization. It shows circles, rectangles, lines, and paths arranged in groups, with CSS classes controlling stroke properties and colors. The code uses raw SVG tags like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with transform attributes for scaling and translation. A linked stylesheet applies visual styling, including stroke width, line joins, and fill colors, while the SVG viewport is set to 960 by 500 pixels.

WWin
91% match
Loading thumbnail…

Shapes with SVG

This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and paths—using SVG markup within a React-like HTML structure. The shapes are defined directly in the SVG element, with some styled via CSS classes and inline attributes to show color, stroke, and scaling. The code uses the SVG `<g>` element to group shapes and apply transformations like `scale()` and `translate()`, along with CSS properties such as `stroke` and `stroke-width` for line styling. The visualization renders client-side entirely through SVG, with no external data sources or libraries beyond the standard SVG API.

KKaleb LaBarrie
91% match