Enoch Ssentumbwe

@Ssents·11 public vizzes

Fork of Fork of Fork of Fork of React Starter

A web page displays a grid of horizontal and vertical black bars overlaid with two circular SVG masks, creating a crosshatch pattern that is visible only within two intersecting circular regions. Using React 18 and D3's `select` and `range`, the code appends an SVG canvas sized to the viewport and generates 100 rectangles in each orientation. The masks, defined via `svg.append('mask')`, combine white and black circles to control visibility, producing a stark geometric composition centered on the screen.

Jul 15, 2024

Loading thumbnail…

Fork of Fork of Fork of React Starter

This visualization shows a grid of horizontal and vertical bars rendered as SVG rectangles, with a circular region left visibly unobscured at the center of the viewport. The code uses D3’s `select` and `range` functions to generate 100 bars in each orientation across the full window dimensions. Two SVG masks, created via D3’s `append` and `attr` methods, control visibility: one mask contains a white circle over a black background, while the other inverts this pattern. The bars display fine black stripes outside the circular mask area, producing a clean intersecting line pattern.

Jul 15, 2024

Loading thumbnail…

Fork of Fork of React Starter

This example uses React and D3 to create a full-window SVG grid of horizontal and vertical stripes. A pair of circular SVG masks selectively reveals the underlying patterns: one circle is punched out of a white rectangle to show the vertical stripes, while a second white circle exposes the horizontal stripes. The code builds the masks and rectangles imperatively via D3's `select` and `join`, with `range` generating the stripe positions. The result is a simple, mask-driven optical illusion where the two stripe directions appear only within their respective circular regions.

Jul 15, 2024

Loading thumbnail…

Fork of React Starter

A grid of thin black horizontal and vertical strips forms a woven texture across the full viewport. Two circular masks reveal the underlying pattern: the first mask, created with a white rectangle and black circle, isolates a circular region where vertical strips appear; the second mask, using a white circle on a transparent background, exposes horizontal strips within its boundary. The example uses D3 selections with `join` and `range` to generate 100 rectangles per orientation, and React’s UMD build to mount the document, rendering entirely as SVG.

Jul 15, 2024

Loading thumbnail…

Fork of Fork of React Starter

A generative grid pattern emerges from the intersection of horizontal and vertical black rectangles, masked by two concentric circular windows that reveal only a circular portion of the underlying structure. Built with React and D3 v7, the code constructs an SVG canvas sized to the browser window, using SVG mask elements to define the circular viewports and layering two sets of rect elements in a loop to create the striped composition.

Jul 14, 2024

Loading thumbnail…

Fork of React Starter

This example shows a full-window SVG grid of thin horizontal and vertical rectangles that combine to form a subtle crosshatch pattern. A white circular mask placed at the center of the canvas reveals a clean circular window through the grid, interrupting the lines. Built with React and D3 v7, the code constructs the SVG and its elements using native DOM methods like `createElementNS` and `setAttribute`, rather than JSX or D3 data joins. The grid density and circle radius scale directly with the browser window dimensions.

Jul 14, 2024

Loading thumbnail…

Fork of Smiley Face Part II

A React and D3.js visualization renders a smiley face as an SVG graphic. The face consists of a yellow circle with a black outline, two black eyes, and a mouth drawn as an arc using D3's `arc()` generator. The code uses React for component rendering and D3 v7 for the arc path calculation, with fixed dimensions and coordinates placing the elements on a 960 by 500 canvas.

Jul 4, 2024

Loading thumbnail…

Fork of Let's Make a Face Part I

This example partially constructs a smiley face using a yellow circle for the head and two smaller circles for the eyes, leaving the mouth unfinished. It is built with raw SVG elements—a `circle` for the face and two additional `circle` elements for the eyes, all positioned via explicit `cx` and `cy` attributes. The SVG is rendered inline within an HTML page, using a 960x500 canvas with a black stroke on the head. The code relies on standard SVG markup rather than a JavaScript library.

Jul 4, 2024

Loading thumbnail…

Fork of Let's Make a Face Part I

Jul 4, 2024

Loading thumbnail…

Fork of Fork of Hello HTML

This example shows a yellow circle with a black outline and two smaller circles positioned as eyes, rendered as a static smiley face. The visualization is built entirely with SVG elements inside a React application, using the `react` and `react-dom` libraries to structure the component. It draws shapes directly using `circle` elements with explicit coordinates and styling, and the rendering relies on the browser’s SVG support.

Jul 4, 2024

Loading thumbnail…

Fork of Hello HTML

This example shows a simple static face rendered as three SVG circles: a large yellow circle with a black outline for the head, and two smaller black circles for eyes. The code draws directly to an SVG canvas using React, with the circle elements positioned via explicit `cx`, `cy`, and `r` attributes and styled with `fill` and `stroke`. The React DOM is imported but unused, and the entire rendering is contained within a static HTML file.

Jul 4, 2024