Shikhar Pachori

@shikhar31·6 public vizzes

SVG Fundamentals

This example demonstrates the foundational building blocks of SVG by rendering a minimal HTML page that uses CSS and JavaScript to interact with SVG elements. It shows how to structure an empty document with a `<title>` and a `<body>`, ready for dynamic visualization. The code uses the raw DOM API via `document.createElement` or similar, without external libraries, and relies on standard HTML, CSS, and JavaScript. The approach highlights the browser’s native SVG support, serving as a starting point for more complex visualizations built with frameworks like React.

Jan 23, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering by embedding a circle and a rectangle directly in an HTML document using the `<svg>` element. The circle appears at coordinates (50, 50) with a radius of 50, while the rectangle is positioned at (400, 100) with 300×150 dimensions, styled with a purple fill, orange stroke, and a 10-pixel stroke width. The code uses vanilla SVG markup without any external JavaScript libraries or data sources, relying solely on the browser’s native SVG support for visualization.

Jan 23, 2024

Loading thumbnail…

Fork of HTML Starter

This example demonstrates fundamental SVG shapes by rendering a circle and a rectangle on an empty canvas. It shows how basic geometric elements can be positioned and styled using SVG attributes. The code uses raw SVG markup within an HTML document, setting the circle's center coordinates and radius, and the rectangle's size, fill color, purple, stroke color, orange, and stroke width. All shapes render directly in the browser without any additional JavaScript libraries or data sources.

Jan 20, 2024

Loading thumbnail…

Fork of Fork of SVG Fundamentals

This example demonstrates basic SVG shape rendering within an HTML document. It shows a circle and a rectangle with distinct visual properties, including fill colors and stroke styling. The visualization relies on the SVG API, using the `<svg>`, `<circle>`, and `<rect>` elements to define the graphics. The rectangle demonstrates stroke width and color customization, while the circle appears as a default black shape. The entire composition is rendered statically in a 960 by 500 pixel viewport, with the markup embedded directly in the HTML file for straightforward display.

Jan 20, 2024

Loading thumbnail…

Fork of SVG Fundamentals

A minimal fork of an SVG fundamentals demonstration renders two primitive shapes—a black circle and a purple rectangle with an orange stroke—directly inside a static SVG canvas. The example illustrates basic vector graphics construction using raw Scalable Vector Graphics (SVG) markup within an HTML document, with no external JavaScript libraries or data sources. It showcases how the `circle` and `rect` SVG elements define geometry and styling attributes such as fill, stroke, and stroke-width, serving as a clear starting point for understanding SVG syntax and rendering in a browser.

Jan 20, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes as a static, code-driven visualization. It renders two primitive elements—a circle and a rectangle—directly within an HTML document using the SVG markup language. The circle appears without fill or stroke styling, while the rectangle uses a purple fill with an orange outline via SVG presentation attributes. The code relies on no external libraries or data sources, instead showcasing how SVG’s native `circle` and `rect` elements define geometry and appearance. The example serves as a minimal foundation for understanding vector graphics structure, independent of JavaScript or D3 functionality.

Jan 2, 2024