Shapes with SVG

100%

Shapes with SVG

✓ Published2🌍 Public

Last edited Dec 3, 2020

Created on Dec 2, 2020

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and paths—rendered on a 960-by-500 canvas. The composition uses a scaling transformation and a group with translation, fill, and stroke settings to show how attributes like fill, stroke-width, and stroke-linejoin alter appearance. The shapes are created directly in the markup with coordinates and styling, and the page is styled using a minimal CSS file, all within a React starter project.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the basic drawing of primitive SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed layout on a 960×500 canvas. It shows how SVG styling is applied in several ways: directly with inline `fill` and `stroke` attributes, through inherited properties on a `<g>` group, and via CSS rules defined in an external `styles.css` file. The React-based code uses raw SVG elements within an HTML page, leveraging group transforms for scaling and translation.

Aavglim3

95% match

Loading thumbnail…

Shapes with svg and CSS

This example demonstrates the basic building blocks of SVG shapes—circles, rectangles, lines, and paths—styled through CSS. It shows how a group element can apply shared fill and stroke properties, while a separate class targets line and path elements for custom stroke width and color. The code uses plain HTML, CSS, and JavaScript within a React framework, rendering via SVG. The shapes are manually positioned with fixed coordinates on a 960 by 500 canvas, with no external data source.

Vvoid-LSTM

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

94% match

Loading thumbnail…

Shapes with SVG

This example demonstrates fundamental SVG shapes—a circle, rectangle, line, and path—arranged in a 960-by-500 coordinate space. The graphics are defined directly in the HTML markup using SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`. One group applies a translation transform while another adds stroke styling, showing how SVG attributes control appearance and positioning. The page is styled with a minimal CSS file that resets the body margins and hides overflow.

Ppriyanshi0799

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG, including circles, rectangles, lines, and a path, styled through CSS classes. The shapes are organized using SVG’s transform attribute for scaling and translation, while the CSS defines stroke properties and line joins for the line and path elements. The code uses raw SVG markup within an HTML page, with styles applied via a linked stylesheet. Shapes are positioned across a 960×500 canvas, with some elements inheriting fill colors from parent groups and others specifying fill attributes directly.

Ii202081

94% match

Loading thumbnail…

Shapes with SVG and CSS

Ii202081

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

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling in a React starter. It shows circles and rectangles positioned and scaled within an SVG canvas, with fills applied via presentation attributes and external stylesheets. A group of line and path elements uses a CSS class to set stroke properties, including a round line join. The code relies on raw SVG elements and CSS selectors rather than a plotting library, with the styling cascade visible from global rules to class-specific overrides.

Sslipperyd

94% match