Skip to main content
100%

testing chart

✓ Published0🌍 Public
Ssubratanp
Last edited Feb 4, 2023
Created on Feb 4, 2023
Forked from SVG Fundamentals

This example shows two static SVG compositions. The first uses twelve colored circles arranged in a circular petal pattern around a central dark red circle; hovering over that central circle turns it black via a CSS `:hover` rule. The second is a separate SVG containing eight small dark circles scattered across a white background. Both charts are hand-coded in HTML with inline SVG elements, using no external libraries or data sources.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

test

This example presents a static composition of two SVG circles on a 960 by 500 canvas. A large yellow circle with a thick black outline is centered, while a smaller black circle is positioned to its left, creating a simple contrasting visual. The visualization is built using raw HTML, CSS, and inline SVG, with no external libraries or JavaScript logic. The SVG elements are declared directly within the HTML structure, relying on the browser's built-in vector graphics rendering.

BBibek-Bhattarai
82% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates how to build SVG graphics by hand, using raw SVG elements and CSS for interaction. It shows two distinct compositions: a circular arrangement of colored circles, and a separate SVG canvas with a scatter of black points. The first cluster uses plain SVG `<circle>` elements with fixed coordinates and fills, while a CSS `:hover` rule changes the fill of a central circle. The code relies directly on the browser’s SVG DOM APIs and CSS selectors, with no external libraries, rendering purely through static markup.

Ssubratanp
82% match
Loading thumbnail…

Teste

This example demonstrates a static chart composed of basic SVG geometric shapes—two red and purple circles, a blue-outlined square, and a diagonal line—set against a black border framing the full 1920×1080 canvas. The React-based rendering uses inline SVG elements directly in the HTML, with no dynamic data or interaction. A separate `index.jsx` file imports React and D3’s `select` API, but the visible output does not use them, showing only a raw SVG composition. The chart highlights primitive shape attributes like fill, stroke, and stroke-width without encoding a dataset.

Nnunosilvasemedo@gmail.com
82% match
Loading thumbnail…

SVG trial

This example demonstrates a static SVG composition featuring interactive hover effects on geometric shapes. A yellow circle with a red stroke, two blue and red rectangles, a green diagonal line, and a black path are drawn directly on a 1000x1000 canvas. The plain HTML page uses embedded CSS to change fill and stroke colors on hover—circles and rectangles turn black, while the line becomes red. The code relies on standard SVG elements (`circle`, `rect`, `line`, `path`) and CSS pseudo-classes, with no JavaScript or external libraries.

AAlan Beveridge
78% 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
78% match
Loading thumbnail…

Hello HTML

A minimal static SVG chart renders three circles—a large yellow one with a thick black stroke, and two smaller black circles with blue and black outlines—on a blank 960×500 canvas. The page loads React 16.7.0 from a CDN but does not use any React components. Instead, the drawing is hard-coded directly in the HTML body using inline SVG elements, with a separate script that logs "hello java" to the console. The example demonstrates basic SVG shape rendering without any data binding or interactive behavior.

JJulesBaerwald
78% match
Loading thumbnail…

Hello HTML

A minimal static SVG chart renders three circles—a large yellow one with a thick black stroke, and two smaller black circles with blue and black outlines—on a blank 960×500 canvas. The page loads React 16.7.0 from a CDN but does not use any React components. Instead, the drawing is hard-coded directly in the HTML body using inline SVG elements, with a separate script that logs "hello java" to the console. The example demonstrates basic SVG shape rendering without any data binding or interactive behavior.

JJulesBaerwald
78% match
Loading thumbnail…

Circles with SVG

This example displays twelve pastel-colored circles scattered across an SVG canvas, each positioned at fixed coordinates with varying radii. The visualization demonstrates static SVG rendering with a simple, decorative composition, using no external libraries or JavaScript for interaction. The circles are defined directly in markup with individual `fill` attributes, while CSS centers the SVG on a light gray background and applies a subtle shadow and rounded corners. The code relies on basic SVG elements and inline styling, with `index.js` containing only a placeholder console statement.

223100098@lums.edu.pk
78% match