<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="514" height="514" onload="createCircles(16,evt);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <style type="text/css"><![CDATA[ .blackedge{stroke:black;} ]]></style> <script type="text/ecmascript" xlink:href="bytehex.js"/> <script type="text/javascript"><![CDATA[ // The variable "face" takes one of 0, 1, 2, 3, 4 or 5 to specify // which of the six faces of the color cube will be displayed. var f = parent.document.getElementById('selface'); var face = f.facenum.value; // Pick up the value of "face" from HTML. if (face < 0 || face > 5) face = 0; // Only valid values are allowed. // Specify indices of each of the colors for the 6 cube faces. var rIndex = [2,0,4,1,3,2]; // Red index var gIndex = [0,3,2,2,1,4]; // Green index var bIndex = [4,4,0,4,4,1]; // Blue index // For a given color select whether it is constant, or depends on colors x or y. function cChange(x, y, i) { switch (i) { case 0: return 0; // The selected color is fixed at 0. case 1: return 255; // The selected color is fixed at 255. case 2: return x; // The selected color increases with color x. case 3: return 255-x; // The selected color decreases with color x. case 4: return y; // The selected color increases with color y. default: return 0; // Default, but should never happen. } } // The main drawing function called up on loading the page. function createCircles(r,evt) { var i,j,cx,cy,r,r1,r2; var rd,gn,bl,xcolor,yColor,fillColor; r1=r+1; r2=2*r; svgdoc = evt.target.ownerDocument; for (j=0; j<16; j++) { // Start the y-loop. cy = r1+j*r2; yColor = 255-j*15; for (i=0; i<16; i++) { // Start the x-loop. cx = r1+i*r2; xColor = i*15; rd = cChange(xColor, yColor, rIndex[face]); // Get red component of RGB. gn = cChange(xColor, yColor, gIndex[face]); // Get green component of RGB. bl = cChange(xColor, yColor, bIndex[face]); // Get blue component of RGB. fillColor = "fill:#"+bytehex(rd)+bytehex(gn)+bytehex(bl); // Generate hex string. svgdoc = evt.target.ownerDocument; node = svgdoc.createElementNS("http://www.w3.org/2000/svg", "circle"); node.setAttribute("cx",cx); // Specify x-coord. of circle. node.setAttribute("cy",cy); // Specify y-coord. of circle. node.setAttribute("r",r); // Specify radius of circle. node.setAttribute("style",fillColor); // Draw circle with black border circ = svgdoc.getElementById("drawcirc"); // and filled with specified color. circ.appendChild(node); } } } ]]></script> <g id="drawcirc" class="blackedge"></g> </svg>