Skip to main content
100%

Gist b76b24130b07da4646bdae5db5ec862f

✓ Published0🌍 Public
Aadamjanes
Last edited Mar 15, 2018
Created on Mar 15, 2018

This example shows a static SVG composition of five basic geometric shapes and a text label. It demonstrates fundamental SVG rendering with a green rectangle, red circle, grey ellipse, blue line, and orange text reading "Hello World" on a 400 by 60 canvas. The code uses native SVG elements directly within an HTML file, with styling applied through presentation attributes like `fill`, `stroke`, and `font-size`. No JavaScript libraries or data sources are involved; the visualization relies solely on declarative SVG markup.

AI-generated description

Similar vizzes

Loading thumbnail…

Example

This example demonstrates a static composition of basic geometric shapes rendered as SVG, including green, blue, and red circles, a black-bordered rectangle, a thick navy line, and a single path. The visualization uses raw SVG elements defined directly in the HTML, without any JavaScript libraries or data-binding frameworks. CSS applies a 3000-millisecond transition to the rectangles’ stroke properties, though no animated changes are triggered dynamically. The layout is fixed within a 960-by-500 viewport, with a large margin around the canvas, emphasizing the simple arrangement of shapes over data-driven content.

Ssz2036
84% match
Loading thumbnail…

Hello World

This example displays basic SVG shapes—rectangles, circles, lines, and a path—arranged in a static composition with varied fills, strokes, and transforms. It demonstrates fundamental SVG rendering and styling through CSS classes, including stroke properties and line joins. The code imports D3’s `select` function to update a message element, though the visible output focuses on the hand-coded markup in `index.html`. The visualization uses inline SVG with a 1.5 scale transform and no dynamic data, serving as a simple technical showcase.

Nntds12
82% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamentals of SVG rendering by displaying basic geometric shapes, such as green and red circles, alongside HTML text. It uses the native SVG `<circle>` element with explicit coordinate and radius attributes to position shapes, while the `index.js` file renders a large "Hello World" message with a circle via a JavaScript template literal. The code leverages vanilla JavaScript and inline SVG, with the container’s `innerHTML` set directly to combine styled text and vector graphics. The example highlights how SVG integrates with HTML for simple, declarative data visualization.

AAtwau Pius
82% match
Loading thumbnail…

Data

This example presents a static SVG composition featuring a yellow circle and a red rectangle with a navy stroke. The HTML file defines the SVG elements directly, while a JavaScript module populates the container with a large "Hello World!" text message using inline styles. The visualization combines declarative SVG drawing with programmatic HTML content creation, though no interactive behavior or data processing is demonstrated in the provided code.

Aadrian winston smith
81% match
Loading thumbnail…

Just test

This example demonstrates a simple static composition of geometric shapes, including circles, rectangles, lines, and a path, rendered as inline SVG elements. The visualization is framed by a bold black stroke on the primary shapes, while the secondary line group uses a distinct orange stroke for its path. The page also includes styled HTML text, with a red highlighted list item, and relies on custom CSS for typography and layout. The HTML structure directly embeds the SVG markup, with no external JavaScript libraries required.

Mmimimichelle
81% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering in a static HTML document. It shows several primitive shapes—circles, a rectangle, and a line—positioned on a 700×500 canvas. The code uses the native SVG API directly, with inline attributes like `cx`, `cy`, `r`, `x`, `y`, `stroke`, and `fill` to define geometry and styling. No JavaScript libraries are involved; the shapes are drawn declaratively in markup, and the only script is a console log. The visual output highlights how SVG handles vector graphics through XML elements.

Ccrajy030@mymail.unisa.edu.au
81% match
Loading thumbnail…

svg fundamentals

This example demonstrates fundamental SVG shape creation and styling within a minimal HTML page, showing how basic elements like rectangles, circles, and text can be composed into a structured visual message. The code uses standard web technologies—HTML5, CSS3, and JavaScript—to render a centered, large-font greeting, with the visual result driven entirely by CSS styling rules and a simple JavaScript console log. The rendering approach relies on native SVG capabilities, though the specific shapes are not instantiated in the provided code, focusing instead on foundational layout and styling principles.

Jjiyun_tsai@berkeley.edu
80% match
Loading thumbnail…

SVG Viz

This example shows a static SVG scene that pairs an HTML message with basic geometric shapes rendered as vector graphics. The SVG canvas contains circles, a rectangle, a line, and a path, each with explicit styling attributes like fill, stroke, and stroke-width. The code uses raw SVG elements embedded directly in an HTML page, with minimal CSS applying a large font size to the greeting text. The rendering approach relies on the browser's native SVG support without any JavaScript libraries or data sources.

AAdeelah Mir
80% match