Esperimenti html-css-svg

100%

Esperimenti html-css-svg

✓ Published0🌍 Public

Last edited Sep 6, 2019

Created on Sep 6, 2019

A simple SVG sketch arranges five green circles in a cross-like pattern inside a larger black square frame. The example demonstrates basic vector rendering with raw HTML and SVG elements, using a `circles` class to apply fill color and a separate `rect` element for the outline. The CSS file sets a monospace font and defines the circle styling, while the JavaScript files contain only placeholder messages, indicating no interactive behavior is present.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello HTML

This example displays a simple static composition of three black-outlined circles on a yellow background, with a large central circle flanked by two smaller ones. The visualization is built using raw SVG elements embedded directly in an HTML page, with no external JavaScript libraries. It demonstrates basic SVG rendering by setting explicit coordinates, radii, fill colors, and stroke properties on circle elements within a fixed 960 by 500 viewport. The page uses minimal CSS to remove margins and hide overflow, focusing entirely on the vector shapes.

Ppurritola

81% match

Loading thumbnail…

SVG Funda

This example demonstrates the basics of SVG rendering without any external libraries, using only the native `<svg>` element embedded directly in HTML. The code draws three circles at varying positions and sizes, showcasing how the `CX`, `cy`, `r`, and `fill` attributes control shape placement, dimensions, and color. The first circle has a radius of 700, while the subsequent green and red circles are smaller and offset. The page relies on static SVG markup within the body, providing a minimal introduction to declarative vector graphics in the browser, with no interactivity or dynamic data.

AAWLGAWLG

81% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates a grid of solid-color circles arranged to show basic SVG shape construction and layering. It uses inline SVG markup within an HTML document to render ten circles with varying radii and colors, including a stack of nested circles at the right center. The circles are positioned using explicit `cx` and `cy` coordinates, with `fill` attributes defining their color. No external libraries or JavaScript are involved; the rendering relies entirely on the browser’s native SVG support, making it a static, code-only illustration of fundamental vector graphics primitives.

WWannabeProgrammerr

81% match

Loading thumbnail…

SVG Principio

This example demonstrates a basic SVG scene composed of three circles positioned horizontally, with the first circle using the default black fill and the other two explicitly colored blue and green. A thin blue rectangular outline frames the entire drawing area, while an incomplete line element with an empty x1 attribute suggests an unfinished or minimal structure. The code uses raw SVG markup within an HTML document, relying on standard SVG circle, rect, and line elements. The rendering approach is purely declarative, with no JavaScript libraries or data sources involved.

DDRDoom201

80% match

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG rendering with a series of four circles displayed in a row, each with a radius of 50 units. The first circle is unfilled, while the subsequent circles use red, green, and blue fills. The page is built with a minimal HTML structure that embeds the SVG directly in markup, with basic CSS styling for a large text greeting message. It utilizes raw SVG circle elements without any JavaScript libraries or data processing.

EEJennings25

80% match

Loading thumbnail…

SVG Tests HTML/CSS/SVG

A set of static SVG shapes demonstrates the effects of CSS and SVG transforms. Circles, rectangles, and a line are drawn directly in the markup, some with explicit fills and strokes, while a surrounding group applies a non-uniform scale. A nested group uses translation and rotation, with inherited stroke properties and a lightgreen fill. The page loads a linked stylesheet that resets the body margin and hides overflow, affecting the canvas presentation. No JavaScript or interactions are present.

LLuiz Domingues

80% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes using native SVG elements within an HTML document. It renders three circles with different radii and colors (white, purple, and cyan) alongside a single path that combines circular arcs and quadratic curves to form a leaf-like shape with a magenta fill and hot pink stroke. The drawing relies on SVG’s XML-based markup, including the `viewBox` attribute for coordinate scaling and inline attributes for shape geometry. The code includes an `index.js` file that merely logs “hello world” and a `styles.css` referencing a `.message` class not applied to any elements.

Eellie.ackerson26@gmail.com

80% match

Loading thumbnail…

SVG Fundamental

This example demonstrates basic SVG shape rendering, showing circles and rectangles with varied fill colors, stroke properties, and dimensions. The code uses raw SVG elements like `<circle>` and `<rect>` within an HTML document, with attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` controlling appearance. A large outlined rectangle with a blue stroke frames the composition, while a smaller yellow rectangle with a navy border provides contrast. The rendering relies entirely on native SVG markup without additional JavaScript libraries.

Nnoverhalomoan98

80% match