Skip to main content
SimilarExport ZIP
100%

Fork test

✓ Published1🌍 Public
Zzaioris
Last edited Nov 20, 2022
Created on Nov 20, 2022
Forked from J SVG Fundamentals

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.

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 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
93% match
Loading thumbnail…

Fork

This example demonstrates fundamental SVG shape drawing within a static 600×800 pixel canvas. It shows a rectangle outline, two circles (one filled red), horizontal and vertical lines, and a purple rectangular path, all positioned relative to the viewport. The code uses plain SVG markup as embedded in HTML, with no external JavaScript libraries or data binding. Styling is applied directly through attributes like `stroke`, `stroke-width`, and `fill`, illustrating basic vector graphics construction without animation or interaction.

OOverpitch
90% match
Loading thumbnail…

Fork_of_Fork_of_HTML_Starter

This example displays a set of basic SVG shapes—a circle, a red circle, a green rectangle, a navy line, and a blue path—arranged on a 1000×1000 canvas. The code uses raw HTML and inline SVG elements, including `circle`, `rect`, `line`, and `path`, without any JavaScript libraries. It demonstrates the foundational syntax for static vector graphics, with shapes positioned via absolute coordinates and styled using attributes like `fill` and `stroke`. The rendering is entirely declarative, showing how primitive shapes compose a simple composition directly in the browser.

Aag17@tutanota.de
86% match
Loading thumbnail…

Fork of Fork of HTML Starter with SVG

This example presents a basic SVG scene composed of circles, rectangles, lines, and a path, rendered within a 960x500 viewport. The graphic demonstrates primitive shapes and SVG grouping via the `<g>` element, with some elements transformed using the `translate` attribute. CSS styling applies a black stroke to the line group and a blue stroke with rounded joins to the path. The code uses plain HTML, SVG, and CSS, with no JavaScript libraries or data sources, serving as a minimal starter template for visualization work.

Vvmakker
85% 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
85% match
Loading thumbnail…

Fork

A large circle is rendered near the top-left corner of an SVG canvas, with a thick red diagonal line segment drawn from inside the circle outward. The circle has no fill and is not clipped, so its outline and the line are clearly visible against the blank page. The code uses React with SVG elements directly in the HTML, specifically the `<circle>` and `<path>` tags, and sets the line’s stroke and stroke-width as attributes. The rendering is static with no interaction or data-driven behavior.

YYZY-Jaeger
85% match
Loading thumbnail…

Fork of HTML Starter

This example shows a small set of basic SVG geometric shapes—a red circle, a blue rectangle with a red stroke, a thin navy line, and a large outlined rectangle—arranged on a 960 by 500 canvas. It renders directly using declarative SVG elements defined in static HTML, with no JavaScript logic or data binding. The visualization relies solely on SVG’s built-in shape elements like `circle`, `rect`, and `line`, styled via inline attributes for fill, stroke, and positioning.

DDev Dragon
84% match
Loading thumbnail…

Fork of HTML Starter

This example displays a static SVG scene composed of a red circle, a green rectangle, a thick black line, and a zigzag path, all rendered on a 960 by 500 pixel canvas. The shapes are created directly in HTML using SVG elements such as `circle`, `rect`, `line`, `path`, and `g`, with styling applied through CSS attributes like `fill`, `stroke`, and `stroke-width`. No external libraries or data sources are used; the visualization relies solely on native SVG markup and inline presentation attributes to demonstrate basic geometric drawing capabilities.

Ddepane12
84% match