Published
Edited
Nov 28, 2019
html`
<svg>
<defs>
<path id="blade" d="M0 0 l40 0 l-40 5 Z" />
</defs>
<g transform="translate(40, 40)">
<path id="monopile" d="M-2 0 l-10 80 l24 0 l-10 -80 Z" />
<g id="blades">
<use href="#blade" />
<use href="#blade" transform="rotate(120, 0, 0)" />
<use href="#blade" transform="rotate(240, 0, 0)" />
</g>
<circle id="rotor" cx="0" cy="0" r="10"></circle>
</g>
</svg>
`
html`
<style>
#blades {
stroke: black;
fill: white;
}
#blades{
animation-name: ckw;
animation-duration: 5s ;
animation-iteration-count: infinite;
}
@keyframes ckw {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</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.
