Skip to main content
SimilarExport ZIP
100%

shapes with svg and css

✓ Published0🌍 Public
JJokerhan88
Last edited Mar 8, 2020
Created on Mar 8, 2020
Forked from Hello VizHub

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a group—styled and transformed with CSS attributes like fill, stroke, and translate. It shows how static SVG elements can be composed and visually customized in a web page. The rendering uses raw SVG markup embedded in HTML, with external styles applied via a linked stylesheet. No JavaScript libraries drive the visualization; the included D3 import and message module remain unused in the final display.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

shapes with svg and css

This example demonstrates a collection of basic geometric shapes rendered with SVG and styled using CSS, including circles, a rectangle, a line, and a path. The shapes are organized within nested groups to apply transforms like scaling and translation, and CSS classes define strokes and fill colors. The code uses raw SVG elements (circle, rect, line, path) inside an inline `<svg>` tag, with styles defined in an external stylesheet. No JavaScript data source is present; the visualization relies entirely on static markup and CSS for its appearance.

DDominika Modzelewska
95% match
Loading thumbnail…

shapes with svg and css

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using both inline attributes and CSS classes. It shows the effect of explicit fill and stroke properties, group-level transformations like `translate` and `scale`, and cascading CSS rules that apply stroke width and color to line elements. The rendering uses raw SVG within an HTML page, with a linked stylesheet, and requires no external JavaScript libraries.

JJoora Song
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shape elements—circles, rectangles, lines, and paths—composed in a static graphic. The markup defines primitive shapes with attributes like position, size, and fill, while CSS classes apply stroke and line-join styling to grouped elements. The rendering relies entirely on SVG within the HTML, with a stylesheet controlling presentation details such as stroke width and color for specific groups. It serves as a basic introduction to combining inline SVG with external CSS for shape styling and layout.

Ccarbuncle-3djs
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS, with some shapes grouped and scaled or translated. It shows how SVG attributes like `fill`, `stroke`, and `stroke-width` control appearance, while CSS classes such as `.lines` apply shared styling. The static composition uses raw SVG elements directly in HTML, without any JavaScript libraries, and relies on inline attributes and an external stylesheet for rendering.

Ccheeson
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and paths—arranged in groups and transformed with scaling and translation. It shows how CSS classes control stroke properties, including color, width, and line joins, while inline attributes set fill colors and stroke widths for individual elements. The visualization uses raw SVG markup within an HTML page, styled by an external stylesheet, with no JavaScript libraries involved. The rendering approach is purely declarative, showing how SVG and CSS combine to create static geometric compositions.

Llchen83
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the fundamental shapes available in SVG, including circles, rectangles, lines, and paths, styled directly via CSS classes and inline attributes. Rendered inside an SVG element on an HTML page, the shapes are grouped using `<g>` elements that apply scaling and translation transforms. The CSS defines visual properties such as stroke color, stroke width, and line joins, with some groups inheriting fill and stroke from parent elements. The visualization makes no use of external JavaScript libraries, relying instead on static SVG markup and cascading styles.

PPenguin-jpg
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements inside an HTML page. The shapes are grouped and scaled using SVG transforms, with styles applied via CSS classes and attributes, including custom fill colors, strokes, and a rounded line join on the path. It shows how raw SVG markup combined with CSS can create a static composition without any JavaScript libraries. The rendering approach relies on the browser’s native SVG support, with the `.lines` class controlling stroke properties.

Hhanulik.ondrej@gmail.com
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example showcases basic SVG shapes—circles, rectangles, lines, and a path—within an SVG canvas, using CSS classes to style stroke, fill, and line join properties. It demonstrates how SVG elements can be grouped and transformed with scale and translate operations, while CSS controls visual attributes like colors and stroke widths. The rendering relies on raw SVG markup and CSS rules, with no JavaScript libraries involved.

Jjhpp114
93% match