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 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.

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—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

95% match

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

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows two basic geometric shapes—a circle and a rectangle—drawn on an SVG canvas. The shapes are styled directly with SVG presentation attributes, including fill colors, pink outlines, and a stroke width of ten pixels. The visualization is implemented with a minimal HTML page that embeds SVG markup without any scripting or external libraries. All rendering is handled by the browser’s native SVG support, with no JavaScript or CSS rules applied beyond the inline attributes.

NNJANGHU

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates two fundamental SVG shapes—a circle and a rectangle—styled purely with CSS. The SVG canvas is fixed at 1000 by 600 pixels, with the circle positioned at (60,60) and the rectangle at (150,10). The stylesheet applies a maroon fill to the circle and gray to the rectangle, while the body margin is reset to zero and overflow hidden. The implementation uses raw SVG elements directly in HTML, with CSS selectors targeting the `<circle>` and `<rect>` tags for styling.

RRaghavKakkar

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows how to create basic geometric shapes—circles and rectangles—using SVG elements styled with CSS. The code defines two identical groups of shapes, each translated vertically using SVG’s `transform` attribute, rendering blue circles and green rectangles on a 960×500 canvas. It uses plain SVG markup within an HTML page, with CSS (via `styles.css`) controlling the page layout and margins, while no JavaScript or external library is required. The rendering approach relies entirely on static SVG and CSS, demonstrating fundamental vector graphics in a bare-bones React-free setup.

AAbhinav Arun

93% match

Loading thumbnail…

Shapes with CSS & SVG

This example shows two geometric shapes drawn on an SVG canvas: a red circle with a black stroke and a green rectangle with a blue stroke. The HTML page uses inline SVG elements (`<circle>` and `<rect>`) to render the shapes, with CSS properties for fill and stroke applied directly as SVG presentation attributes. The code uses the native SVG API within a plain HTML document, requiring no external libraries, and demonstrates basic vector shape creation with explicit coordinate and dimension attributes.

Cclass-sikh

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a simple SVG scene with two overlapping circles and a rectangle, rendered directly inside an HTML page. It uses React’s JSX syntax to declare the SVG elements (`<circle>`, `<rect>`) and CSS to reset the body’s margin and hide overflow. The shapes are styled entirely through SVG attributes and the page relies on a basic `index.html` and `styles.css` structure, demonstrating how static vector graphics can be composed without external charting libraries or data sources.

Vvarone26

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes—a circle, rectangle, line, and path—using raw SVG elements within a React project. It shows how CSS classes can style SVG elements, as seen with the `.lines` class applying stroke attributes to lines and paths. The code uses inline SVG attributes for positioning and transform, alongside external CSS to control visual properties like stroke color, width, and line joins. The rendering approach relies solely on SVG, with no additional JavaScript libraries beyond the base React setup.

PPrerna Mishra

93% match