Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Jun 13, 2020

Created on Jun 13, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example displays two basic SVG shapes—a circle and a rectangle—positioned on a 960 by 500 canvas. The page uses plain SVG markup within an HTML file, styled by an external CSS stylesheet that resets the body margins and defines a `.highlighted` class (though not applied to the shapes). The rendering relies on native SVG elements like `<circle>` and `<rect>`, with no JavaScript or React interaction visible in the code.

PPrerna Mishra

94% 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

93% match

Loading thumbnail…

Shapes with SVG and CSS

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.

Aakshaypoojary

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a set of geometric shapes—two circles, two rectangles, and a line—arranged in an SVG canvas. The rectangles are grouped and styled with red strokes and a soft pink fill via CSS, while the circles use inline fill attributes. It demonstrates basic SVG rendering with React, using static markup without interactive behavior or data binding. The code relies on plain SVG elements (`circle`, `rect`, `line`) and CSS class selectors to apply visual properties, highlighting a minimal approach to shape composition.

TTeaMelab

93% match

Loading thumbnail…

Shapes in SVG and CSS

This example demonstrates basic SVG shape rendering using React-compatible HTML. It uses SVG elements like `circle`, `rect`, `line`, and `path` inside a static `svg` tag, with CSS applied via an external `styles.css` file that removes page margins. The code draws two red circles, a green rectangle, and a black line segment with a diagonal path, all positioned within a 960×500 viewport. It serves as a minimal introduction to composing SVG graphics without JavaScript interaction.

BBaraneedharan N M

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays two basic SVG shapes—a circle and a rectangle—on a fixed 960 by 500 canvas. The circle uses default styling, while the rectangle is explicitly filled with red. The code directly embeds SVG elements in HTML and applies a small external stylesheet to remove page margins and hide scrollbars. Rendering relies solely on native SVG markup within the browser, without any JavaScript libraries, and the stylesheet also defines a `.highlighted` class that is not used by the shapes.

Aargonaeut

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows basic geometric shapes rendered as SVG elements on an HTML page, with a few shapes styled using inline fill attributes and a CSS class that sets text color to red. The page displays two circles and two rectangles at fixed positions within a 960-by-500 SVG viewport, using plain SVG markup without any external libraries. The rendering approach is straightforward static SVG, with one circle and one rectangle using default black fills, while the remaining circle and rectangle use explicit red and green fill colors. The HTML links to a separate Styles.css file for global body styling, but the visual shapes rely entirely on SVG attributes.

Mmayurgadge58

93% 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