playing with space, shape, colour & composition
<style>
.hexagon {
/* have background colour */
background: #cc1a97;
/* have width and height set */
width: 400px;
height: 300px;
/* call the polygon function, and create any shape you want by creating the dots */
clip-path: polygon(
/* as many dots as you want */
30px 24px,
130px 24px,
130px 74px,
30px 74px,
130px 74px,
180px 74px,
180px 174px,
80px 174px,
80px 224px,
180px 224px,
180px 274px,
30px 274px,
30px 124px,
130px 124px
/* at the end the dots will be connected and
the shape is filled with the background colour */
);
}
</style>
<div class='hexagon'></div>
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.
