100%

Superformula

✓ Published0🌍 Public

Last edited Oct 19, 2015

Created on Sep 24, 2015

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.

AI-generated description

hello world

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1021103'>Superformula Explorer</a>

Similar vizzes

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

88% match

Loading thumbnail…

Superformula

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.

Mmbostock

88% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Random world shapes with react July 4,2022 - 2

This visualization presents an abstract, generative composition of 191 rectangular and circular shapes derived from a mathematical sequence. Each shape’s position, size, stroke width, and RGB color are computed from the sequence value and random functions, creating a scattered, non-repeating pattern across an SVG canvas. The code uses React for the component structure, with d3.select and d3.append to construct the SVG container, while the drawing itself relies on SVG primitives. A drop-shadow filter is applied to the shapes via an SVG defs element. The data originates from a formula within the script, not an external dataset, and rendering occurs through ReactDOM.render.

NNita

65% match

Loading thumbnail…

SVG Shapes Dude

A simple, static SVG composition displays overlapping geometric shapes: a large red-stroked blue circle, two yellow rectangles, a red diagonal line, and a white triangular path with rounded joins. The visualization relies entirely on raw SVG elements—circle, rect, line, and path—with stroke and fill attributes set directly in the markup. The embedded CSS file only styles a text class and is unused for the shapes. No JavaScript or data is involved; the rendering approach is purely declarative SVG within an HTML page.

Aarontha

65% match

Loading thumbnail…

SVG Fundamental

This example demonstrates a set of basic SVG shapes—circles and a line—arranged to show fundamental geometric primitives. It presents three circle variations, including a solid black circle, a two-tone circle with a light gray outer ring and purple inner fill, and a light blue circle, followed by a thick red horizontal line. The rendering uses raw SVG elements defined directly in the HTML, with inline styling for fills and strokes. Hover effects apply a CSS transform to scale the circle and line shapes on mouseover. No external libraries are used; the visualization relies solely on native SVG markup and CSS.

Ppaddyokore39@gmail.com

64% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates foundational SVG graphics with nested circles forming a target-like shape and two animated curved paths. It shows how basic geometric primitives combine to create a visual hierarchy, with the outer circle acting as a frame and inner circles layered by size and fill color. The paths use quadratic Bezier curves and animate their opacity through SVG’s native `<animate>` element, specifying keyTimes and values over a ten-second loop. The code relies on raw SVG markup and a small JavaScript console log, with no external libraries or data binding.

Tthedatacurious

64% match

Loading thumbnail…

SVGFoundermentals

This visualization demonstrates basic SVG shape composition, rendering two overlapping circles on a 950×500 canvas. The larger green circle (radius 250) sits beneath a smaller blue circle (radius 200), creating a layered effect through their offset centers. The code uses plain SVG elements within an HTML document, relying on native SVG attributes like `cx`, `cy`, and `r` for positioning and sizing. No JavaScript or external libraries are involved; the circles are styled directly with `fill` properties and arranged statically to explore spatial relationships and color contrast.

Bbseigha

64% match

Loading thumbnail…

Shapes with SVG

This example demonstrates a static SVG composition of geometric shapes, including circles and rectangles with varying fill colors, a transformed group, and line and path elements styled through CSS. The page also loads an asynchronous data set of cars, filtering and formatting those under $2000 into a bulleted report using custom JavaScript functions. Rendered in React with raw SVG markup, the visualization pairs basic vector graphics with a practical coding exercise in data processing.

BB Sundaresan

64% match