Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published1🌍 Public
Sshubhampawar0151
Last edited Oct 11, 2020
Created on Oct 11, 2020

A set of basic SVG shapes—two circles and two rectangles—are displayed on a 960 by 500 canvas. The first pair uses default black fills, while the second pair is explicitly colored red and blue, demonstrating inline presentation attributes. A `<g>` group element then translates all shapes down by 100 pixels, applying a brown fill and black stroke with a 5-pixel width to both shapes simultaneously. The example showcases fundamental SVG structure with CSS for page margins, and relies on the SVG API for all drawing and grouping operations.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—styled through both inline presentation attributes and an external CSS stylesheet. The graphic shows a progression from default black shapes to explicitly colored fill and stroke properties, then to grouped elements that inherit common styling like a brown fill with a black outline. A separate group applies stroke styling to line and path elements via CSS class selectors, including a custom stroke-linejoin. The page uses an HTML5 structure with a fixed-width SVG canvas, while the CSS file manages global layout and overrides shape appearance based on class and element type.

Sshubhampawar0151
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how basic SVG shapes can be positioned and rendered on a web page using a minimal setup. It shows two circles placed at different coordinates within a 960×500 SVG canvas, with the page styled through a linked CSS stylesheet that removes margins and hides overflow. The code relies on native SVG elements (`circle`) and standard CSS properties (`body`, `margin`, `overflow`) to control layout. No JavaScript libraries are used; the rendering is purely declarative SVG markup embedded directly in the HTML document.

Sshubhampawar0151
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic SVG shapes—circles and rectangles—positioned on a 960 by 500 canvas, with individual elements styled directly via fill attributes or grouped within a `<g>` element to apply shared styling. The HTML markup uses standard SVG tags like `<circle>`, `<rect>`, and `<g>` with a transform for translation, while a linked stylesheet defines global body margins and a `.highlighted` class. Shapes appear in their default black unless explicitly colored red, green, or blue, demonstrating how SVG attributes and CSS rules combine for static vector rendering without JavaScript interaction.

Mmkdeeps01
90% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays basic SVG shapes—a circle, rectangle, line, and path—arranged in two groups on a 960×500 canvas. The shapes are rendered with inline SVG markup, while CSS styles the line group with a black stroke and the path with a red, round-joined stroke. A `<g>` element with a `fill="blue"` attribute applies color to the circle and rectangle, and the overall graphic is transformed using SVG `translate` and `scale` operations. No JavaScript libraries are used; the visualization relies entirely on static HTML, SVG, and CSS.

VVeena Muralidharan
90% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows how basic SVG shapes—circles and rectangles—are styled with inline fill colors and CSS. It displays four shapes on a 960×500 canvas: two circles and two rectangles, with the latter pair using red and green fills, while the former remain black. The code uses plain SVG elements like `circle` and `rect` within an HTML page, and a linked `styles.css` that sets the body margin to zero and hides overflow. The rendering approach relies on SVG’s native shape support and CSS for page-level layout.

RRuwen
90% match
Loading thumbnail…

Shapes with svg and css

This example demonstrates basic SVG shapes—a circle and a rectangle—styled with CSS and rendered in a fixed 960 by 500 viewport. The shapes appear twice: first as a standalone circle and rect, then grouped together inside an SVG `<g>` element with a green stroke applied to the group. The second set uses inline attributes like `fill="red"` and `fill="#719bde"`, while the CSS file sets global margins and hides overflow. The code uses raw SVG elements (`<circle>`, `<rect>`, `<g>`) with no JavaScript libraries or data binding.

HHarshit Birla
89% match
Loading thumbnail…

Shapes with SVG and CSS

A small SVG canvas displays primitive shapes—circles, rectangles, a line, and a path—arranged in groups. The first two shapes use default black styling, while the next pair applies explicit fill colors (red and a green RGB value). A translated group demonstrates inherited fill and stroke attributes, and a classed group with thick black strokes contains a light-blue path with rounded line joins. The example shows how SVG presentation attributes and CSS rules (via the `.lines` class and element selectors) control appearance, with an SVG transform scaling the entire composition.

LLM2020
89% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

SVG shapes demonstrate inline presentation attributes and CSS styling within a single visualization. Circles and rectangles display default black fills, explicit red and green fills, and a group-level fill with individual stroke overrides. Line and path elements use CSS classes to apply stroke color, width, and rounded line joins and caps. The SVG is scaled with a transform and rendered directly in HTML without additional libraries.

Ssakhabutdinov
89% match