Skip to main content
SimilarExport ZIP
100%

Fork of Exercise 1

✓ Published0🌍 Public
Wwgloss
Last edited Mar 12, 2021
Created on Mar 12, 2021
Forked from Exercise 1

This example displays the flag of the Seychelles as a static SVG graphic, constructed from five colored polygon shapes within a 300-by-150 viewBox. The code uses raw JavaScript and inline SVG elements, including `<svg>` and `<polygon>` tags, to render the flag’s diagonal bands of blue, yellow, red, white, and green. No external libraries or data processing are involved; the visual is defined entirely by hardcoded coordinate points and CSS style properties for fill colors. The page is a minimal HTML document that demonstrates direct SVG manipulation without any framework or dynamic behavior.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Exercise 1

This example renders a stylized flag of the United States using raw SVG elements. The graphic is composed of a dark blue rectangle for the canton and a series of red horizontal stripes, with a single white polygon representing a star. The code directly constructs the SVG markup in the HTML file, specifying each shape's coordinates and fill style. It relies on the browser's native SVG rendering through the `rect` and `polygon` elements, without any external JavaScript libraries or dynamic data. The design is static and purely declarative.

Wwgloss
83% match
Loading thumbnail…

Fork of Fork of Flags

This example displays a sequence of two national flags—Palestine and Artsakh—rendered full-screen using SVG elements created via the Document Object Model API. The code constructs each flag programmatically with colored rectangles and paths, including a red chevron for Palestine and a geometric white block pattern for Artsakh. The script attempts to cycle through the flags with a `setTimeout` loop that appends each group to an SVG container; however, the timing logic contains a bug, so the visualization initially shows only the last flag appended. React framework is noted in metadata, though the implementation uses vanilla JavaScript and direct SVG manipulation.

Jjustinhersom@gmail.com
75% match
Loading thumbnail…

Flags

This example renders a stylized flag by dividing the browser viewport into three horizontal bands of black, white, and green, then overlaying a red chevron shape. It uses raw SVG creation via the Document Object Model (`document.createElementNS`) and sets attributes directly on SVG `rect` and `path` elements. The flag’s dimensions adapt to the full window size, and the chevron is drawn with an absolute path command. No external libraries are used, only native JavaScript and SVG APIs.

Jjustinhersom@gmail.com
75% match
Loading thumbnail…

Fork of HTML Starter

This example shows a static CSS flag followed by an animated SVG flag with a waving effect. The first SVG renders three colored rectangles and a black line using plain SVG elements. The second SVG attempts to animate the flag’s shape by referencing a wave path in `<defs>` and applying `<animate>` elements, though the animation targets the `d` attribute on rectangles, which does not visibly change their geometry. It uses the SVG API for shapes and animation, without external libraries.

GGrigoriHarutyunyan
74% match
Loading thumbnail…

J Exercise 1

This visualization demonstrates a static composition of overlapping geometric shapes that form an abstract flag-like design, built entirely with Scalable Vector Graphics. The piece combines a large rectangle filled with a white-to-black linear gradient, overlaid with semi-transparent yellow, red, and blue bands, alongside a green circle and a rotated square. The only dynamic element is a thick red line that animates its horizontal endpoints back and forth, while also subtly shifting vertically through an SVG `<animateMotion>` path. The code relies on core SVG elements like `<rect>`, `<line>`, `<circle>`, and `<animate>`, with no external JavaScript libraries.

Zzaioris
74% match
Loading thumbnail…

SVG Exercise

This example uses React and renders a static SVG scene directly in HTML, demonstrating basic shapes like rectangles, polygons, circles, and lines. The image depicts a night sky with stars, a large moon, a grassy field, and a small tree, all created with hard-coded SVG attributes. The code relies on standard SVG elements as part of the React component's output, with minimal CSS for text styling. No data or external libraries are used; the visualization is purely an exercise in manual SVG positioning and styling within a single HTML file.

KKiranmayi Vadlamudi
74% match
Loading thumbnail…

Fork of Svg exercise

This example uses React and inline SVG to render a fixed composition: a red circle centered at (350, 350) with three black lines radiating outward, a navy-bordered rectangle spanning the left region, and the italicized red text "Titan" positioned to the right. The SVG elements are styled using a CSS class defined in the page’s `<style>` block, which sets the text’s font size, fill, stroke, and stroke width. The code directly declares SVG shapes (`circle`, `line`, `rect`, `text`) with explicit coordinate attributes, demonstrating a static vector graphic created without external libraries or data binding.

RRakshith0405
74% match
Loading thumbnail…

Exercise1:Indian Flag

A static SVG rendering of the Indian flag uses three horizontal rectangles in orange, white, and green, with a black-outlined circle at the center. The code defines these shapes directly in HTML, with the orange band and circle featuring `<animate>` elements that move them across the viewport on a repeating 15-second loop. The white and green bands remain fixed, while the animation shifts the sliding elements between -100px and 960px, creating a simple motion effect. No external libraries are used; the visualization relies solely on native SVG and CSS rules from the linked stylesheet.

Nnubhatia
73% match