Just test

100%

✓ Published0🌍 Public

Last edited Oct 1, 2020

Created on Oct 1, 2020

This example demonstrates a simple static composition of geometric shapes, including circles, rectangles, lines, and a path, rendered as inline SVG elements. The visualization is framed by a bold black stroke on the primary shapes, while the secondary line group uses a distinct orange stroke for its path. The page also includes styled HTML text, with a red highlighted list item, and relies on custom CSS for typography and layout. The HTML structure directly embeds the SVG markup, with no external JavaScript libraries required.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Example

This example demonstrates a static composition of basic geometric shapes rendered as SVG, including green, blue, and red circles, a black-bordered rectangle, a thick navy line, and a single path. The visualization uses raw SVG elements defined directly in the HTML, without any JavaScript libraries or data-binding frameworks. CSS applies a 3000-millisecond transition to the rectangles’ stroke properties, though no animated changes are triggered dynamically. The layout is fixed within a 960-by-500 viewport, with a large margin around the canvas, emphasizing the simple arrangement of shapes over data-driven content.

Ssz2036

87% match

Loading thumbnail…

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.

GGloria Higley

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

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

83% match

Loading thumbnail…

SVG TEST

This example displays a static collection of SVG primitives, including circles, rectangles, lines, and paths, arranged in groups with transforms. The composition showcases basic shapes with hard-coded fills, strokes, and coordinate positions within a 960 by 500 pixel canvas. The rendering relies on raw SVG elements defined directly in the HTML, with CSS classes like `.lines` applying stroke properties and line joins. The code uses plain SVG APIs (`<circle>`, `<rect>`, `<line>`, `<path>`, and `<g>`) alongside CSS styling, without any JavaScript libraries for layout or interaction.

JJames Song

83% match

Loading thumbnail…

Tests

This example demonstrates basic SVG shapes rendered on an HTML page using CSS and JavaScript. It shows a circle, a rectangle with a red fill and black stroke, and a group containing a line and a path, all displayed within an SVG element of 960 by 500 pixels. The code uses plain SVG APIs for drawing and CSS for styling, with the `.lines` class applying stroke properties to the line and path. The page loads from `index.html` with linked `styles.css`, providing a minimal setup for testing SVG rendering without any external libraries.

XXavier Bost

83% match

Loading thumbnail…

Shapes with SVG AND CSS

This example shows how to combine inline SVG shape elements with CSS styling to create a static composition of circles, rectangles, lines, and paths. The graphic renders a simple geometric scene with default black shapes, a colored group with red and green fills, a blue group with black strokes, and a separate line and path group. The code uses raw SVG markup with attributes like `transform`, `fill`, and `stroke`, while the CSS file styles the `.lines` class and its child path. All rendering is done through standard browser SVG support.

Rryankinsey1

83% match

Loading thumbnail…

Art

This example demonstrates a static composition of SVG shapes, including overlapping red and green circles, a diagonal line, and two path elements. The rendering uses raw SVG syntax directly in an HTML document, with inline CSS setting the page margin to zero and hiding overflow. The artwork is generated through explicit coordinate attributes such as `cx`, `cy`, and `d` for paths, and includes a commented-out rectangle to show alternative shapes. The piece explores layering and stroke styling without any interactive or animated behavior.

Aaidarshafeev1@gmail.com

83% match