Skip to main content
SimilarExport ZIP
100%

Appearance

✓ Published0🌍 Public
AAndrey Matukhno
Last edited Jul 18, 2023
Created on May 1, 2023
Forked from HTML Starter

This example showcases fundamental SVG styling with two separate HTML documents. The first creates a gradient-filled rectangle using a linearGradient definition, a rounded rect element, and text, demonstrating how CSS-like stop colors and gradient coordinates work. The second document constructs a rainbow target from nine concentric circles, each filled with a distinct color, then covers half the shape with a white rectangle. Both use raw SVG elements and attributes in plain HTML, with no JavaScript or external libraries, to illustrate basic vector graphics appearances.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates core SVG fundamentals using four primitive shapes: a circle with a red-to-blue radial gradient, a larger circle with a centered radial gradient, a blue-outlined rectangle, and a red line. The SVG markup defines two radialGradient elements within a defs block, using stop tags to specify color transitions. A linearGradient is also declared but not referenced by any shape. The 800x400 canvas is rendered directly in HTML, with gradients using the url(#id) reference syntax.

Aalexscott-untitled
83% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and CSS styling, using inline SVG elements with circles and rectangles to compose a simple visual arrangement. It shows how CSS properties like fill, stroke, and stroke-width are applied to SVG shapes, with a transition effect on the rectangle. The code uses plain SVG tags (circle, rect) styled via a `<style>` block in the HTML document, featuring circle pairs with varying radii and a single rectangle that changes its fill color and stroke width when hovered. The rendering approach is static SVG markup with no JavaScript interactivity beyond CSS hover animations.

Ssukumardunn
82% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling through a single static page. It draws a rectangle, four circles, two polygonal paths, and a line within an SVG element. CSS defines the rectangle’s red fill, grey stroke, and a two-second transition that changes its fill to green and stroke width on hover. The code uses plain HTML, CSS, and inline SVG attributes like `cx`, `cy`, and `d`, with no external libraries. It illustrates basic vector graphics rendering and declarative styling in the browser.

Mmfgok
81% match
Loading thumbnail…

SVG Fundamentals

This example illustrates fundamental SVG shapes, including two circles and a rectangle, rendered directly within an HTML document. The code uses vanilla JavaScript and CSS within the SVG markup, demonstrating basic attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. It shows how to apply solid colors, outlines, and stroke widths to simple geometric elements, with one circle displayed in its default black fill and another in red. The rectangle uses no fill and an orange stroke.

DDoaaKhaledd
81% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes—a red circle, a yellow rectangle with a blue stroke, and a navy line—rendered directly in an HTML page using the SVG namespace. It shows how CSS styling and inline presentation attributes control the visual appearance of these elements. The second lesson builds on this by adding a CSS `transition` to a rectangle, so hover interactions animate the fill color and stroke width over three seconds. The code uses plain SVG markup with CSS rules, not a JavaScript library like D3 or React.

Ddaigou65
81% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape styling and interactivity through two circles rendered directly in an HTML document. The first circle uses static attributes for fill, stroke, and stroke-width, while the second employs a CSS class with a hover effect that transitions its fill color and adds a stroke over 300 milliseconds. The code uses plain SVG elements, CSS transitions, and inline JavaScript-free markup within a React-free environment, with the SVG canvas placed directly in the body alongside text.

NNico-Nico
81% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles and rectangles—styled with attributes such as fill color, radius, position, and stroke width. The code uses plain SVG elements embedded in an HTML page, with no external libraries or frameworks. Blue and red circles of varying sizes appear in a row, while a yellow rectangle with a navy stroke is positioned below them. The rendering relies entirely on the browser's built-in SVG support, showcasing how to create basic vector graphics through static markup.

Llassouedghazi
81% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling within a minimal HTML page. It shows circles, rectangles, lines, and paths, each with distinct fill, stroke, and coordinate attributes to illustrate basic vector graphics composition. The code uses raw SVG elements embedded directly in the DOM, with a lavender background color specified via an attribute. JavaScript and CSS are not actively employed; rendering relies solely on the browser’s native SVG support, with shapes arranged across a 999 by 839 canvas.

Aandu006@gmail.com
80% match