SVG

100%

✓ Published0🌍 Public

Last edited Jul 30, 2019

Created on Jul 30, 2019

Forked from SVG

This example shows basic SVG shapes—circles, rectangles, lines, and a path—arranged in a static composition with varied fill colors and stroke styles. The code uses plain Scalable Vector Graphics (SVG) elements directly in the HTML, including a `<g>` group with `transform` attributes for scaling and translation. A CSS class named `.lines` applies black strokes and rounded line joins to the path, demonstrating how styles can style SVG geometry. No JavaScript libraries are used, and no data is loaded; the rendering relies solely on static markup and CSS.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG

A set of basic SVG shapes—circles, rectangles, lines, and a path—demonstrates vector rendering with inline styling and CSS classes. The example defines a `<g>` scale transform and nested groups to position shapes, using SVG presentation attributes like `fill`, `stroke`, and `stroke-width`. A CSS rule styles the `.lines` group and its path child. This simple gallery piece shows how SVG primitives combine with transforms and cascading styles without any JavaScript libraries.

DDD

91% match

Loading thumbnail…

SVG and CSS Shapes

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grouped composition. It shows how CSS classes style SVG elements, applying stroke and fill properties to specific groups. The visualization uses D3.js imports (`select` from D3) to set text content, though the primary rendering is static SVG markup. The code also illustrates nested `<g>` transforms, scaling the entire scene, and using CSS rules like `.lines path` to override stroke colors and line joins.

JJSR2000

91% match

Loading thumbnail…

SVG with CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in groups and transformed by scaling and translation. It shows how shape styling is applied directly via SVG attributes like `fill` and `stroke`, and how CSS classes from an external stylesheet selectively override properties: the `.lines` class sets stroke color and width, while `.lines path` overrides the stroke with a custom color and rounded joins. The rendering uses native SVG elements within an HTML page.

Ii211367

90% match

Loading thumbnail…

SVG

This example demonstrates a collection of basic SVG shapes, including circles, rectangles, lines, and a path, arranged in a scaled and translated coordinate system. The code uses raw SVG elements within an HTML document, applying CSS classes to style the line and path elements with black and green strokes. A white-filled group with black outlines is layered over earlier shapes to show overlap and composition. The visualization shows how SVG coordinates and grouping transforms can be combined to build simple geometric compositions without any external JavaScript libraries.

JJasonXu1244

89% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered directly in HTML without external data. The code defines SVG elements inline within the index.html file, while a separate styles.css applies styling classes (e.g., `.lines`) to control stroke color, width, and line joins. Grouping with `<g>` and transforms like `translate` and `scale` organize the composition, and fill colors are set both via SVG attributes and CSS. The visualization relies solely on SVG and CSS features, not JavaScript libraries.

Jjunge870214

89% match

Loading thumbnail…

SVG With HTML

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in groups with inline and CSS styling. It shows how SVG elements can be transformed using `scale` and `translate` attributes, and how CSS classes like `.lines` control stroke appearance and line joins. The code uses raw SVG markup with no external libraries, alongside a minimal HTML page and a console script that logs a message. The rendering approach relies entirely on SVG’s native coordinate system and styling properties.

Aalobry

89% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and positioned using inline attributes and CSS classes. The code uses raw SVG elements within an HTML document, applying transformations via the `transform` attribute and custom styling through an external stylesheet. A `g` element with the class `lines` overrides default stroke settings, while the CSS file defines properties like stroke width and color for both `line` and `path` elements. The visualization showcases basic vector graphics rendering without any JavaScript or external libraries.

Kkestefon

89% match

Loading thumbnail…

Shapes with SVG

This example shows basic SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed composition with varied fill colors and stroke styles. It demonstrates how raw SVG markup, without any JavaScript libraries, can create static vector graphics. The code uses core SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with grouping via `<g>` and transform attributes for scaling and translation. CSS classes style the lines and paths, while inline attributes control fill and stroke properties for the other shapes.

Eestregan

89% match