Superformula

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 11, 2011

The Superformula gallery displays 22 distinct geometric shapes generated from parametric equations, with each small blue shape representing a named superformula variant. Clicking any small shape animates the large central square into that shape’s form via a 500-millisecond `transition` that interpolates the path’s control points using `d3.superformula` and `.attr("d", …)`. The visualization uses D3 v3 with SVG rendering, leveraging ordinal scaling for shape placement and both small and large path elements styled with CSS hover effects.

AI-generated description

Christophe Viau implemented a new shape type as a D3 plugin based on superformulas. One nice property of these shapes is that you can easily tween between two shapes by simply interpolating the control points. Click on the blue shapes to try it!

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Superformula

This interactive visualization explores the superformula, a mathematical equation capable of generating a wide variety of organic and geometric shapes. Users select from 21 preset shapes (e.g., asterisk, heart, gear) in a left-side control panel, and the main SVG viewport renders the corresponding parametric curve. Sliders for each superformula parameter—m, n1, n2, n3, a, and b—let users adjust the shape in real time. The control panel also provides buttons to download the current shape as an SVG or PNG file. The visualization is built with D3.js and uses the d3.superformula plugin to generate the paths.

HHypercubed

88% match

Loading thumbnail…

Superformula

A single SVG path displays a superformula shape, with a set of slider controls for adjusting its parameters (m, n1, n2, n3, a, b) and buttons to switch among 21 named presets such as asterisk, circle, star, and heart. The code builds the shape using the d3.superformula plugin, which generates the path from a polar equation, and renders it via d3.svg.line. Sliders update the shape in real time through D3’s selection and property binding.

Mmbostock

84% match

Loading thumbnail…

Shapes

The visualization displays a collection of basic geometric shapes—an ellipse, rectangle, and circle—colored individually and grouped to illustrate SVG styling and transformation. A second group applies a uniform fill and stroke, while a line and an unclosed path demonstrate stroke properties and line joins. The example is built with d3.v5, using the `select` API to target the SVG, and relies on raw SVG elements and CSS classes for rendering, with a fixed viewport enforced by the stylesheet.

Bbakstorage00001

68% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes as a static gallery, including circles, rectangles, lines, and paths with varied fills, strokes, and coordinate positions. It shows the difference between filled, stroked, and unfilled shapes within a 1000x1000 viewport. The rendering is achieved through raw SVG markup embedded directly in the HTML, requiring no scripting or D3 functions for the visualization itself. The accompanying `index.js` file shows likely unused D3 imports and a local ES6 module, though these do not affect the visible graphic.

IIan Mac Moore

68% match

Loading thumbnail…

geoShape

Six parametric curves define custom shapes on a sphere, each generated by a `d3.geoShape().generator(t)` function. These shapes animate, changing their position, size, and form every 800 milliseconds. The visualization uses D3 v4's `d3.geoPath` with a `d3.geoConicEqualArea` projection to render the sphere and the shapes as SVG paths. The shapes, filled with semi-transparent colors from `d3.schemeCategory10`, demonstrate how the `geoShape` generalization of `d3.geoCircle` creates diverse closed forms.

PPhilippe Rivière

67% match

Loading thumbnail…

Shapes Practice

Animated SVG composition of 300 rectangles and 300 circles, rendered with D3 v6 in a React framework. Rectangles initially draw as thin gray strokes, then transition to transparent fills with pink outlines before expanding to fill the entire canvas. Circles begin as large transparent rings with thin white strokes that thicken, then shrink to small points while drifting downward. Transitions sequence over 15-20 second durations, creating a slow rhythmic interplay of shape transformations across the 960x500 viewport.

MModalMBS

67% match

Loading thumbnail…

D3 Shapes

This example displays the seven built-in D3 symbol types (circle, cross, diamond, square, star, triangle, and wye) rendered as stroked SVG paths along a horizontal scale. It uses `d3.symbol()` with a `d3.scaleLinear()` to position each shape, and applies each symbol generator via `d3[d]` lookups. Labels below each path show the corresponding API name. The data is a static array of symbol type strings, with the visualization rendered entirely in SVG.

SSubhendu Karmakar

67% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid with varied fill and stroke styling. It demonstrates how CSS classes and inline attributes control shape appearance, including a group with a light blue fill and black stroke, plus a separate group of lines with a thick round-joined stroke. The visualization uses plain SVG markup within an HTML file, linked to an external stylesheet, and does not rely on D3 or any JavaScript libraries. The shapes are scaled uniformly via an SVG transform.

Rreo440

67% match