Trial

100%

✓ Published0🌍 Public

Nnaveenkumar.m@kpriet.ac.in

Last edited Jul 25, 2025

Created on Jul 25, 2025

This example demonstrates basic SVG shapes—a circle, rectangle, and line—styled with CSS and labeled with text. It shows how HTML, CSS, and SVG combine to create interactive graphics, with hover effects changing shape fills via the `.shape:hover` rule. The page uses an inline `<svg>` element, while the included `index.js` file imports `d3` to select the body and write "Hello D3", though that selection is not reflected in the visible output. The SVG is rendered directly in the HTML document with a white background and rounded border.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

79% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering within an HTML page, showing a green circle, a navy line, and an empty path element. The visualization uses the SVG specification directly in the markup rather than generating shapes programmatically. The accompanying JavaScript imports the `select` function from D3 version 7 and writes "Hello D3 version 7" into the document body, illustrating simple DOM manipulation. The code serves as an introductory template for combining static SVG graphics with the D3 library's selection API.

FFouzia A.

79% match

Loading thumbnail…

Shapes

This example demonstrates basic SVG shapes and dynamic styling interactions. A light blue rectangle serves as a canvas containing a circle, ellipse, text label, and line. Using D3 v6 selection methods, hovering over the circle turns it yellow, clicking the circle turns it red, and clicking the line thickens it. Clicking anywhere on the SVG updates the text element to display the cursor’s coordinates via `d3.pointer`. The page also mixes plain HTML headings and paragraphs with CSS rules for color and font styling.

JJoyce Robbins

79% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic shapes—circles, rectangles, lines, and paths—using SVG elements embedded directly in an HTML page, with styling controlled through CSS. The code uses D3.js v5 to select the SVG container and relies on standard SVG attributes like `cx`, `r`, `x`, `y`, and `d` to define geometry. A simple transform group shifts and scales the shapes, while stroke and fill properties, including a blue fill with black stroke on a subgroup, show how visual appearance is set.

DDaniel Weston

79% match

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes drawn directly in an HTML document, including circles, rectangles, lines, and paths. The SVG canvas is fixed at 800 by 800 pixels, with shapes positioned using explicit coordinates and styled with attributes like fill, stroke, and stroke-width. The code also includes `index.js`, which imports the `select` function from D3 version 7 and sets the body text to "Hello D3 version 7", showing a minimal D3 integration alongside static SVG markup. The visual output is purely static, with no interaction or dynamic data binding.

Hharikishan8891

79% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and inline attributes. It shows how fill colors, stroke widths, and transforms like scaling and translation affect rendering, with groups applying shared properties such as stroke and fill. The code uses raw SVG elements (circle, rect, line, path) and CSS classes (like `.lines` for stroke styling) rather than a JavaScript visualization library. The HTML embeds the SVG directly, while the stylesheet controls global margins and stroke properties.

Aanuj1450

79% match