Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
Aakshaypoojary
Last edited Jun 8, 2020
Created on Jun 8, 2020
Forked from Hello VizHub

A React-based visualization renders two hardcoded SVG shapes—a red circle and a green rectangle—on a 960-by-500 canvas. The example demonstrates fundamental SVG elements (`<circle>`, `<rect>`) styled via an external CSS stylesheet, which resets body margins and hides overflow. Using raw JSX markup within the HTML structure, it shows how React integrates declarative SVG rendering directly in the component tree, with no data binding or interactive behavior beyond the static visual output. The styling is applied through classless selectors, emphasizing layout and presentation basics.

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 shape rendering within a React-based visualization gallery. It displays a red circle and a rectangle on a 960 by 500 canvas, using plain SVG elements defined directly in the HTML. The styles.css file applies a global reset and adds a `.highlighted` class that turns text red, though the shapes themselves use default styling. The implementation relies on core SVG APIs (`circle` and `rect`) rather than higher-level libraries like d3, showcasing minimal markup for static geometric figures.

PPrerna Mishra
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows how SVG shapes can be styled and composed using React, with circles and rectangles rendered in three variations. The code uses React 16.10 to create SVG elements directly in JSX, including circles with default black fills and rectangles, followed by colored versions using red and green fill attributes. A third group applies a transform translation to reposition a red circle and green rectangle together. The rendering approach relies on ReactDOM to mount the SVG component inside a 960x500 canvas, demonstrating basic vector shape placement and CSS-independent styling through SVG presentation attributes.

SScott
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows basic geometric shapes rendered as Scalable Vector Graphics, demonstrating how CSS can style an SVG document. A red circle and a green rectangle are placed directly in the SVG markup, while the `style.css` file resets the page margin and hides overflow. The implementation uses plain HTML elements and SVG tags, with no JavaScript libraries or data sources, relying on the browser’s native SVG rendering to display the static composition.

Aakshaypoojary
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shape rendering within a React-based visualization gallery. It shows circles, rectangles, lines, and paths positioned on a 960×500 canvas, with styling controlled through both inline attributes and CSS. The code uses raw SVG elements and CSS for presentation, including a group (`<g>`) that applies shared fill and stroke properties, and another group with stroke attributes for the line and path. No data is loaded; the shapes are statically defined in the HTML markup.

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

Shapes with SVG and CSS

A simple React-free SVG scene renders two shapes: a red circle and a black line, positioned against a blank canvas. The circle uses a static `cx`, `cy` (with a typo in the value), and `r`, while the line is drawn with explicit `x1`, `y1`, `x2`, and `stroke-width`. Styling is minimal, with CSS resetting the body margin and hiding overflow. This example demonstrates basic SVG element construction and inline CSS presentation without JavaScript or data binding.

GGustavo Maciel
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows how SVG shapes and CSS styling can be combined in a React visualization, with a simple page that logs to the console on load. The code uses plain HTML, CSS, and JavaScript—no external libraries—to render an empty body, while the stylesheet defines a monospace font and a `.highlighted` class for red text. The rendering approach relies on static markup and CSS rules rather than dynamic data or SVG elements. The example serves as a minimal starter for building interactive graphics.

Ssrhodes
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows how SVG shapes and CSS styling can be combined in a React visualization, with a simple page that logs to the console on load. The code uses plain HTML, CSS, and JavaScript—no external libraries—to render an empty body, while the stylesheet defines a monospace font and a `.highlighted` class for red text. The rendering approach relies on static markup and CSS rules rather than dynamic data or SVG elements. The example serves as a minimal starter for building interactive graphics.

Ssrhodes
92% match