Skip to main content
SimilarExport ZIP
100%

Fork of Flags

✓ Published1🌍 Public
Jjustinhersom@gmail.com
Last edited Dec 3, 2023
Created on Dec 3, 2023
Forked from Flags

This visualization displays two flags side by side: Palestine and Artsakh, each constructed with the SVG DOM API using `createElementNS` and `setAttribute`. The Palestine flag is built from three horizontal color bars and a red chevron path, while the Artsakh flag uses a custom palette of red, blue, and gold with a white stepped pattern. The layout is responsive to the window dimensions, with the flag elements sized proportionally to the viewport.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
92% 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 Vel's Fork of Sol LeWitt US Flag with d3.

This example renders a Sol LeWitt-inspired US flag using D3 v6, constructing the image through layered SVG shapes and mask filtering. The code computes flag dimensions from a base unit and applies red and blue masks to overlapping horizontal and vertical rectangles, generating the striped field and canton. Alternatively spaced star symbols, created with `d3.symbol` and `symbols[4]`, are positioned across the canton to complete the composition.

SSantiago Toso
71% match
Loading thumbnail…

Fork of 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.

Wwgloss
70% match
Loading thumbnail…

FLAG

This is a static SVG visualization of a simplified flag made from three vertical rectangles colored green, yellow, and red. It shows how categorical color and horizontal position are mapped from a small inline JavaScript array of data objects, with each record containing a fill value and an x coordinate. The example uses d3.select, d3.append, and the .enter() selection API from d3.v4 to construct the rectangles, relying on SVG attributes like width, height, and fill. The data is defined directly in the code rather than loaded from an external file.

LLaurynKW
70% match
Loading thumbnail…

FLAG

This is a static SVG visualization of a simplified flag made from three vertical rectangles colored green, yellow, and red. It shows how categorical color and horizontal position are mapped from a small inline JavaScript array of data objects, with each record containing a fill value and an x coordinate. The example uses d3.select, d3.append, and the .enter() selection API from d3.v4 to construct the rectangles, relying on SVG attributes like width, height, and fill. The data is defined directly in the code rather than loaded from an external file.

LLaurynKW
70% match
Loading thumbnail…

Fork of Sol LeWitt US Flag with d3 -.

This example recreates Sol LeWitt’s geometric interpretation of the US flag using D3.js. It renders a full-screen SVG with horizontal and vertical stripes defined by mask elements, producing the flag’s red and blue regions through layered rectangles. Fifty white star symbols are positioned in a grid within the canton area, using D3’s symbol generator. The piece demonstrates how algorithmic composition and masking techniques can construct a recognizable national flag from basic geometric primitives.

FFrancesco Di Filippo
70% match
Loading thumbnail…

Fork of Fork test 2

This visualization displays a set of geometric shapes, including paths and rectangles, arranged in a static composition. The SVG elements use a defined color palette and some rectangles have hover effects, while a JavaScript script dynamically generates and appends an additional 100 horizontal rectangles, which overlay the existing shapes to create a striped pattern. The page is built with raw HTML, CSS, and JavaScript, using the React framework for the project structure, and renders entirely as SVG.

Zzaioris
70% match