sapan3004

@sapan3004·5 public vizzes

Fork of SAP_SVG_JS_FUNDAMENTALS

This example demonstrates a geometric pattern created entirely with SVG masks, rendering a circular window surrounded by a grid of horizontal and vertical stripes. The visualization uses two custom mask definitions—one with a white circle on a black background and another with a black circle on white—to selectively reveal and hide alternating sets of rectangles drawn across the full viewport. Built with vanilla JavaScript and the SVG DOM API, it dynamically sizes the canvas to the browser window and constructs 100 lines in each direction using `createElementNS` and `setAttribute`, producing a layered, intersecting lattice effect without external libraries.

Jan 1, 2023

Loading thumbnail…

Fork of Fork of SAP_SVG_FUNDAMENTALS

This example demonstrates four hollow black squares arranged in a row, each of which changes its fill color when hovered over—turning blue, red, green, and gold respectively. The visualization uses raw SVG rectangles with CSS `:hover` pseudo-classes to trigger the color transitions. The page is built with plain HTML and CSS, with no JavaScript libraries, and renders the shapes statically at a fixed size of 960 by 680 pixels. The code includes duplicated rectangle definitions with matching IDs, though only the first set is visible.

Dec 31, 2022

Loading thumbnail…

Fork of SAP_SVG_FUNDAMENTALS

This example demonstrates how CSS hover effects can be applied directly to SVG elements, changing the fill color of individual rectangles when the mouse passes over them. Four black-outlined squares, defined using the SVG `<rect>` element, respond to hover with different colors (blue, red, green, gold) via CSS ID selectors. The visualization also includes a complex curved line rendered with an SVG `<path>` element, using cubic Bézier curves (C commands) to create an intricate silhouette. The code is plain HTML and CSS with no JavaScript libraries, showcasing basic SVG interactivity and styling.

Dec 19, 2022

Loading thumbnail…

SAP_SVG_FUNDAMENTALS

This example showcases fundamental SVG shapes, including circles, rectangles, lines, and a path, rendered within an HTML page. It demonstrates the basic styling and coordinate systems for these vector graphics elements. The code uses a static SVG canvas with hardcoded dimensions and coordinates, employing inline attributes such as `fill` and `stroke` to define the visual output. The file relies on native browser SVG support and includes a plain HTML structure with a "Hello World" text, highlighting a simple, non-interactive approach.

Dec 19, 2022

Loading thumbnail…

Iaana_HTML

This is a minimal HTML page that displays a static collection of basic shapes drawn directly within an SVG element. The visualization shows three solid-color circles arranged in a horizontal row, accompanied by a larger outlined pink rectangle. The rendering uses only native SVG markup (circle and rect elements), with no external scripting or data. The page is built with plain HTML and CSS, relying on the browser’s built-in support for SVG to define coordinates, dimensions, fill colors, and stroke properties for each shape.

Dec 17, 2022