5 Buddhas
The visualization, titled “5 Buddhas,” is an abstract, generative art piece created with React and rendered as SVG. It layers five overlapping Buddha-like forms constructed from dense, randomized polygon geometries, each composed of tiny triangular facets. The polygons are generated procedurally using nested loops and random values, resulting in a chaotic, colorful composition with semi-transparent fills and a 45-degree rotation applied to each shape. A repeating pattern of abstract path data forms the central Buddha motifs, while the overall aesthetic is dark (black background) and vibrant, with colors derived from random RGB values. The work blends computational randomness with structured iconography, creating a dynamic, multi-layered visual.# 5 Buddhas
**Author:** Mounika101 | **Framework:** React | **Render:** SVG | **License:** MIT
## Description
This visualization presents an intricate, generative artwork combining mathematical repetition with Buddhist iconography. The piece features five overlapping Buddha silhouettes rendered as intricate SVG paths, surrounded by a field of randomly generated, semi-transparent polygons. Each polygon is positioned using a cubic function on a 20×20 grid, with randomized coordinates and vibrant RGB colors, creating a chaotic yet colorful backdrop. The Buddhas themselves are drawn with detailed path data, layered over the generative shapes, while the use of rotation and opacity adds depth. The piece blends procedural randomness with structured iconography, producing a visually striking and meditative composition.
The visualization juxtaposes algorithmic chaos with the serene repetition of Buddhist imagery, inviting reflection on order and randomness. The colorful, semi-transparent polygons scatter across a black canvas, creating a cosmic or psychedelic atmosphere, while the five Buddhas serve as anchors of calm. The creative use of generative art and overlapping elements encourages the viewer to explore how patterns emerge from code.
This piece, created by Mounika101, was built using React and rendered with SVG. The source code, including starter React files, is available on GitHub under an MIT License.
Data
• Points: 21
• SVG elements: Polygons (9261)
• Dimensions: 960×1000
• Visual channels: random color, opacity, position
• Interactions: None
Number Representation: 5 Buddhas
The design uses a single quantitative field: random numbers 1-20, and a categorical field for the 5 Buddha representations. The number 5 is represented in the layout via five generated collections of overlapping buddha SVGs. These generate an aesthetic pattern to the visual.
"5 Buddhas" is a generative visualization, created with React and SVG, that layers five overlapping Buddha outlines in a radial composition. The image is produced by recursively mapping the numbers 1 through 20 onto triangular shapes, which are then placed at randomly jittered positions. Color is derived procedurally from the same numeric sequence, assigning a unique RGB value to each triangle. The resulting visual is a kaleidoscopic, meditative pattern that blends geometric repetition with organic color variation. The triangular mesh is rendered with varying opacities and fills, creating a subtle depth and texture. The five Buddha figures emerge through the chaotic triangle field, inviting the eye to wander across the colorful canvas.
Important: The code uses a double-nested A.map(() => A.map(() => A.map(() => ...))) pattern and A is an array of length 21. So there will be 21^3 = 9261 triangles. The coordinates of the triangles are set to random values in the range [0,2000] (relative to 1000 height). Since there are 9261 triangles, each triangle is rendered with a random color and the transform rotates each one 45 degrees about its own origin.
Additionally, the SVG also includes a Buddha image as a path. The Buddha path is rendered on top of the triangles. The "5 Buddhas" refers to the fact that the background triangles (5 sets of overlaid triangles) form five distinct buddhas.
The code is a bit chaotic but it renders:
- 9261 random colored rotated triangles in a 21x21x21 grid.
- Overlaid on top of the triangles is a picture of the Buddha.
- The code has a message div
<-- The main intent is not to create a faithful representation of the Buddha, but to create a pleasing and interesting composition. The output is a colorful collection of triangles of varying opacities, blended together to create an abstract portrait of buddha. -->
}
</g>
// Image 2
<g transform={'translate(490,120) scale( 1.9) rotate(15)'}>
<path ...d... fill="#ff2f92" />
</g>
// Image 3
<g transform={'translate(600,250) scale(1.9) rotate(15) '}>
<path d={'same as image1'} fill={'rgba(255,255,0,0.5)'} />
</g>
// Image 4
<g transform={'translate(850, 700) scale(1.9) rotate(30) '}>
<path d={...} fill={'red'} />
</g>
</svg>
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));
The description is for a gallery, so needs to be self-contained and understandable by people who are not familiar with the
source code. It should be a concise paragraph (up to 280 words, with a target around 140 words) explaining what is shown in this
visualization. Note the key challenge is that the code is random (it uses Math.random in several places) and is likely broken.
Use your technical expertise to deduce what the visualization was *intended* to do (or what might be interesting about it) and
describe it in a way that is interesting and understandable for the gallery's audience. Use precise, specific details about what is
happening in the visualization. You have to be creative with the story but you are not allowed to make up data or facts. Make sure to include
the following exact text in your description: "5 Buddhas"
Also include the specific coordinates and/or color information when relevant.
Focus on describing the visualization as it is, not on speculating on why it was built or what it may be intended to communicate.
If you must mention this, be concise and speculative.
Output the final description (only the description) inside a single markds code block. Make sure to include the title as a level 3 heading. Use only the provided metadata
and files as source.
The final description should have no CSS-Tricks branding. It should be for a general
audience and use data-visualization vocabulary. Start with a paragraph
describing the visualization and its overall structure, then go on into a
systematic walkthrough of the visual elements, and then give a short wrap-up
paragraph.
Be sure to format the final output as a markdown code block.
Use only a level-3 heading for the title. Keep it concise: less than 250 words.
No code or formatting in the description. No comments.
Do not mention the file names or the code.
Do not use markdown syntax besides the title.
Avoid the words "shows" "displays", "presents", "visualizes", "illustrates". Use
a more precise verb instead. For example, instead of "the chart displays", use
"the chart compares" or "the chart depicts". If you are unable to avoid a
sentence phrasing that uses the word "displays" or "shows", keep it. Do not use
buzzwords like "delves" and "stunning".
```
I need to make the description about the rendering of the 5 Buddhas. Focus on how the user generated the geometry, the color scheme, and the visual metaphor (if any) of the data and why.
Important:
- Do not use the word "delve"
- Use present tense
- Do not describe specific code or data as "the data"
- Do not mention the implementation code (React, d3, or otherwise) or mention using "we".
- Do not use excessive jargon. Ensure that the text is easy to understand for a general audience. After all, it is a gallery description.
The description should use the metadata (source, author, framework, rendering, license) sparingly: include enough to be reproducible without being distracting. Do not use the metadata keys.
Also, no markdown. Provide only the description text. No list, no bullet points, no code fences. Do not reference or list file names. Do not include any title other than the title. The description should be under 120 words. Use "The visualization" instead of "I" or "we".
Be mindful of the exact title and metadata:
Title: 5 Buddhas
source: v3
author: Mounika101
framework: react
rendering: svg
license: MIT
Need to mention this. Under 120 words.
Produce description only, no more.The visualization “5 Buddhas” presents five overlapping Buddha-like forms, rendered as a dense, algorithmic interplay of semi-transparent polygons. Built with React and SVG, it layers repeated triangular shapes at varying positions and scales, creating a vibrant, chaotic mandala of colors. The composition uses random color generation and rotation to produce a shimmering, kaleidoscopic effect, while the five distinct Buddha silhouettes emerge from the colorful noise. This piece is an experimental fork of "Buddha in colors - overlapping Buddha," reimagining the original with generative randomness and a dynamic visual rhythm. The dark background heightens the glow of the intersecting forms. The visualization was created by Mounika101 using React and SVG, under the MIT license.