lusttail Hello HTML

100%

lusttail Hello HTML

✓ Published0🌍 Public

Last edited Jan 10, 2025

Created on Jan 10, 2025

This example arranges basic SVG shapes—circles, a rectangle, a line, and a path—on a 960×500 canvas to create a static geometric composition. The SVG elements are styled with fill colors and strokes, while CSS hover rules trigger smooth 3000ms transitions on rectangles and 1500ms transitions on circles, altering their fill and stroke. The page is a minimal HTML document with inline styles and no external libraries. The rendering uses raw SVG markup directly in the HTML, with shapes positioned at fixed coordinates.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

First project <Hello HTML>

This example shows basic SVG shapes—circles, rectangles, lines, and a path—placed on a 960-by-500 canvas. It demonstrates how CSS styling and hover states can animate color and stroke width over three seconds using transitions, with blue strokes and fills that shift to green on rectangles and white on circles when hovered. The code uses raw SVG elements defined directly in HTML, with all interactivity driven by CSS `:hover` rules and the `transition` property, though no external libraries like D3 or JavaScript are involved in the rendering.

Ssorokovikovm2@gmail.com

79% match

Loading thumbnail…

HTML Starter

This example demonstrates a static collection of SVG shapes, including circles and rectangles, arranged in groups and transformed with scaling and translation. The visualization uses raw SVG markup within an HTML page, with elements styled through inline attributes and a linked CSS file that removes margins and hides overflow. The first group applies a uniform scale of 1.5, while the second group shifts shapes downward and applies a blue fill with a black stroke; the third group contains lines and a path drawn in green and black. The code relies solely on native SVG elements and CSS, with no JavaScript libraries or data binding.

NNadya Minkova

79% match

Loading thumbnail…

HTML Starter

This example shows a static collection of SVG shapes—two circles, two rectangles, a line, and a path—arranged on a 960 by 500 canvas. The SVG markup in index.html directly defines each primitive’s coordinates, dimensions, and fill or stroke colors, while style.css resets the page margin, padding, and overflow. The path uses a green stroke and a light blue fill, and the shapes are not animated or interactive.

MMyo Lwin

78% match

Loading thumbnail…

HTML Starter

This example demonstrates basic SVG shape rendering with static, hand-coded data. It shows circles, rectangles, lines, and paths drawn directly in an HTML document, with a black stroke and distinct fill colors like aqua and orange. The visualization uses the SVG API within a simple `index.html` file, applying a scale transformation and a translation to position the elements. No JavaScript libraries are required, as the rendering is purely declarative markup with CSS styling for the overall page layout.

CCornelia

78% 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

78% match

Loading thumbnail…

HTML CSS SVG

This example demonstrates how to draw basic SVG shapes—circle, rectangle, line, and path—within an HTML page, using CSS for styling. The SVG element is scaled and includes nested groups, with the inner group translated and filled with steel blue. JavaScript is not used; only the markup and stylesheet are presented. The CSS applies default margins, hides page overflow, and styles the path with a green stroke while the highlighted class is defined but unused.

PPioustu

78% match

Loading thumbnail…

First lesson Hello HTML

This example demonstrates a basic HTML page containing an inline SVG canvas with primitive shapes—circles, a rectangle, a line, and a path—styled using CSS. The shapes respond to hover events, smoothly transitioning their fill color and stroke width over one second. The SVG uses built-in shape elements, with CSS transitions applied directly to the `<rect>` and `<circle>` tags, while the path draws a green shape using SVG path commands. The rendering is pure SVG, with no external JavaScript libraries.

Ddim4chernov@yandex.ru

78% match

Loading thumbnail…

SVG

This example shows basic SVG shapes—circles, rectangles, lines, and a path—arranged in a static composition with varied fill colors and stroke styles. The code uses plain Scalable Vector Graphics (SVG) elements directly in the HTML, including a `<g>` group with `transform` attributes for scaling and translation. A CSS class named `.lines` applies black strokes and rounded line joins to the path, demonstrating how styles can style SVG geometry. No JavaScript libraries are used, and no data is loaded; the rendering relies solely on static markup and CSS.

GGloria Higley

78% match