Gist a8e5298b38b4f19fc2865612c90ddbcb

100%

Gist a8e5298b38b4f19fc2865612c90ddbcb

✓ Published0🌍 Public

Last edited Dec 12, 2019

Created on Dec 12, 2019

The visualization is a single SVG badge featuring a 46-by-46-pixel geometric star-shaped emblem with a central number "1" rendered in a bold, centered style. The star is formed by a complex polygon with 23 vertices, creating a spiked outline. The code uses raw SVG elements, including a `polygon` and a `text` element, with a CSS class (`cls-1`) applied to the text for styling. The rendering approach is purely vector-based, relying on static SVG markup without any JavaScript libraries or dynamic data. The badge likely represents a numeric score or rank, with the star shape serving as a decorative frame.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 67b47524ed8ed829d021

This animated SVG visualization, rendered with D3.js, explores how geometric forms can be generated through code. The page loads a script called `circle-lattice.js` that draws a grid of small, semitransparent red rectangles, each with a faint stroke trail that animates to show their movement or placement over time. The layout is minimal—a single heading "Scripts" above the canvas—and the emphasis is on the lattice of shapes as they are built and possibly repositioned, revealing structural patterns through the animation. The visualization uses D3's data-binding and SVG rendering to create a dynamic, generative composition.

11wheel

68% match

Loading thumbnail…

svg star

This example shows a simple geometric star composed of five black line segments arranged on a blank SVG canvas. The code uses raw SVG elements, specifically `<line>` tags, with hardcoded `x1`, `y1`, `x2`, and `y2` attributes to define each stroke, creating the outline of a five-pointed star shape. Rendered as static vector graphics, the visualization relies entirely on standard SVG syntax without any JavaScript or additional libraries, and the shape is fixed in the HTML markup without interactivity or data binding.

Aaissatheprogrammer

67% match

Loading thumbnail…

D3 Shapes - Star shaped scatter plot

Six points, plotted along the x-axis from 0 to 500, each render as a hollow, gray star symbol. The visualization demonstrates D3’s `d3.symbol()` generator with the `d3.symbolStar` type and a fixed `size(80)`, applied as the `d` attribute for every SVG `<path>`. All stars share the same path data, and their positions come from a hardcoded `points` array, translated via each datum’s coordinates. The example uses a static SVG container with a `g` element, showing how a single generated symbol can be reused through D3’s data join.

SSubhendu Karmakar

66% match

Loading thumbnail…

Untitled

A star-like geometric figure is drawn on an SVG canvas, consisting of five points arranged in a circle around a central hub. Radial spokes connect the center to each point, while connecting lines form the outer pentagon shape, with small circles marking each vertex. The visualization is built using D3 v7, where `d3.range` generates the point coordinates via trigonometric calculations, and chained selection methods like `selectAll` and `enter` append the SVG circles and lines.

Mmasphel

66% match

Loading thumbnail…

D3 Unconf Badge

A black canvas displays an animated cluster of concentric, rotating square outlines that continuously enlarge and shift. The visualization updates every four seconds, generating a new set of 60 layered rectangles that scale and rotate around the center, creating a pulsing, geometric badge effect. Built with D3 v4, the code uses `d3.transition` for smooth 4-second animations, `d3.interval` to trigger periodic updates, and SVG `rect` elements with CSS transforms for rotation. Each frame recalculates rectangle positions via scaling and rotation math, producing an evolving spiral-like pattern on a stark black background.

KKevinGutowski

66% match

Loading thumbnail…

other flag

The visualization depicts a stylized national flag composed of three horizontal bands: a dark cyan field, a yellow central stripe, and a black-edged triangle on the left. It shows the flag’s geometric layout using basic SVG shapes—a large rectangle, a smaller yellow rectangle, and a polygon for the triangle—all positioned within a fixed 960 by 500 pixel canvas. Built with D3 v4, the code appends these shapes directly to the SVG container using `d3.select` and shape methods like `append` and `attr`. The rendering relies solely on static SVG attributes, with no data binding or interactive behavior.

CCraftbd

66% match

Loading thumbnail…

500 glowing dots

Five hundred glowing dots scatter across a dark, square SVG canvas. Each dot consists of a larger outer circle filled with a cyan radial gradient and a smaller, brighter white inner circle created using SVG `radialGradient` definitions. A plain `for` loop generates the dots at random positions within a fixed boundary, using D3 v4 to append `circle` elements and apply CSS classes for styling. The result is a dense, luminous field of varied-sized orbs against a near-black background.

PPatrick Wojda

65% match

Loading thumbnail…

A pseudo visualization from a Figma exported SVG

A hand-built scatter plot rendered as a single inline SVG with hardcoded coordinates, drawn from a Figma export rather than generated programmatically. The chart displays ten circular points over a simple Cartesian axis, with red y-axis labels and one highlighted red point. The code uses no external JavaScript libraries, relying instead on raw SVG elements such as circle, path, and text. It serves as a test of extracting exported design markup directly through browser developer tools.

YYiorgos Bagakis

65% match