Skip to main content
SimilarExport ZIP
100%

Fork of Fork of SAP_SVG_FUNDAMENTALS

✓ Published1🌍 Public
Ssapan3004
Last edited Dec 31, 2022
Created on Dec 31, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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.

Ssapan3004
92% match
Loading thumbnail…

Fork of Fork of SVG Fundamental

This example displays four circles arranged in a grid on a 400 by 400 SVG canvas, each filled with a different color: black, red, yellow, and magenta. It demonstrates fundamental SVG shape rendering and styling through inline attributes such as `cx`, `cy`, `r`, and `fill`. The code uses plain HTML and static SVG markup without JavaScript or external libraries, serving as a minimal starting point for understanding vector graphics in a web page.

AAlexHraven
84% match
Loading thumbnail…

Fork test

This example displays a set of static geometric shapes composed of paths and rectangles rendered as SVG. The visualization uses plain HTML, CSS, and JavaScript, with CSS transitions applied to rectangles that change color and stroke width on hover. The layout shows a large outlined container with smaller filled blocks in orange, green, gray, and blue, using SVG elements like `<path>` and `<rect>` directly in the markup. It demonstrates basic SVG styling and interactivity without any external data or charting libraries.

Zzaioris
82% match
Loading thumbnail…

Fork of HTML Starter

This example presents a static arrangement of gray rectangles and one red rectangle in an SVG canvas, with a single black ellipse that turns green on hover via a CSS transition. The code uses plain HTML, CSS, and JavaScript, with JavaScript confined to a commented-out lesson on variables and arrow functions, ultimately logging a person object to the console. No interactive data or external libraries are employed; the visualization is purely a styled SVG grid demonstrating basic styling and hover effects.

KKhatera Alizada
81% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a single SVG rectangle that changes color and stroke properties when hovered. The rectangle is initially orange with a cyan stroke and transitions smoothly over 3 seconds to cyan with a thick green stroke on mouseover. Built with React using inline CSS styles and SVG elements, it shows how CSS transitions can animate SVG shape attributes directly through the `transition` property applied to `rect` selectors. The rendered output relies on the browser’s SVG rendering engine, with no external data or JavaScript logic beyond basic event handling.

JJerlon Buenconsejo
81% match
Loading thumbnail…

Fork of Fork test 2

This visualization displays a set of geometric shapes, including paths and rectangles, arranged in a static composition. The SVG elements use a defined color palette and some rectangles have hover effects, while a JavaScript script dynamically generates and appends an additional 100 horizontal rectangles, which overlay the existing shapes to create a striped pattern. The page is built with raw HTML, CSS, and JavaScript, using the React framework for the project structure, and renders entirely as SVG.

Zzaioris
81% match
Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page with SVG shapes that respond to hover interactions. A red circle and a blue-bordered rounded rectangle are positioned on a light yellow background, with the rectangle’s fill and stroke animating smoothly via CSS `transition` on hover. The page includes a `console.log` statement to demonstrate JavaScript execution, using plain HTML, CSS, and inline SVG without external libraries or data sources.

Ggiulius540
80% match
Loading thumbnail…

Fork of Fork of Shapes with SVG and CSS

This example uses raw SVG elements and CSS to demonstrate basic shapes and styling. It shows circles, rectangles, and a path, with both inline attributes and CSS classes controlling appearance. The first circle is red, the second green, and a group with a transform moves shapes while adding a stroke. A separate group defines a line and path, with CSS applying black strokes and a yellow stroke-linejoin to the path. All shapes are hardcoded in HTML, with no JavaScript or data binding, relying purely on SVG presentation attributes and stylesheet rules.

MManoj
80% match