Published
Edited
Sep 20, 2018
{
const dot = document.querySelector('.dot');
let start = 0;
function sine(){
const pos = 50 * Math.sin( start ) + 110;
if(dot && dot.style) {
dot.style.transform = `translate3d(0,${pos}px,0)`;
console.log(50*Math.sin(start));
}
start += 0.05;
}
window.setInterval( sine, 1250/iterations );
}
{
const spinner = document.querySelector('.spinner');
let start = Date.now();
function sine(){
const pos = 50 * Math.sin( start );
var delta = (Date.now() - start);
if(spinner && spinner.style) {
spinner.style.transform = `rotate(${delta * 5/iterations}deg)`;
}
}
window.setInterval( sine, 1250/iterations );
}
{
let [dasharray, rotate, stroke, all] = document.querySelectorAll('circle');
const clock = document.querySelector('.clock');
let start = 0;
let deg = -90;
const [minStroke, maxStroke] = [2,6];
let strokeWidth = minStroke;
let then = Date.now();
const duration = 1250;
let aStart, rafID;
function frame(time) {
if(!aStart) {
aStart = time;
rafID = window.requestAnimationFrame(frame);
return;
}
const progress = (time - aStart) / duration;
let deg = progress * 360;
let transform;
if (progress < 1) {
rotate.style.transform = `rotate(${deg}deg)`;
} else {
aStart = null;
}
rafID = window.requestAnimationFrame(frame);
}
function sine() {
let now = Date.now();
let delta = (now - then) / duration;
//console.log({delta});
then = now;
const pos = 90 * Math.sin( start );
let width = Math.abs(maxStroke * Math.sin( strokeWidth ));
if (width >= maxStroke || width <= minStroke) {
width = 2;
}
if(dasharray && rotate && stroke) {
dasharray.setAttribute('stroke-dasharray', `${Math.abs(pos)} 360`);
//rotate.style.transform = `rotate(${deg}deg)`;
stroke.setAttribute('stroke-width', width);
all.setAttribute('stroke-dasharray', `${Math.abs(pos)} 360`);
all.style.transform = `rotate(${deg}deg)`;
all.setAttribute('stroke-width', width);
}
start += 0.05;
strokeWidth += 0.05;
if (deg >= 270) {
deg = -90;
}
deg += 360 / (duration / (duration * delta));
window.requestAnimationFrame(sine);
}
//const animDashArray(
sine();
rafID = window.requestAnimationFrame(frame);
setTimeout(() => clock.classList.add('running'), 0);
//window.setInterval( sine, 1250/iterations );
}
html`<style>
.container { width: ${width/2}px; height: ${height/2}px; display: flex; justify-content: center; border: 1px solid; }
.dot { width: 40px; height: 40px; border-radius: 50%; background: blue; }
.spinner {
width: 10px; height: 10px; border-radius: 50%; background: green;
transform-origin: center ${width/4}px;
transform: rotate(0deg);
}
.flex {
display: flex;
background-color:#269;
background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:120px 120px, 120px 120px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px
}
.flex svg {
transform: rotate(-90deg);
}
.flex svg circle {
transform: rotate(0);
transform-origin: center;
}
.clock {
width: 100px;
height: 100px;
margin: 10px 0 0 10px;
border-radius: 50%;
background: red;
position: relative;
}
.clock::after {
content: '';
width: 50px;
height: 3px;
background: black;
transform-origin: 0 0;
transform: rotate(-90deg);
position: absolute;
top: 50%;
left: 50%;
animation: clock 1250ms linear infinite;
animation-play-state: paused;
}
.clock.running::after {
animation-play-state: running;
}
@keyframes clock {
0% { transform: rotate(-90deg); }
100% {
transform: rotate(270deg);
}
}
</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.
