Skip to main content
SimilarExport ZIP
100%

Otra formas

✓ Published0🌍 Public
DDavid
Last edited Mar 22, 2021
Created on Mar 22, 2021
Forked from Face II

This example shows five distinct SVG shapes—a square, a rounded square, a line, a polyline, and a polygon—each rendered in its own small viewport using React components. The shapes are drawn with simple SVG elements like `rect`, `line`, and `polyline`, styled with fills and strokes. The code uses React 16 and D3 v6 for the overall structure, though no D3-specific visualization APIs are applied. All shapes are generated statically with fixed dimensions, displaying basic geometric forms without interaction or data binding.

AI-generated description

React Starter code.

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

Shapes with SVG

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and paths—drawn directly within an SVG element, using React 16.10 to render the page structure. The code shows how the `g` group element groups shapes for collective styling and transformation, while CSS classes like `.lines` apply stroke properties to line and path elements. It illustrates static vector rendering with inline SVG attributes, including coordinate positioning, fills, strokes, and the `d` path syntax.

EEmily Xie
85% 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
85% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled and animated with CSS within a React application. It renders a collection of geometric figures—including circles, rectangles, and polygons—using inline SVG elements, while CSS properties control their fill colors, stroke styles, and transitions. The code relies on React’s JSX syntax to define the SVG structure and applies CSS classes for visual effects, showcasing the seamless integration of declarative markup and styling. No external data source is used; the shapes are hard-coded in the component.

Aaurelio-david
84% 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
84% match
Loading thumbnail…

Shapes

This example displays a collection of simple SVG shapes in a React application, including circles and rectangles positioned on a 1000x1000 canvas with varied colors like green, yellow, brown, red, blue, and pink. The code directly uses the SVG API through JSX elements such as `<circle>`, `<rect>`, and `<g>` for grouping and translation transforms. It demonstrates basic static rendering of geometric primitives without any data bindings or interactions, illustrating how SVG markup is embedded within an HTML page styled with the `shape` class.

Kkaviya-ds
84% match