Skip to main content
100%

R = 5em

✓ Published0🌍 Public
Aabernier
Last edited Feb 29, 2012
Created on Feb 29, 2012

This example creates a flower-like geometric pattern using twelve blue circular petals arranged around a red central circle. The design relies entirely on CSS, with the `.flower` class setting the container’s size and background color, while child spans are styled as absolute-positioned blue circles. The `border-radius: 100%` property forms all circles, and the layout is achieved through explicit `nth-child` positioning rules, though the positioning values are left incomplete in the provided code. No JavaScript libraries or external data sources are used; the visualization is purely a static CSS composition.

AI-generated description

Similar vizzes

Loading thumbnail…

Flower pattern with D3

A grid of blue flower shapes, each composed of rotated ellipses around a yellow center, fills the browser window. The pattern demonstrates generating repeated SVG elements with D3’s `select`, `range`, and data joins. Each flower is drawn by appending a group and binding a range of ten numbers to create ellipses at specified angles, while circles mark the centers. The rendering uses SVG; the code explicitly sets attributes for position, size, rotation, and fill.

Sstasiatop@gmail.com
69% match
Loading thumbnail…

Flower pattern with D3 symbols

This example generates a repeating floral pattern across the browser window using D3.js. It renders nine columns and five rows of blue elliptical petals arranged around yellow circular centers, with each flower composed of ten rotated petals. The visualization uses D3's `select`, `append`, and `selectAll` APIs to build SVG elements, leveraging the `range` function to create the petal indices and applying rotation transforms based on calculated angles. The code demonstrates both commented-out explicit data object usage and active range-based iterator approaches for SVG element generation.

Sstasiatop@gmail.com
69% match
Loading thumbnail…

Flower pattern with D3 no .push()

A flower-like grid pattern renders in SVG across the full browser window, with 45 blue elliptical petals and yellow circular centers arranged in a 9x5 layout. The visualization uses D3 v7’s `select` and `join` methods to bind data arrays of angles and center points, applying `rotate` transforms to position each petal around its flower center. No `.push()` mutation occurs; instead, the code computes angle values on the fly and draws circles from a pre-populated array, creating a repeating geometric pattern.

Sstasiatop@gmail.com
68% match
Loading thumbnail…

Flower pattern with D3 + symbols

A grid of flowers is rendered across the canvas, each flower built from five rotated blue ellipses arranged in a circular pattern around a central yellow symbol. The example uses D3 7.9.0 with `select`, `range`, `symbol`, and `symbols` APIs, where each flower’s center symbol is drawn via a `path` using the `symbol(symbols[ind], 500)` function, with the ellipse rotation controlled by a custom transform. The pattern is generated through nested loops, creating a repeating 9-by-5 arrangement, all output as SVG elements.

Sstasiatop@gmail.com
68% match
Loading thumbnail…

Flower SVG

A flower composed of 36 ellipses appears on screen, each petal rotating around a central point to form a full circular bloom. A linear gradient fills the petals, transitioning from red at one end to blue at the other, with black outlines defining each shape. The animation sequentially adds one petal at a time using `requestAnimationFrame`, rendering SVG elements created via the DOM API with `createElementNS` and applying rotation transforms. The visualization runs in a browser, using purely JavaScript-generated SVG without any external data source.

Sstasiatop@gmail.com
66% match
Loading thumbnail…

Flowers

The visualization displays a generative field of flower-like forms, each composed of two overlapping ellipses and a central circle, scattered across a dark green gradient background. As the index of each element increases, its position shifts diagonally and its size and color mutate, creating a sense of depth and organic variation. Built with React and rendered as SVG, the piece uses the `Ellipse` component to draw the cross-shaped petals with a cyan drop shadow filter, while a radial gradient fills the circular core, mimicking a planetary or floral sun. The code relies on React and ReactDOM to assemble and render the 101 elements, using JavaScript’s `Math.random()` to randomize placement and dimensions within the defined canvas.

NNita
65% match
Loading thumbnail…

SVG fundamentals

This example demonstrates a simple SVG scene: five circles arranged to form a flower shape, with four magenta petals surrounding a yellow center. Created using raw HTML, CSS, and JavaScript, the code relies on inline SVG elements rendered directly in the browser. The SVG markup defines each circle's position, radius, and fill color, while CSS styles handle the page layout and typography. It serves as a bare-minimum introduction to the SVG API, showcasing how to draw primitive shapes without external libraries.

RRenato Camapum
65% match
Loading thumbnail…

Flower animation with D3

A generative flower animation rotates twenty blue ellipses around the center of the screen, with each ellipse’s radius and position smoothly expanding and contracting over time. The animation uses D3 v7’s `select`, `range`, and data joins to update SVG ellipse attributes, while a `setInterval` callback advances a time variable that drives a `Math.tanh`-based bloom cycle. The ellipses are rotated incrementally by equal angles to form a radially symmetric pattern.

Sstasiatop@gmail.com
64% match