In the example below a cube is drawn from several polygons. It is given no fill and a white stroke to contrast with a black background, giving a wireframe:
In the second example a near white fill ia given. If the stroke were to remain white, it would be almost impossible to see and the cube would no longer appear so. It is therefor given a color complementary to the fill color to provide contrast.
This descibes how to do this.
This is the code:
<!DOCTYPE html>
<html>
<style>body{background-color: black}</style>
<body>
<center><input type=”color” id=”clr1″ style=”position:relative ” value=”#000000″ onchange=”setColor();”> <input type=”text” id= “t1″ style=”position:relative ” value=”” placeholder = “rgb or hex” /><br>
<svg id=”svg1″ style=”position: relative; width: 100%; height: 700px; “> </svg></center>
<script>
var ptX = [600,800,800,600]; var ptY = [100,100,300,300]; var ptX2 = [640,840,840,640]; var ptY2 = [70,70,270,270]; var ptX3 = [800,840,840,800]; var ptY3 = [100,70,270,300]; var ptX4 = [600,600,640,640]; var ptY4 = [300,100,70,270]; var ptX5 = [600,640,840,800]; var ptY5 = [100,70,70,100]; var ptX6 = [600,640,840,800]; var ptY6 = [300,270,270,300];
str = ‘<polygon id = “poly1” points = “‘;
for (var i = 0; i <=3 ; i ++ ) {
str+= ptX2[i] + ‘,’ + ptY2[i] + ‘ ‘;
}
str += ‘ ” style=”fill: none; stroke:white; stroke-width: 2″ />’;
document.getElementById(“svg1”).innerHTML = str;
str = ‘<polygon id = “poly4” points = “‘;
for (var i = 0; i <=3 ; i ++ ) {
str+= ptX5[i] + ‘,’ + ptY5[i] + ‘ ‘;
}
str += ‘ ” style=”fill:none; stroke:white; stroke-width: 2″ />’;
document.getElementById(“svg1”).innerHTML += str;
str = ‘<polygon id = “poly5” points = “‘;
for (var i = 0; i <=3 ; i ++ ) {
str+= ptX6[i] + ‘,’ + ptY6[i] + ‘ ‘;
}
str += ‘ ” style=”fill:none; stroke:white; stroke-width: 2″ />’;
document.getElementById(“svg1”).innerHTML += str;
str = ‘<polygon id = “poly2” points = “‘;
for (var i = 0; i <=3 ; i ++ ) {
str+= ptX3[i] + ‘,’ + ptY3[i] + ‘ ‘;
}
str += ‘ ” style=”fill:none; stroke: none; stroke-width: 2″ />’;
document.getElementById(“svg1”).innerHTML += str;
str = ‘<polygon id = “poly3” points = “‘;
for (var i = 0; i <=3 ; i ++ ) {
str+= ptX4[i] + ‘,’ + ptY4[i] + ‘ ‘;
}
str += ‘ ” style=”fill:none; stroke: none; stroke-width: 2″ />’;
document.getElementById(“svg1”).innerHTML += str;
str = ‘<polygon id = “poly0” points = “‘;
for (var i = 0; i <=3 ; i ++ ) {
str+= ptX[i] + ‘,’ + ptY[i] + ‘ ‘;
}
str += ‘ ” style=”fill:none; stroke:white; stroke-width: 2″ />’;
document.getElementById(“svg1”).innerHTML += str;
function setColor() {
var tmp = document.getElementById(“clr1”).value;
for (var i = 0; i <=5; i ++) {
document.getElementById(“poly” + i).style.fill = tmp;
}
var typ = document.getElementById(“t1”).value;
var colstr = getHexComplement(tmp,typ);
for (var i = 0; i <=5; i ++) {
if (i != 2 && i != 3) {
document.getElementById(“poly” + i).style.stroke = colstr;
}
}
}
function getHexComplement(val,type) {
var res;
if (type == “rgb”) {
res = “rgb(” + (255 – parseInt(val.substr(1,2),16)) + “,” + (255 – parseInt(val.substr(3,2),16)) + “,” + (255 – parseInt(val.substr(5,2),16)) + “)”;
} else {
var r = (255 – parseInt(val.substr(1,2),16)).toString(16);
if (r.length < 2) r = “0” + r;
var g = (255 – parseInt(val.substr(3,2),16)).toString(16);
if (g.length < 2) g = “0” + g;
var b = (255 – parseInt(val.substr(5,2),16)).toString(16);
if (b.length < 2) b = “0” + b;
res = “#” + r + g + b;
}
return res;
}
</script></body></html>
The first part draws the cube:
str = ‘<polygon id = “poly1” points = “‘;
for (var i = 0; i <=3 ; i ++ ) {
str+= ptX2[i] + ‘,’ + ptY2[i] + ‘ ‘;
}
str += ‘ ” style=”fill: none; stroke:white; stroke-width: 2″ />’;
document.getElementById(“svg1”).innerHTML = str;
str = ‘<polygon id = “poly4” points = “‘;
for (var i = 0; i <=3 ; i ++ ) {
str+= ptX5[i] + ‘,’ + ptY5[i] + ‘ ‘;
}
str += ‘ ” style=”fill:none; stroke:white; stroke-width: 2″ />’;
document.getElementById(“svg1”).innerHTML += str;
str = ‘<polygon id = “poly5” points = “‘;
for (var i = 0; i <=3 ; i ++ ) {
str+= ptX6[i] + ‘,’ + ptY6[i] + ‘ ‘;
}
str += ‘ ” style=”fill:none; stroke:white; stroke-width: 2″ />’;
document.getElementById(“svg1”).innerHTML += str;
str = ‘<polygon id = “poly2” points = “‘;
for (var i = 0; i <=3 ; i ++ ) {
str+= ptX3[i] + ‘,’ + ptY3[i] + ‘ ‘;
}
str += ‘ ” style=”fill:none; stroke: none; stroke-width: 2″ />’;
document.getElementById(“svg1”).innerHTML += str;
str = ‘<polygon id = “poly3” points = “‘;
for (var i = 0; i <=3 ; i ++ ) {
str+= ptX4[i] + ‘,’ + ptY4[i] + ‘ ‘;
}
str += ‘ ” style=”fill:none; stroke: none; stroke-width: 2″ />’;
document.getElementById(“svg1”).innerHTML += str;
str = ‘<polygon id = “poly0” points = “‘;
for (var i = 0; i <=3 ; i ++ ) {
str+= ptX[i] + ‘,’ + ptY[i] + ‘ ‘;
}
str += ‘ ” style=”fill:none; stroke:white; stroke-width: 2″ />’;
document.getElementById(“svg1”).innerHTML += str;
Changing the color input calls setColor():
function setColor() {
var tmp = document.getElementById(“clr1”).value;
for (var i = 0; i <=5; i ++) {
document.getElementById(“poly” + i).style.fill = tmp;
}
var typ = document.getElementById(“t1”).value;
var colstr = getHexComplement(tmp,typ);
for (var i = 0; i <=5; i ++) {
if (i != 2 && i != 3) {
document.getElementById(“poly” + i).style.stroke = colstr;
}
}
}
The fill is set from the color input and a function getHexComplement(tmp,typ) determines the complementary color to be used for the stroke:
function getHexComplement(val,type) {
var res;
if (type == “rgb”) {
res = “rgb(” + (255 – parseInt(val.substr(1,2),16)) + “,” + (255 – parseInt(val.substr(3,2),16)) + “,” + (255 – parseInt(val.substr(5,2),16)) + “)”;
} else {
var r = (255 – parseInt(val.substr(1,2),16)).toString(16);
if (r.length < 2) r = “0” + r;
var g = (255 – parseInt(val.substr(3,2),16)).toString(16);
if (g.length < 2) g = “0” + g;
var b = (255 – parseInt(val.substr(5,2),16)).toString(16);
if (b.length < 2) b = “0” + b;
res = “#” + r + g + b;
}
return res;
}
The variable type determines whether the returned color is a hex or rgb color.
To return an rgb color the following is used:
res = “rgb(” + (255 – parseInt(val.substr(1,2),16)) + “,” + (255 – parseInt(val.substr(3,2),16)) + “,” + (255 – parseInt(val.substr(5,2),16)) + “)”;
For a hex color the hex output of the color input is converted to red green and blue components:
var r = (255 – parseInt(val.substr(1,2),16)).toString(16);
if (r.length < 2) r = “0” + r;
It is similar for blue and green.
The three values are then combined to a hex value:
res = “#” + r + g + b;
In this case it makes no difference which color value is used, but if it does, either one can be calculated.
Tips & Tricks 