This describes creating flowers with 5,6,8,10 or 12 petals of different colors. This is an example:
This is the code:
<!DOCTYPE html>
<html>
<style>
svg{position: absolute;width:100%;height:100%; top: 40px; left: 0; background:aqua}
</style>
<body>
<center><input type=”text” id=”t3″ value = “” placeholder = “# petals (5 6 8 10 12)” /> <input type=”text” id=”t1″ value = “” placeholder = “size” /> <input type=”color” id=”clr1″ value=”#ffffff” /> <input type=”color” id=”clr2″ value=”#ffffbb” /> /> <input type=”button” id= “b1” value = “Undo” onclick=’undo();’ /> <input type=”text” id=”t2″ style=”width: 500px” value=”” ondblclick=’getCode();’/></center>
<svg id=”svg1″></svg>
<script>
var posX; var posY; var l; var l2; var l3; var svgstr = “”; var back = “”; var rot = []; var no; var cnt = -1; var rot5 = [“0deg”,”72deg”,”144deg”,”216deg”,”288deg”]; var rot6 = [“0deg”,”60deg”,”120deg”,”180deg”,”240deg”,”300deg”]; var rot8 = [“0deg”,”45deg”,”90deg”,”135deg”,”180deg”,”225deg”,”270deg”,”315deg”]; var rot10 = [“36deg”,”72deg”,”108deg”,”144deg”,”180deg”,”216deg”,”242deg”,”288deg”,”324deg”]; var rot12 = [“0deg”,”30deg”,”60deg”,”90deg”,”120deg”,”150deg”,”180deg”,”210deg”,”240deg”,”270deg”,”300deg”,”330deg”]; var cnto = 1; var noini = 1;
document.getElementById(“svg1”).onclick = getMouse2;
function getMouse2(e) {
ret = [] ;
cnt = cnto – 2;
posX = e.pageX ;
posY = e.pageY – 25;
no = parseInt(document.getElementById(“t3”).value);
if (no == 5) rot = rot5;
if (no == 6) rot = rot6;
if (no == 8) rot = rot8;
if (no == 10) rot = rot10;
if (no == 12) rot = rot12;
back = document.getElementById(“svg1”).innerHTML;
l = parseInt(document.getElementById(“t1”).value) /2;n
l2 = parseInt(l) * 2.5/no ;
if (no == 5) l2 = parseInt(l) * 2/no ;
if (no == 6) l2 = parseInt(l) * 2.2/no ;
var l3 = l2 * 1.5;
l2 += “”;
l3 += “”;
var str = posX + “px ” + posY + “px”;
for (var i = noini; i <= no + noini – 1; i ++) {
cnt += 2;
document.getElementById(“svg1″).innerHTML += ‘<g id=”g’ + i + ‘”><ellipse id=”e’ + cnt + ‘” rx=”0″ ry=”80″ fill = “none” stroke=”black” stroke-width= “3” /><ellipse id=”e’ + (cnt + 1) + ‘” rx=”0″ ry=”80″ fill=”#ffff99″ /></g>’;
document.getElementById(“g” + i).style.transformOrigin = str;
document.getElementById(“g” + i).style.transform = “rotate(” + rot[i – noini] + “)”;
}
document.getElementById(“svg1″).innerHTML += ‘<ellipse id=”e’ + (cnt + 2) + ‘” rx=”0″ ry=”40″ fill=”brown” />’;
noini += no;
for (var i = cnto; i <= (cnt + 1); i ++) {
document.getElementById(“e” + i).setAttribute(“cx”, posX);
document.getElementById(“e” + i).setAttribute(“cy”, posY – parseInt(l));
document.getElementById(“e” + i).setAttribute(“rx”, l2);
document.getElementById(“e” + i).setAttribute(“ry”, l);
document.getElementById(“e” + i).setAttribute(“fill”, document.getElementById(“clr2”).value);
}
document.getElementById(“e” + (cnt + 2)).setAttribute(“rx”, l3);
document.getElementById(“e” + (cnt + 2)).setAttribute(“ry”, l3);
document.getElementById(“e” + (cnt + 2)).setAttribute(“cy”, posY + “px”);
document.getElementById(“e” + (cnt + 2)).setAttribute(“cx”, posX + “px”);
cnto = i + 1;
document.getElementById(“svg1”).style.backgroundColor = document.getElementById(“clr1”).value;
document.getElementById(“svg1”).innerHTML = svgstr + document.getElementById(“svg1”).innerHTML;
svgstr = document.getElementById(“svg1”).innerHTML;
document.getElementById(“t2”).value = document.getElementById(“svg1”).innerHTML;
document.getElementById(“t2”).focus();
document.getElementById(“t2”).select();
success = document.execCommand(“copy”);
}
function undo() {
svgstr = “”;
document.getElementById(“svg1”).innerHTML = back;
document.getElementById(“t2”).value = document.getElementById(“svg1”).innerHTML;
document.getElementById(“t2”).focus();
document.getElementById(“t2”).select();
success = document.execCommand(“copy”);
}
</script>
</body></html>
The flowers are created with a brown circle center and petals made of ellipses embedded in g elements:
cnt += 2;
for (var i = noini; i <= no + noini – 1; i ++) {
document.getElementById(“svg1″).innerHTML += ‘<g id=”g’ + i + ‘”><ellipse id=”e’ + cnt + ‘” rx=”0″ ry=”80″ fill = “none” stroke=”black” stroke-width= “3” /><ellipse id=”e’ + (cnt + 1) + ‘” rx=”0″ ry=”80″ fill=”#ffff99″ /></g>’;
The are placed by rotation according to the number of petals, this is for 8 petals:
var rot8 = [“0deg”,”45deg”,”90deg”,”135deg”,”180deg”,”225deg”,”270deg”,”315deg”];
document.getElementById(“g” + i).style.transformOrigin = str;
document.getElementById(“g” + i).style.transform = “rotate(” + rot[i – noini] + “)”;
The flowers are placed with an onclick listener:
document.getElementById(“svg1”).onclick = getMouse2;
function getMouse2(e) {
ret = [] ;
cnt = cnto – 2;
posX = e.pageX ;
posY = e.pageY – 25;
no = parseInt(document.getElementById(“t3”).value);
if (no == 5) rot = rot5;
if (no == 6) rot = rot6;
if (no == 8) rot = rot8;
if (no == 10) rot = rot10;
if (no == 12) rot = rot12;
Tips & Tricks 