Shapes with svg and css

100%

Shapes with svg and css

✓ Published0🌍 Public

Last edited Jul 10, 2019

Created on Jul 10, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered with SVG, including two circles and a red rectangle. The circles are grouped using an SVG `<g>` transform to shift them horizontally, while the rectangle is positioned independently. Styling is handled through an external CSS file, which sets the page margin to zero and hides overflow. The visualization uses raw SVG elements within an HTML document, with a green color class defined for potential highlighting, though no dynamic behavior is shown.

Uuskh580e

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, with styling and grouping controlled through CSS and SVG attributes. It shows two circles and two rectangles, using explicit fill colors on some shapes and applying a blue fill to a grouped set of shapes via the SVG `<g>` element’s transform and fill attributes. The code uses raw SVG markup within an HTML document, linking to an external stylesheet that sets the body margin and overflow. No JavaScript libraries are involved; the rendering relies entirely on native SVG and CSS.

TTiff

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles and rectangles—styled directly with CSS and inline attributes. It shows how shape properties like position, size, fill color, stroke, and grouping via the `<g>` element affect rendering. The visualization uses raw SVG markup within an HTML page, with external styling from `styles.css`. A grouped set of shapes applies a shared fill color and stroke, while individual shapes use explicit `fill` values such as red and hex codes. No JavaScript libraries are involved; rendering is purely declarative SVG.

EEvan Chang

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling. It shows circles and rectangles positioned directly on an SVG canvas, with colors applied through presentation attributes like `fill="red"` and inline styles, as well as a `<g>` group that applies a shared `fill="blue"` to multiple shapes. The code uses native SVG elements (`circle`, `rect`, `g`) with a `transform` attribute for translation, plus an external stylesheet for global page styling. No data source or dynamic behavior is present; all shapes are static and defined directly in the HTML markup.

Ppcbt1125

92% match

Loading thumbnail…

Shapes With SVG

This example demonstrates basic SVG shape rendering using static circle and rectangle elements defined directly in the HTML markup. It shows how coordinates, dimensions, and fill colors control each shape’s appearance, with a grouping element (`<g>`) applying a shared blue fill and vertical translation to a second row of shapes. The scene uses plain SVG attributes without external libraries, paired with a minimal CSS file that resets margins and hides overflow for a clean full-viewport canvas.

Ssalvar2134

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

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, and a line—styled and arranged through inline attributes and CSS. It shows how SVG groups (`<g>`) can apply shared fill colors, strokes, and transforms to multiple shapes at once, while individual elements can override those inherited styles. The code uses raw SVG markup within an HTML document, with no external JavaScript libraries, and relies on a linked stylesheet for overall page typography and layout. The rendering approach is purely static SVG, with all positioning and styling declared directly in the markup.

Rross-fisher

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, and lines—stylized through both inline attributes and external CSS rules. The shapes are rendered with SVG elements within a 960×500 canvas, using explicit fill colors, stroke widths, and a transform scale applied to the entire group. A secondary group applies CSS classes to define stroke and path styling, while inline attributes handle direct color assignments. The code loads via standard HTML and links to a separate stylesheet, showcasing how SVG and CSS interact for visual customization.

JJordan Arnold

91% match