📑 Style Workout 01: d3 color interpolation

style_01.html

d3 color interpolation

<script src='https://d3js.org/d3.v6.min.js'></script> was added in the page head.

xxxxxxxxxx

 

1

%%html

2

<style>

3

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

4

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

5

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

6

</style>

7

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

8

Color Interpolation in Text Displaying</h1>

9

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

10

Background Interpolation in Text Displaying</h1>

11

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

12

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

13

Canvas Drawing in Headers

14

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

15

<script>

16

var tc=setInterval(function() {

17

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

18

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

19

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

20

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

21

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

22

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

23

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

24

    var r=10,n=7;

25

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

26

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

27

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

28

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

29

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

30

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

31

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

32

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

33

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

34

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

35

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

36

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

37

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

38

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

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages