Superformula

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 12, 2011

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.

AI-generated description

Christophe Viau implemented a new shape type as a D3 plugin based on superformulas.

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

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

84% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG path syntax for drawing custom shapes. It renders two red stroked paths on a 200x100 viewBox using the `d` attribute with arc commands (`A`, `a`), quadratic Bézier curves (`Q`, `q`), and line segments (`M`, `h`). The first path forms a stylized heart-like shape composed of arcs and curves, while the second builds a smaller abstract form from repeated arcs and an open quadratic tail. The code uses plain SVG within an HTML page, with no external libraries or data sources.

WWiebke

68% match

Loading thumbnail…

SVG Fundamental

This example demonstrates basic SVG shapes, including circles, rectangles, lines, and a path, rendered in a 960x500 viewport. One circle uses SMIL animation to pulse its radius, while a rectangle changes fill color and stroke width on hover via CSS transitions. The code relies on native SVG elements and CSS, with no external libraries, and draws a large blue stroke frame around the canvas.

Vvschan2

67% match

Loading thumbnail…

SVG and CSS Shapes

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grouped composition. It shows how CSS classes style SVG elements, applying stroke and fill properties to specific groups. The visualization uses D3.js imports (`select` from D3) to set text content, though the primary rendering is static SVG markup. The code also illustrates nested `<g>` transforms, scaling the entire scene, and using CSS rules like `.lines path` to override stroke colors and line joins.

JJSR2000

67% match

Loading thumbnail…

Fork of SVG Fundamentals

This SVG example demonstrates basic shape primitives and path drawing within a 960-by-500 pixel canvas. Overlapping red and green circles highlight layering and transparency, while a navy diagonal line and a green bezier path built from a compact `d` attribute show coordinate-based positioning. A second black path with mixed absolute and relative commands (`M`, `L`, `l`) illustrates command chaining. The code uses raw SVG elements (`<circle>`, `<line>`, `<path>`) with explicit `fill`, `stroke`, and `stroke-width` attributes, all embedded directly in the HTML file, making the rendering approach fully declarative and static.

Jjesramyep

67% 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

67% match

Loading thumbnail…

SVG Fundementals

This example demonstrates basic SVG shapes and paths. It shows three circles of equal radius positioned horizontally, with the first one using the default black fill and the other two colored red and blue respectively. The visualization also includes a black polyline path with a stroke width of ten pixels, which forms an L-shape on the canvas. The code uses raw SVG elements within an HTML document, defining circles with `cx`, `cy`, and `r` attributes, and a path with a `d` attribute specifying the line coordinates.

Aamrselaraby

66% match