santoshmitra-05

@santoshmitra-05·10 public vizzes

MY NEW SVG PROJECT

This example shows a collection of concentric circles and lines rendered on a large SVG canvas using plain JavaScript within an HTML page. It uses the SVG API directly, with elements like `<circle>` and `<line>` to create layered color patterns and a target-like composition. The rendering approach relies on static SVG markup, with no dynamic data or interaction. The code includes a basic CSS style for text and a commented-out rectangle, while the main visual elements are defined inline in the document body.

Jul 16, 2023

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a static SVG composition of overlapping circles and a line, arranged in a simple geometric pattern. The graphic shows concentric rings in green, yellow, blue, and red at the left, a black circle with grey and yellow inner circles on the right, and a horizontal red line across the top. The code uses raw SVG elements—`circle` and `line`—with inline attributes for positioning, sizing, and colors, all rendered directly within an HTML document without any JavaScript libraries.

Jul 16, 2023

Loading thumbnail…

Fork of Fork of HTML Starter

This visualization displays three concentric circles in green, yellow, and blue, each nested inside the previous one. The circles are centered at the same point (100, 100) within an SVG canvas sized 4000 by 4000 pixels. The example demonstrates how to draw basic geometric shapes using SVG elements directly in HTML, with CSS controlling the font size of a message. It relies on native SVG circle elements and CSS styling for the visualization.

Jul 16, 2023

Loading thumbnail…

Fork of HTML Starter

This example shows three nested circles centered at the same point, each with a distinct solid color: green, yellow, and blue. The circles are drawn directly in an SVG element with a fixed width and height of 4000 pixels, using static `circle` elements with explicit `cx`, `cy`, and `r` attributes. The page relies on plain HTML and CSS for layout, with the `message` class defining font styling that is not used in the visible output. No JavaScript libraries or dynamic data are involved.

Jul 16, 2023

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page that displays the text “Hello HTML!” centered in the browser window. The page uses a CSS class to set the font size and alignment, with the content defined directly in the markup. No external libraries or data sources are involved, demonstrating a straightforward approach to static web content using pure HTML and CSS. It serves as a baseline template for more complex visualization projects.

Jul 14, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays a static SVG scene with a green circle and a red rectangle outlined in blue, set above a large “Hello HTML!” message. It demonstrates the foundational use of raw HTML, CSS, and JavaScript within a single document. The SVG elements are drawn using the standard `circle` and `rect` tags, while the message’s appearance is controlled through a CSS class rule. The code does not rely on external libraries; instead, it serves as a minimal starter template where the browser’s native rendering of SVG and CSS provides the entire visual output.

Jul 6, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays a static SVG scene with a brown circle centered at coordinates (50, 50), a green line drawn from the origin to (100, 100), and an incomplete path beginning at (500, 500). The page overlays the large text “Hello HTML!” in a 13-em font. It uses plain HTML, inline CSS for styling, and native SVG elements (`circle`, `line`, `path`) without any JavaScript libraries or external data sources. The SVG markup is embedded directly in the document body.

Jun 8, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays the message “Hello HTML!” centered in a large green font, with a green circle rendered inside an SVG element directly below the text. The HTML page uses inline CSS to style the message’s font size and alignment, while JavaScript is not utilized. The SVG circle is defined with explicit attributes for its center coordinates, radius, and fill color, demonstrating a minimal static rendering approach without any external libraries or data sources.

Jan 12, 2023

Loading thumbnail…

Fork of SVG Fundamental

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.

Jan 12, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays a single, large, centered message reading "Hello HTML!" on a plain web page. It demonstrates the fundamental structure of an HTML document, using an inline CSS rule to set the text size to 13em and align it in the middle of the viewport. The page uses a simple `<div>` element with the class "message" to hold the text, showcasing basic separation of style and content. It is a minimal, static rendering with no interactivity or data, serving as a starting point for web-based visualization projects.

Jan 11, 2023