📑 Style Workout 01

%%html

<style>

@import 'https://fonts.googleapis.com/css?family=Akronim';

.gakronim {font-family:Akronim; color:white; text-align:center;}

#canvas001,#canvas002 {width:10%; vertical-align:middle;}

</style>

<h1 id='colorized1' class='gakronim'>

Color Interpolation in Text Displaying</h1>

<h1 id='colorized2' class='gakronim'>

Background Interpolation in Text Displaying</h1>

<h1 id='colorized3' class='gakronim'>

<canvas id='canvas001'></canvas>

Canvas Drawing in Headers

<canvas id='canvas002'></canvas></h1><br/>

<script>

var tc=setInterval(function() {

    var now=new Date().getTime();

    var iddoc1=document.getElementById('colorized1');

    var iddoc2=document.getElementById('colorized2');

    var iddoc3=document.getElementById('colorized3');

    iddoc1.style.color=d3.interpolateSinebow(now/60000);

    iddoc2.style.background=d3.interpolateSinebow(now/60000);

    iddoc3.style.color=d3.interpolateRainbow(now/1000);

    var r=10,n=7;

    var c1=document.getElementById('canvas001'); 

    var context1=c1.getContext('2d');

    var c2=document.getElementById('canvas002'); 

    var context2=c2.getContext('2d');

    c1.style.background=d3.interpolateSinebow(now/60000); 

    c2.style.background=d3.interpolateSinebow(now/60000);

    context1.strokeStyle=d3.interpolateRainbow(now/1000);    

    context2.strokeStyle=d3.interpolateRainbow(now/1000);

    for (var i=1; i<n; i++) {

        context1.beginPath(); context2.beginPath();

        for (var j=0; j<6; j++) {

            context1.arc(60*j,r*(n+.5),i*r,0,2*Math.PI);

            context2.arc(60*j,r*(n+.5),i*r,0,2*Math.PI); };

        context1.stroke(); context2.stroke(); }; },1)