Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
AAnimesh Nautiyal
Last edited Jan 18, 2020
Created on Jan 18, 2020
Forked from HTML Starter

This example renders a simple static SVG scene containing a path, an inactive polygon with dashed gray styling, and a group of active and tentative shapes including a red circle and dark gray rectangle. The code relies on D3.js version 5.15.0 for element selection and class manipulation via `d3.select` and `.classed`. The SVG is drawn directly in the HTML with inline styling, showing how CSS classes like `.active` and `.tentative` control stroke appearance and opacity.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a static composition. It demonstrates how CSS classes and inline attributes style the shapes, including fill colors, strokes, stroke widths, and transforms for scaling and translation. The code uses React to render the SVG markup within an HTML page, with a linked stylesheet defining styles for groups and individual elements. No interactive behavior or data binding is present; the visualization serves purely as a styling and layout demonstration.

Xxychen0612.cs09@nycu.edu.tw
86% match
Loading thumbnail…

Untitled

This example demonstrates how basic SVG shapes and CSS styling can be used to create a static composition. It shows circles, rectangles, lines, and a path arranged in groups, with some shapes using inline fill colors and others inheriting styles from a group transform. The code uses React to render SVG elements, with the `style.css` file applying strokes and stroke widths to the line and path elements. The SVG is scaled and translated to position the shapes within a fixed 960 by 900 viewport.

Bbl75d
86% match
Loading thumbnail…

Untitled

This example shows a collection of geometric shapes rendered directly in SVG, including circles of varying radii and colors, a navy line from the origin, and a red path with arc and quadratic curve segments. The code uses plain SVG element syntax within an HTML file, with a commented-out rectangle demonstrating how to toggle shapes. Each shape is positioned explicitly via cx, cy, x, y, and path data attributes, and styling is applied through fill, stroke, and stroke-width properties. The visualization is static, with no interaction or data binding, serving as a bare-bones demonstration of basic SVG drawing primitives in a standalone page.

Zzinthaw
84% match
Loading thumbnail…

Untitled

This example demonstrates basic SVG shape construction on a static HTML page, combining a diagonal line, a rounded rectangle, and a vibrant green circle within a translated group. The visualization labels the shapes as "Rectangle" and "Circle" using monospaced text, while a larger title announces "d3.js 学习 Day01" (D3.js Learning Day 01). The code relies on raw SVG elements—`line`, `rect`, `circle`, `g`, and `text`—styled with inline CSS and attributes like `transform`, `fill`, and `stroke`. No JavaScript libraries are imported; it is a pure HTML/CSS/SVG composition.

Jjexchan
84% match
Loading thumbnail…

Untitled

This example displays a collection of basic geometric shapes—rectangles, circles, ellipses, a line, a polyline, a polygon, and a path—drawn on a static SVG canvas. Each shape uses distinct stroke colors and thicknesses, with variations such as rounded corners and dashed-free outlines. The rendering is implemented directly within an HTML file using inline SVG elements without any additional JavaScript libraries or frameworks. React is listed as the framework, but the code shown is purely declarative SVG markup, focusing on fundamental vector graphics primitives.

KKhatera Alizada
84% match
Loading thumbnail…

Untitled

This example shows a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged within a single 960x500 viewport and scaled 1.5x. It demonstrates how CSS classes, such as `.lines` and `.lines path`, can apply stroke styles and line joins, while inline attributes like `fill` and `stroke-width` override or augment those rules. The SVG is rendered directly in HTML with React absent, relying on native SVG elements and a linked stylesheet. Colors and transform groupings illustrate visual composition without interactive behavior or external data.

RReekMajumder
84% match
Loading thumbnail…

Untitled

This example displays a static SVG scene containing a rotated green rectangle and a red circle, positioned inside a group that is translated and rotated relative to the canvas. The SVG is embedded directly in an HTML page and uses the D3.js v4 library, loaded via a script tag. Rendered with SVG, the graphics are defined declaratively, with the group transform applying rotation and translation to both shapes.

MMiha Tomšič
83% match
Loading thumbnail…

Untitled

A single orange circle is rendered inside a small SVG canvas, demonstrating basic D3.js selection and manipulation. The example uses `d3.select` to target the circle element by its ID, then modifies its radius, stroke, and fill color via the `attr` and `style` methods. The code shows how D3 can directly update SVG attributes and CSS styles on existing DOM elements, with the circle initially defined in static HTML markup.

Sshabdullah05
83% match