Skip to main content
SimilarExport ZIP
100%

Test

✓ Published0🌍 Public
Tt0miwa22
Last edited Jan 25, 2023
Created on Jan 25, 2023
Forked from D3 Starter

This example demonstrates a minimal SVG drawing composed of two black, unclosed paths. The first path traces a simple triangular outline with a horizontal base and a diagonal line, while the second path, translated along the x-axis, forms a smaller, angled line segment. The rendering is achieved directly within the HTML file using an inline SVG element and static path data. The code does not utilize any JavaScript libraries or dynamic data, relying solely on static SVG markup to produce the geometric figure.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates the basic structure of an SVG graphic, using a single path element to draw a simple, compact shape. The code sets up an SVG canvas with specific width, height, and viewBox attributes, then renders a path with a white fill and grey stroke. The path data contains coordinates that create a closed, geometric form, illustrating how raw SVG path commands define vector shapes. The example relies on the native SVG API within an HTML document, with no external JavaScript libraries involved, and the rendering approach is direct SVG markup.

Jjajinkya
78% match
Loading thumbnail…

SVG Beginner

A minimal demonstration of SVG rendering with a single diagonal line drawn from the top-left to the bottom-right of the canvas. The example uses raw SVG markup, including a `path` element with `d` coordinates and a `stroke` attribute, without any JavaScript libraries. It serves as a starting point for understanding basic vector graphics structure in the browser.

Hhegyeg
77% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering using raw SVG elements, with a single visible path that draws an open polygonal line connecting three points. The code includes commented-out examples of circles, rectangles, lines, and additional paths, but only the active path displays on the page. It uses the SVG `<path>` element with an uppercase `M` (move-to) and lowercase/lowercase mixed `L` (line-to) commands within the `d` attribute, and relies on the browser’s native SVG rendering without any external libraries like D3 or Three.js. The example serves as a minimal, code-level introduction to SVG path syntax.

MMauro.V
77% match
Loading thumbnail…

SVG

This example demonstrates basic SVG shape rendering within an HTML page, showing circles, rectangles, a line, and a custom path. The SVG element spans 960 by 500 pixels and uses inline attributes for styling, such as fill colors, stroke colors, and stroke widths. A circle with a red fill, a blue-stroked hollow rectangle, a gold-filled inner rectangle, a navy diagonal line, and a red triangular path all appear without interactive behavior. The code relies solely on native SVG elements—no external libraries—highlighting how static vector graphics can be defined directly in markup.

Mmanunair16
77% match
Loading thumbnail…

SVG Fundamentals - excercise

This example demonstrates fundamental SVG shape elements and path commands within a single 900 by 900 canvas. It shows a black outlined rectangle with no fill, two circles with default and explicit red fills, a green stroked path, a thick navy line, and a black polyline created via path data. The page renders entirely through inline SVG in HTML, using basic attributes for geometry, stroke, fill, and stroke-width, with no external libraries.

Yyejichun@naver.com
76% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the basic building blocks of SVG shapes in a static 960x500 scene. It draws a black-outlined circle, a yellow rectangle with a navy border, a diagonal navy line, and a black path with two segments. The SVG is embedded directly in the HTML markup, with the file named index.html. The code uses no external JavaScript visualization libraries, though the included index.js file declares a `main` function that writes an unstyled "Hello World" text into a container, but this script is not referenced or executed by the HTML document.

KKingsLanding
76% match
Loading thumbnail…

SVG Fundamentals - excercise

This example demonstrates fundamental SVG shapes within an HTML document, including circles, a line, and a path. Two circles differ in fill color, while a navy stroke line and a black polyline path illustrate basic stroke and coordinate drawing. The code uses the raw SVG API to render these static vector graphics directly in the browser, with the path describing a simple two-segment line from (200,200) to (300,400). No external libraries or data sources are involved; the visualization relies solely on SVG’s built-in elements and attributes.

Yyejichun@naver.com
76% match
Loading thumbnail…

Just test

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.

Mmimimichelle
76% match