newviz

100%

✓ Published1🌍 Public

Last edited Mar 8, 2023

Created on Mar 8, 2023

Forked from Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes arranged in groups with varied styling, including a red circle, a green rectangle, and a semi-transparent shape with a black stroke. The visualization also incorporates lines and a polyline path, both styled with thick strokes and rounded joins. It uses raw SVG elements like `circle`, `rect`, `line`, and `path` within transformed `<g>` groups, with CSS classes controlling stroke properties. The rendering is static, produced entirely in an inline SVG, with no external libraries or data inputs.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

A minimalist SVG showcase of basic geometric shapes, including circles, rectangles, lines, and a polyline path, demonstrates how SVG elements can be styled and grouped. The graphic uses nested `<g>` elements with transformations and explicit CSS classes to apply stroke, fill, and stroke-width properties. The first group scales the entire drawing by 1.25, while a second translated group adds blue fills with black outlines. The `.lines` class in the accompanying stylesheet defines black strokes for all contained elements, with the path specifically overridden to red and rounded line joins. This example illustrates fundamental SVG composition and CSS styling patterns without external libraries.

PPabloReyesBetanzo

81% match

Loading thumbnail…

Test Viz

This example displays a static composition of basic SVG shapes on a 960 by 500 canvas, including two colored circles, a yellow border rectangle, two diagonal navy lines, and a black polyline path. The SVG markup is embedded directly in the HTML page alongside CSS styling. The rendering relies on raw SVG elements such as `circle`, `rect`, `line`, and `path`, without using any JavaScript libraries or data sources. The presentation is purely declarative, demonstrating how each shape’s geometry and stroke attributes are defined inline.

Ggutkem

81% match

Loading thumbnail…

Dataviz 2018 - 1. SVG Basic Elements - Ep3

This example showcases basic SVG shapes—a circle, rectangle, line, and path—arranged with geometric transformations. It demonstrates how the `transform` attribute’s `scale` and `translate` functions reposition and resize the grouped elements. The code uses raw SVG markup directly in the HTML, styled with CSS selectors like `.lines path` to apply green strokes and rounded line joins. A red-filled circle and a green rectangle appear under a scaled group, while a translated group uses a cyan fill with a black stroke. The path is drawn using the `M` (move-to) and `L` (line-to) commands.

MMinwoo Pak

80% match

Loading thumbnail…

Hello VizHub

This example renders a static SVG canvas containing basic geometric shapes—a red circle with a blue outline and a red square with an orange outline—alongside a grouped set of shapes transformed via the SVG `translate` attribute. The code uses D3.js v5, loaded from a CDN, and demonstrates direct SVG element construction within an HTML file. Styling is handled through an external CSS file that imports the Ubuntu font and sets a dark background. The visualization does not rely on data binding or interactive features, focusing instead on primitive shape composition and graphical styling.

Aasimplesinger

80% match

Loading thumbnail…

Hello VizHub

A hand-coded SVG composition demonstrates basic geometric shapes, paths, and styling without external libraries. The code arranges circles and rectangles in nested groups, applies a blue stroke via a CSS class to lines and paths, and uses a semi-transparent red fill for the path. All rendering is done directly through SVG elements and attributes, with CSS controlling presentation.

Vvladvaculin

80% match

Loading thumbnail…

Shapes with SVG new

This example demonstrates how to draw basic geometric shapes and lines using raw SVG elements in VizHub. It shows circles, rectangles, and a line with a path that are positioned on a 960x500 canvas. The code uses native SVG tags including circle, rect, line, path, and g, with inline attributes for styling and transforms to group shapes. The CSS file applies stroke colors and widths to the line elements while hiding page overflow.

Mmirna981

79% match

Loading thumbnail…

ANKITA

This example demonstrates nested groups of colored circles and rectangles, overlaid with black and red path and line elements, all rendered as static SVG shapes. The visualization uses raw SVG primitives—`circle`, `rect`, `line`, and `path`—with explicit `fill` and `stroke` attributes, and applies scaling and translation transforms to position elements. Styling is handled via CSS classes for color and stroke properties, while the layout is a simple list with an inline SVG canvas. No dynamic data or interaction is present.

Rrix007

79% match

Loading thumbnail…

vizhub_svg_basics

This example demonstrates the fundamental building blocks of SVG graphics, showing how basic shapes like circles, rectangles, and lines are rendered directly in an HTML page. The visualization uses inline SVG within an `index.html` file, illustrating both simple geometric elements and more complex paths constructed using SVG path commands. The code highlights CSS styling properties such as fill colors, stroke widths, and stroke colors, while the paths demonstrate both absolute coordinates (capital letters) and relative coordinates (lowercase letters) alongside various curve commands like cubic Bézier (C), elliptical arcs (A), and quadratic Bézier (Q). The example serves as a hands-on tutorial for creating vector graphics without external libraries.

Wwasti

79% match