Fork of SVG Fundamental

100%

Fork of SVG Fundamental

✓ Published0🌍 Public

Last edited Jan 12, 2023

Created on Jan 12, 2023

This example shows how software versions change over time by plotting registration time on the x-axis and validity time on the y-axis. Each colored rectangle represents a version, with the SVG elements `rect`, `line`, and `text` used to draw the chart, axes, and labels directly in HTML. The chart uses stacked rectangles and horizontal lines to depict the duration each version is valid, with axes labeled from 09:00 to “now.” The pure SVG rendering relies on basic styling with CSS classes for version colors and precise coordinate attributes for positioning.

AI-generated description

Changed visualistation after submission, but the icon did not change!

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamental

This visualization shows the relationship between registration time and validity time for sequential data versions, displayed as stacked colored rectangles on an SVG canvas. Each version is represented by a distinct color (bisque, peach, coral, and orange), with rectangles positioned to indicate when each version was registered along the x-axis and its validity period along the y-axis. The chart includes labeled axes for both time dimensions, a legend explaining the color-to-version mapping, and axis markers indicating "now" on both timelines. The implementation uses raw SVG elements—including `rect`, `line`, and `text`—styled with inline CSS classes.

BBart van Pelt

84% match

Loading thumbnail…

Fork of Time series - labels

This time-series plot displays the validity and registration periods of four data versions. It uses D3.js to map the temporal intervals to rectangular marks, where the x-axis represents registration time and the y-axis represents validity time. The plot includes date axes, rectangles with tooltips, and computes the maximum date ranges to accommodate open-ended intervals. The code uses D3's scaleTime, axisLeft, and axisBottom functions for layout and rendering.

BBart van Pelt

76% match

Loading thumbnail…

Fork of SVG Fundamentals

The visualization demonstrates fundamental SVG shapes, including overlapping circles, a line, and two distinct path elements, rendered on a 960-by-500 canvas. It highlights how fill and stroke attributes affect appearance, with a red and green circle overlapping, a navy line, and paths drawn in black. The example also includes commented-out code for a rectangle, showing alternative shape configurations. The HTML file directly embeds SVG markup, with CSS resetting margins and hiding overflow, presenting a clean, minimalist demonstration of vector graphics primitives.

NNixonthiyagesh-Hexa

76% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates the foundational structure of an SVG graphic, combining basic shapes to form a static, abstract composition. It uses a large, semi-transparent green circle as a background element, overlaid with a red, thick-stroked path that creates an organic, irregular line. Below these, three black rectangles are positioned to suggest a simple interface or layout block. The rendering relies purely on SVG elements (`circle`, `path`, `rect`) and CSS classes, with all coordinates defined via the `viewBox` attribute, resulting in a lightweight, code-driven illustration without external libraries.

Jjajinkyaa

76% match

Loading thumbnail…

Fork of SVG Fundamentals

The fork demonstrates basic SVG shape construction inside a plain `index.html` file, using the SVG element itself without any external libraries. It renders two overlapping circles to show layering and opacity effects, a straight line segment, and two paths with explicit coordinate data to illustrate line drawing and path commands. The code is primarily a static, hand-authored SVG canvas, with one path containing a complex cubic Bézier curve sequence and another tracing a simple polylined route.

Rrsrivastav54

75% match

Loading thumbnail…

Fork of SVG Fundamentals

This fork of the SVG Fundamentals example demonstrates basic vector graphics rendering using raw SVG elements embedded in an HTML page. The visualization displays simple geometric shapes, including circles with varying fill colors and a rectangle with a blue fill and brown stroke, all positioned within a 600x1000 canvas. A second variation adjusts the layout with a 960x500 viewport and adds a single tall rectangle. The code uses no external JavaScript libraries, relying instead on native SVG markup and minimal CSS to control body margins and overflow for a clean presentation.

Nnatsgeorge.ng@gmail.com

75% match

Loading thumbnail…

Fork of Fork of SVG fundamentals

This example demonstrates fundamental SVG shapes, including circles, a rectangle, a line, and a path, arranged on a 960-by-500 canvas. The circles vary in radius and fill color, while the rectangle features a yellow fill with a navy stroke of specified width. The line and path illustrate basic coordinate-based drawing. The rendering uses raw SVG markup directly in an HTML document, with no external libraries or JavaScript, showcasing static vector graphics built from native SVG elements.

NNita

75% match

Loading thumbnail…

Fork of SVG Fundamentals

A demonstration of basic SVG line rendering shows a set of black and red axis-aligned strokes on a 960-by-500 canvas, visually constructing a grid-like framework. The example uses raw SVG elements, specifically `<line>` tags with explicit `x1`, `y1`, `x2`, and `y2` coordinates, to draw each segment. The red lines form rectangular boundaries while a single black vertical line divides the space. No external libraries are used; the rendering relies entirely on native SVG markup and CSS reset styling, with the viewport fixed and overflow hidden.

GGbemiga Atolagbe

75% match