Fork of Ellipse flower - image

100%

Fork of Ellipse flower - image

✓ Published9🌍 Public

Last edited Dec 29, 2022

Created on Sep 15, 2022

Forked from Ellipse

This visualization generates an abstract flower-like composition by rendering 500 translated and rotated ellipse pairs with a color gradient. Each ellipse is created using the React-based `Ellipse` component, which draws two overlapping ellipses with swapped radii. The code positions these shapes based on random x and y coordinates scaled by progress, applies rotation, and adds a colored circle at each point. The SVG output sits atop a green-to-black gradient background, with a fixed vector path logo overlaid, showcasing procedural generation through React and SVG.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Ellipse flower - image

A generative flower-like visualization fills an SVG canvas with hundreds of randomly positioned ellipses and circles, each colored by a gradient that shifts from green to red. The code maps over an array of 501 indices, using each index to compute pseudo-random x/y coordinates and RGB color values. React components `Ellipse` and `Circles` render nested ellipse pairs and small circles. A large embedded SVG path depicts a hand-drawn image, overlaid on a linear-gradient background defined in the HTML style block.

Ggayathrikavya

94% match

Loading thumbnail…

Fork of Fork of Ellipse flower - image

A generative composition scatters 500 rotating ellipse pairs across a green-to-black gradient background, each frame anchored by a small circle. The image derives from a fixed SVG path depicting a leaf, scaled and overlaid near the center. Built with React and SVG, the code maps an array of indices to random positions and rotation angles, varying RGB fill colors based on progress. An `Ellipse` component renders paired ellipses with swapped radii, while the background employs a CSS linear gradient and the leaf path uses inline path data.

Ddeepika-dpka

93% match

Loading thumbnail…

Fork of Fork of Ellipse flower - image

A generative flower composed of hundreds of overlapping, rotated ellipse pairs and circles radiates from the center of an SVG canvas. Each ellipse pair draws two crossed shapes with swapped radii, while a smaller circle sits at their intersection. The 500 elements are positioned with random x and y coordinates scaled by an index, creating a scattered, organic bloom against a dark green-to-black gradient. Colors shift from dark reds to warm oranges as the index increases, rendered with React and SVG primitives.

Yyasmeenha

93% match

Loading thumbnail…

Fork of Fork of Ellipse flower - image

A generative floral composition scatters five hundred ellipse pairs across a dark green gradient background, each pair rotated and colored procedurally. The React component renders SVG shapes, using the `Ellipse` component to draw crossed ellipses with a nested circle at each position, with fills derived from the loop index. Random `Math.random()` calls determine x and y coordinates, while rotation angles increment by fifty degrees per iteration, creating an organic, pseudo-random flower-like pattern.

CCH SAMPATH

92% match

Loading thumbnail…

Fork of Fork of Ellipse flower - image

This example renders a stylized floral pattern by combining two overlapping ellipses at each designated center point. The visualization uses React to define a reusable `Ellipse` component that draws both a horizontal and vertical ellipse, creating a flower-like motif. The page background is a CSS linear gradient transitioning from green to black, while the ellipses are filled with a solid color. The rendering relies on React’s UMD build and standard SVG `<ellipse>` elements, with the component’s `cx`, `cy`, `rx`, and `ry` properties controlling position and size.

RRajayaswanthvarmavegesna

91% match

Loading thumbnail…

Fork of Fork of Ellipse flower - image

This visualization displays a stylized cosmic scene featuring a yellow sun at the center against a green-to-black gradient background, surrounded by 50 randomly positioned white stars. Approximately 100 ellipses and circles are scattered across the canvas, each rotated and colored dynamically based on their index. The graphic is rendered as an SVG using React, with each ellipse and circle pair positioned via random translation, rotated by 50 times their index, and filled with RGB colors derived from their proportional position.

Ppraveennayak1702@gmail.com

90% match

Loading thumbnail…

Fork of Flowers

The visualization shows a dark green gradient field filled with 501 randomly positioned elliptical flowers, each composed of two crossed ellipses and a central circle. The flowers scatter outward from the center as they scale in size and shift through red, orange, and yellow color palettes. Built with React and rendered as SVG, the code generates each flower from the Ellipse component, using a shadow filter, random x/y coordinates, and a rotation angle. Color values derive from an index-based progress variable mapped to RGB strings.

KKirsten Lund

88% match

Loading thumbnail…

Ellipse

A generative SVG visualization scatters 501 ellipses and circles across a 960-by-500 canvas with a green-to-black gradient background. Each pair is positioned randomly, rotated by an incrementing angle, and colored with RGB values derived from its index proportion. The React component renders nested `<ellipse>` and `<circle>` elements, with two overlapping ellipses per point to create varied shapes. The code uses React 16.10 and ReactDOM with programmatic loops and Math.random for placement.

NNita

85% match