063 Transmogrifying circles / Saneef H. Ansari

Saneef H. Ansari

Consultant Designer & Developer

Workspace

Public

re(plicas + mixes)

Edited

May 23, 2023

Fork of Template / SVG Sketch

•

2 forks

15 stars

re(plicas + mixes)

067 Tessellated tangrams 066 Side walk on a rainy day 065 144 Trapeziums 064 Blank arcade

063 Transmogrifying circles

062 Mugshots 061 Last 30 seconds 060 Overprinted discs 059 Lazy polygons 058 Hexmaze 057 Dreaming shapes 056 Connections 055 Letter grid 054 Koch curve 053 Fizzled grid 052 Lines on a 5×5 grid 051 Sol Lewitt’s ‘Lines of One Inch, Four Directions, Four Colours’050 Sol Lewitt’s wall drawing 289 049 Dots and lines 048 Blending ratios 047 Squares using pen on paper 046 Tetrahedrons 045 Monochromatic squares 044 Fifteen silly ways to draw a line 043 One way to arrange lines 042 Misregistered 041 Running in circles 040 Dancing to the noise 039 Deformed Rectangles 038 x raised to y mod n 037 Shapes on a QuadTree 036 Wolfram’s Rules 30, 90, 110 and 184 035 Dancing Lines 034 Sol LeWitt’s Successive Lines 033 Directional Tiles 032 A Bunch of Lines 031 Lorenz Attractor 030 Karel Martens’s Kinetic Work 029 Map of Somewhere 028 Piet Mondrian 027 Peaks of Shards 026 Dots in Motion 025 A Pack of Circles 024 Squares on Markov Chain 023 Moon rise 022 Tensile Roof 021 Arrangements 020 Squares and Arcs 019 Sierpiński carpet 018 Squiggles II 017 Squiggles 016 Some Triangles 015 Some Rectangles 014 Joy Division 013 Study in Lightness 012 Truchet tiles 011 Triangles 010 Shapes with Shapes 009 Lines #3 008 Perlin Noise Halftones 007 '10 PRINT' Pattern 006 Wandered Dot 005 Wandering Dot 004 Lines #2 003 Lines #1 002 Circles #2 001 Circles #1

sketch.draw(t)

minRadius = strokeWidth / 2

maxRadius = 4.5 * radius

function initSketch({ centres, w, h, debug, strokeWidth = 1 } = {}) {

const negativePadding = maxRadius;

const svg = htl.svg`<svg width=${w} height=${h} viewbox=${[

negativePadding,

w - 2 * negativePadding,

h - 2 * negativePadding

]}>`;

d3.select(svg)

.append("rect")

.attr("width", w)

.attr("height", h)

.attr("fill", palette.bg);

const circles = d3

.select(svg)

.append("g")

.attr("class", "circles")

.style("mix-blend-mode", palette.blend ?? "normal")

.selectAll(".circle")

.data(centres)

.join("circle")

.attr("class", "circle")

.attr("r", 1)

.attr("fill", "none")

.attr("stroke", palette.fg)

.attr("cx", (d) => d[0])

.attr("cy", (d) => d[1]);

if (debug) {

const debugG = d3.select(svg).append("g").attr("class", "debug");

debugG

.selectAll("circle")

.data(centres)

.join("circle")

.attr("r", 1)

.attr("fill", palette.debug)

.attr("cx", (d) => d[0])

.attr("cy", (d) => d[1]);

debugG

.selectAll(".hexagon")

.data(centres)

.join("path")

.attr("class", "hexagon")

.attr("transform", (d) => `translate(${d[0]},${d[1]})`)

.attr("fill", "none")

.attr("stroke", palette.debug)

.attr("stroke-width", 1)

.attr("d", hexbin.hexagon());

}

function draw(T = 0) {

const t = eases.sineInOut(T);

const r = math.lerp(minRadius, maxRadius, t);

circles.attr("r", r);

}

return Object.assign(svg, { draw });

}

centres = hexbin.centers()

hexbin = HB()

.extent([

[0, 0],

[w, h]

])

.radius(radius)

w = Math.max(400, width)

h = Math.floor(w / aspectRatio)

aspectRatio = 640 / 400

// palette = ({

// bg: "hsl(0,0%,95%)",

// fg: "hsl(0,0%,5%)",

// debug: "#f0f"

// })

palette = ({

bg: "#0A005A",

fg: "#8B743D",

// blend: "multiply",

debug: "#f0f"

})

formatPercentage = d3.format(".2%")

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more