Skip to main content
SimilarExport ZIP
100%

shapeswith SVG and css

✓ Published0🌍 Public
Sshatomouimena
Last edited Nov 4, 2021
Created on Nov 4, 2021
Forked from HTML Starter

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered on a 900×500 canvas with CSS styling applied via an external stylesheet. It shows how SVG elements can be grouped using `<g>` transformations like scaling and translation, with individual shapes colored through fill and stroke attributes alongside CSS-defined font and margin rules. The code uses plain SVG markup within an HTML page, linked to a `style.css` file, and relies on React as the framework for the surrounding project structure. Shapes appear in varied positions and colors, including a red circle, green rectangle, and stroked paths, illustrating fundamental SVG composition.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG amd CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed 960×500 canvas. The code uses raw SVG elements within an HTML page, with CSS in a separate stylesheet controlling presentation, such as red strokes for line groups and blue strokes for path elements. Grouping via the `<g>` tag applies shared transformations like scaling and translation, while CSS classes like `.lines` style these grouped elements. The rendering relies entirely on inline SVG markup and CSS rules, without any JavaScript interaction or data binding.

Ttgma99
95% match
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 how basic SVG shapes can be styled and grouped using CSS and SVG attributes. It shows circles, rectangles, a line, and a path rendered on an SVG canvas, with fills and strokes applied directly or inherited from a `<g>` group. The code uses React to render the SVG elements, with styles defined in an external CSS file, and showcases SVG transforms for positioning shapes without repeated coordinates.

Bbcwein
95% 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
95% 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
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to compose basic geometric shapes—circles, rectangles, lines, and paths—within an SVG canvas, styled with CSS. It shows shape grouping via nested `<g>` elements, transforms for scaling and translation, and both inline SVG attributes and CSS classes for controlling fill, stroke, and stroke-width. The code uses plain React rendering with SVG’s native elements, including a `<path>` with a `d` attribute for a custom line. A `styles.css` file applies stroke styling to grouped elements and defines a `.highlighted` class.

TThomas Seberechts
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using CSS and inline attributes. It shows basic geometric forms composed in a single SVG canvas, with properties like fill, stroke, stroke-width, and transform applied to individual elements or grouped via the `<g>` tag. The code uses plain React to render static JSX, relying on SVG’s native presentation attributes and a linked stylesheet for class-based styling, such as colored strokes on line groups. No data or interactivity is involved; the focus is purely on visual construction and CSS inheritance.

Ccledevoute
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged on a red background. It shows how SVG elements can be styled with inline attributes, grouped using the `<g>` element, and transformed with the `translate` attribute. The code uses plain React to render the SVG markup and relies on CSS for the page’s background color. It also illustrates applying stroke properties like `stroke-width` to grouped lines and paths, showcasing fundamental vector graphics composition without external libraries.

Mmagua
94% match