FLRN #11: Trirclesquares

<div id="box">

  <canvas id="animation" width="400" height="400"></canvas>

  <div id="note">

    Made by <a href="https://codepen.io/ImagineProgramming" target="_blank">Bas</a>, inspired by this <a href="https://flrn-gif.tumblr.com/post/116319247625" target="_blank">FLRN GIF</a></a>

  </div>

</div>

$dark:   #262626;

$light:  #dcdcd2;

$vsize:  400px;

​

*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

} 

​

html, body {

  padding: 0;

  margin: 0;

}

​

body {

  background: #202020;

  font-family: Roboto;

  color: #454545;

  a {

    text-decoration: none;

    color: #9a9a9a;

​

    &:hover {

'use strict';

​

const key = (x,y) => (x << 16) | y; // generate a key for a dictionary based on an x and y

const props = (rt, i) => { return {rotateType: rt, rotateInterval: i}; }; // generate a property object for a subject

const width = 400; // canvas width

const height = 400; // canvas height

const segments = 8; // canvas is divided in segments

const tickDuration = 600; // the duration of a single tick

const animDuration = 400; // the duration of a full animation

const size = width / segments; // size of one segment

const colours = ['#f6b53e', '#83c44a', '#18a396', '#1f76ba', '#61328b', '#c02985', '#e82860', '#eb5c3d'];

const properties = {

  [key(0, 0)]: props(-1, 1), // d1 - rotate left   every 1 tick

  [key(1, 0)]: props(-1, 2), // d2 - rotate left   every 2 ticks

  [key(0, 1)]: props(1, 2),  // d2 - rotate right  every 2 ticks

  [key(2, 0)]: props(0, 1),  // d3 - rotate toggle every 1 tick 

  [key(1, 1)]: props(1, 1),  // d3 - rotate right  every 1 tick

  [key(0, 2)]: props(-1, 1), // d3 - rotate left   every 1 tick