illusions

100%

✓ Published0🌍 Public

Last edited Jun 7, 2024

Created on Jun 7, 2024

This example presents an optical illusion using overlapping vertical bars on an SVG canvas. The visualization shows a circular aperture in the center of the screen, created by masking a set of thin rectangles. The code uses raw JavaScript and the SVG API, constructing elements like `rect` and `circle` with `createElementNS`, and employs an SVG `mask` to reveal the bars only within the circular region. The result is a dynamic composition that highlights the interplay between geometry and visual perception.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Untitled

This visualization creates a circular aperture effect on a full-screen grid of horizontal and vertical black bars. Using D3 selections and data joins, the code generates 30 horizontal and 80 vertical rectangular strips, then applies two SVG masks with white and black circles at the center to selectively reveal or hide intersections. The result resembles a moiré pattern or camera viewfinder, where overlapping bars form a circular optical illusion against the white background. The implementation uses D3’s `select`, `data`, and `enter` APIs along with SVG mask elements to achieve the layered visual effect.

Ssubratanp

80% match

Loading thumbnail…

sol vanilla JS

This example uses SVG and JavaScript to create a circular viewport that reveals a grid of horizontal and vertical lines. The visualization dynamically builds SVG elements, using masks to carve a circular hole in the background and to clip the vertical stripes inside the circle. The code creates a mask for the horizontal lines, which span the entire window width, and a second mask for the vertical lines, which fill the circle’s height. The result is an optical illusion of intersecting lines, produced entirely with procedural DOM manipulation and CSS styling.

KKerim

77% match

Loading thumbnail…

Untitled

This example renders horizontal and vertical alternating stripes masked by two circles in the center of an SVG canvas. The code uses raw SVG manipulation via `document.createElementNS` to construct masks, rectangles, and elements, with `d3` available as a dependency but not actively used. The first mask reveals horizontal stripes, while the second mask inverts the circle to show vertical stripes outside it, creating a crosshatched visual pattern that fills the viewport. The visualization demonstrates layered SVG masking techniques without data input.

DDuckGorilla

76% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals by drawing two sets of perpendicular parallel lines—horizontal bars from top to bottom and vertical bars from left to right—that intersect to form a grid. Two circular masks are applied to reveal or hide overlapping regions, creating a crossfade effect between the two line groups. The visualization uses D3’s `select`, `range`, and data join methods to generate the SVG elements, and defines two `<mask>` elements with black and white rectangles and circles to control visibility. The rendering relies entirely on SVG attributes like `width`, `height`, and `mask`, with no animation or interaction.

Ssugeelan@hotmail.com

76% match

Loading thumbnail…

Geometry

This example renders a geometric pattern of red vertical and black horizontal bars overlaid on a full-screen SVG. A circular white mask, created with the SVG `mask` element, reveals a clean circular window centered in the viewport, clipping the grid-like arrangement of rectangles. The code builds the visualization entirely with raw JavaScript and SVG APIs, setting attributes like `width`, `height`, `x`, `y`, and `fill` on each `rect`. No external libraries or data sources are used; the composition relies purely on procedural generation and CSS styling for typography.

Cclara7227

75% match

Loading thumbnail…

Sol Lewitt All Shapes

This example reproduces a Sol LeWitt-inspired drawing using overlapping geometric masks. The visualization displays a grid of black bars (vertical and horizontal) that intersect with two rows of outlined circles, created by applying two distinct SVG masks—one inverted and one not—to the bar patterns. The code uses D3.js (v6) to dynamically generate the scene, calculating bar placement based on the browser window’s dimensions. It leverages D3’s `selectAll`, `range`, and `join` methods to efficiently append and configure SVG elements, while `d3.symbol` generates the circle paths. The rendering is fully SVG-based within a React-free environment.

JJoel Wilson

75% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the visual impact of SVG masks, using them to selectively reveal or hide overlapping shapes. It creates a full-screen canvas filled with horizontal and vertical stripes by generating one hundred thin rectangles for each direction. A circular mask isolates a central area where the stripes remain visible, while a second, inverted mask produces a contrasting ring effect by revealing the vertical stripes outside the circle. The code builds the SVG document dynamically through the Document Object Model, creating elements like rectangles and masks using `createElementNS` and `setAttribute` within JavaScript.

MMichael Bell

75% match

Loading thumbnail…

Svg Fun

This example generates an abstract animation using SVG masks and morphing symbols. It displays a grid of rectangular bars that appears to slice through the canvas, with the pattern dynamically changing as the mask content transitions between geometric shapes. The visualization employs d3 selections and transitions to animate the masks sliding in and out over a nine-second duration, while the underlying data cycles through d3 symbols. React manages the rendering, and the SVG elements use inline animation and CSS styling to create the visual effect.

Ddanperkins

75% match