playing with space, shape, colour & composition
Simple canvas particle systemword distribution experimental visualsHarmonic Oscillations: An Interactive Canvas of Dynamic ShapesCanvas dynamic patternSimple canvas polygonRandom force networkits 100.0% rectangle squareusing date as seed for viewSVG hexbin image renderword cloud alternativerandom city landscapeSol LeWitt Wall DrawingStrange Attractors v1Morphological TableD3 | parametric equationsI am inexpressibleTeam clusters using circle packingTeam groupingTeam waffleLaurie Anderson quotes — type playpoly-linear scale with css radial gradientInterpolate along lineV60 coffee | James Hoffmann recipewaffle timeSVG clipPath using d3columns/divisonsUK waffle mapforce animationCluster packing
interpolating two strings
<div class="type-string">
<h3>${string}</h3>
</div>
interpolatorValue
interpolatorValue/100 // needs normalised value 0 to 1
string = d3.interpolateString("What does SOCIETY look like IN THE year 2050?", "What does SOCIETY look like IN THE year 2150?")(interpolatorValue/100)
<hr>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=Space+Mono&display=swap');
.type-string {
font-family:'Cormorant Garamond', monospace;
/* background: #ff616b; */
background: repeating-linear-gradient(
90deg,
#e62e73 0px 2px,
#33ff7d 0px 4px
);
mix-blend-mode: multiply;
box-sizing: border-box;
padding: 10% 20%;
}
h3 {
display: flex;
align-items: center;
justify-content: center;
font-size: 108px;
line-height: 100%;
text-align: center;
color: #fff;
font-weight: 700;
background: #e62e73;
mix-blend-mode: multiply;
padding: 5% 0%;
}
</style>
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.
