playing with space, shape, colour & composition
<style>
.circle {
width: ${radius}px;
height: ${radius}px;
border-radius: 50%;
mix-blend-mode: ${blend};
position: absolute;
}
.circle-1 {
background: ${circle1};
}
.circle-2 {
background: ${circle2};
left: ${radius/2}px;
}
.circle-3 {
background: ${circle3};
left: ${radius/3}px;
top: ${radius/2}px;;
}
.isolate {
height: ${radius*1.6}px;
isolation: isolate; /* Without isolation, the background color will be taken into account */
position: relative;
}
.wrap {
display: flex;
justify-content: center;
width: ${width - (radius*1.5)}px;
}
</style>
<section class="wrap">
<div class="isolate">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
</section>
<style>
circle {
mix-blend-mode: ${blend};
}
.isolate {
isolation: isolate;
} /* Without isolation, the background color will be taken into account */
</style>
<svg width=${width}px height=${radius*2}px>
<g class="isolate">
<circle cx=${width/2 - radius/4} cy=${radius*0.8} r=${radius/2} fill=${circle1} />
<circle cx=${width/2 + radius/4} cy=${radius*0.8} r=${radius/2} fill=${circle2} />
<circle cx=${width/2} cy=${(radius*0.8) + radius/2} r=${radius/2} fill=${circle3} />
</g>
</svg>
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.
