This app generates 3d SVG text in various colors and with various fonts. Here is an example of how it appears:
This is the code:
<!DOCTYPE HTML >
<html>
<head><style>
body{}
input {position: relative}
</style></head>
<body>
<input type=”text” id=”t1″ style=”” placeholder=”text” /> <select id=”s2″><option>font</option><option>Georgia</option><option>Arial</option><option>Arial Black</option><option>Times New Roman</option><option>Courier New</option><option>Georgia</option><option>Verdana</option><option>Comic Sans MS</option></select> <select id=”s1″ onchange=’drw();’><option>color</option><option>red</option><option>green</option><option>blue</option><option>gold</option><option>orange</option><option>magenta</option><option>cyan</option><option>silver</option><option>brown</option><option>purple</option></select> <input type=”button” value = “Save” onclick=’sve();’ /> <input type=”checkbox” id=”ch1″ value=”” />small change
<svg id=”svg1″ style=”position:absolute;left:10px;top:50px;width:1500px;height:200px;background: #ffffaa”></svg>
<script>
var lft = 20; var tp = 70; var r = 55; var col = []; var oldURL = “3Dtext.svg”; var wd = 1500; var ht = 200; var s1 = document.getElementById(“s1”); var s2 = document.getElementById(“s2”);
document.onkeydown = rsize;
function rsize(e) {
if (e.key == “ArrowLeft”) {
if(document.getElementById(“ch1”).checked) {
wd -= 1;
} else {
wd -= 70;
}
document.getElementById(“svg1”).style.width= wd + “px”;
}
if (e.key == “ArrowRight”) {
if(document.getElementById(“ch1”).checked) {
wd += 1;
} else {
wd += 70;
}
document.getElementById(“svg1”).style.width= wd + “px”;
}
if (e.key == “ArrowUp”) {
ht –;
document.getElementById(“svg1”).style.height= ht + “px”;
}
if (e.key == “ArrowDown”) {
ht ++;
document.getElementById(“svg1”).style.height= ht + “px”;
}
}
function drw() {
document.getElementById(“svg1″).innerHTML = ”;
lft = 0;
tp = 70;
if(s2.value == “Comic Sans MS” || s2.value == “Verdana”) tp += 5;
if (s1.value == “red”) col = [“#553333″,”#773333″,”#993333″,”#bb4444″,”#dd4444″,”#ff4444”];
if (s1.value == “green”) col = [“#335533″,”#337733″,”#339933″,”#33aa33″,”#33bb33″,”#33cc33”];
if (s1.value == “blue”) col = [“#333355″,”#333377″,”#333399″,”#4444bb”,”#5555dd”,”#5555ff”];
if (s1.value == “gold”) col = [“#555500″,”#777700″,”#999900″,”#aaaa00″,”#bbbb00″,”#cccc00”];
if (s1.value == “orange”) col = [“#553300″,”#774400″,”#995500″,”#aa6600″,”#bb7700″,”#cc8800”];
if (s1.value == “magenta”) col = [“#550055″,”#770077″,”#990099″,”#aa00aa”,”#bb00bb”,”#cc00cc”];
if (s1.value == “cyan”) col = [“#005555″,”#007777″,”#009999″,”#00aaaa”,”#00bbbb”,”#00cccc”];
if (s1.value == “silver”) col = [“#555555″,”#777777″,”#999999″,”#bbbbbb”,”#dddddd”,”#eeeeee”];
if (s1.value == “brown”) col = [“#553311″,”#774422″,”#885533″,”#996644″,”#aa7755″,”#bb8866”];
if (s1.value == “purple”) col = [“#550044″,”#770066″,”#990088″,”#aa0099″,”#bb00aa”,”#cc00bb”];
s1.value = “color”;
for (var i = 0; i <= 5; i ++) {
lft += 2;
tp += 2;
document.getElementById(“svg1″).innerHTML += ‘<text x=”‘ + lft + ‘” y=”‘+ tp + ‘” fill=”‘ + col[i] + ‘” font-size=”100″ font-family=”‘ + document.getElementById(“s2″).value + ‘” font-style=”italic” >’ + document.getElementById(“t1”).value + ‘</text>’;
}
}
function sve() {
document.getElementById(“svg1”).style.backgroundColor = “white”;
var textToSave = ‘<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?> <svg xmlns:svg=”http://www.w3.org/2000/svg” xmlns=”http://www.w3.org/2000/svg” width=”‘ + wd + ‘” height=”‘ + ht + ‘” id=”svg1″ >’ + document.getElementById(“svg1”).innerHTML + ‘</svg>’;
//alert(textToSave);
var textToSaveAsBlob = new Blob([textToSave], {type:”text/plain”});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
fileNameToSaveAs = prompt(“FileName to save as”,oldURL);
oldURL = fileNameToSaveAs;
var downloadLink = document.createElement(“a”);
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = “Download File”;
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = “none”;
document.body.appendChild(downloadLink);
downloadLink.click();
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
}
</script>
</body></html>
The main function is named drw(). it sets up a series of svg text elements at incremented locations to give a gradient effect:
for (var i = 0; i <= 5; i ++) {
lft += 2;
tp += 2;
document.getElementById(“svg1″).innerHTML += ” + document.getElementById(“t1″).value + ”;
}
The chosen color is derived from a series of arrays:
if (s1.value == “purple”) col = [“#550044″,”#770066″,”#990088″,”#aa0099″,”#bb00aa”,”#cc00bb”];
The svg element was created larger than the string that would be embedded and then resized to fir te text. The reason for the slight color is to see it as igt resizes. The saved file has no color.
This is the resizing code:
function rsize(e) {
if (e.key == “ArrowLeft”) {
if(document.getElementById(“ch1”).checked) {
wd -= 1;
} else {
wd -= 70;
}
document.getElementById(“svg1”).style.width= wd + “px”;
}
if (e.key == “ArrowRight”) {
if(document.getElementById(“ch1”).checked) {
wd += 1;
} else {
wd += 70;
}
document.getElementById(“svg1”).style.width= wd + “px”;
}
if (e.key == “ArrowUp”) {
ht –;
document.getElementById(“svg1”).style.height= ht + “px”;
}
if (e.key == “ArrowDown”) {
ht ++;
document.getElementById(“svg1”).style.height= ht + “px”;
}
}
The code for the saved svg file has the following appearence:
The code for the saved svg file has the following appearence:
<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?> <svg xmlns:svg=”http://www.w3.org/2000/svg” xmlns=”http://www.w3.org/2000/svg” width=”147″ height=”200″ id=”svg1″ ><text x=”2″ y=”72″ fill=”#553333″ font-size=”100″ font-family=”Georgia” font-style=”italic”>res</text><text x=”4″ y=”74″ fill=”#773333″ font-size=”100″ font-family=”Georgia” font-style=”italic”>res</text><text x=”6″ y=”76″ fill=”#993333″ font-size=”100″ font-family=”Georgia” font-style=”italic”>res</text><text x=”8″ y=”78″ fill=”#bb3333″ font-size=”100″ font-family=”Georgia” font-style=”italic”>res</text><text x=”10″ y=”80″ fill=”#dd3333″ font-size=”100″ font-family=”Georgia” font-style=”italic”>res</text></svg>
The main function is named drw(). it sets up a series of svg text elements at incremented locations to give a gradient effect:
for (var i = 0; i <= 5; i ++) {
lft += 2;
tp += 2;
document.getElementById(“svg1″).innerHTML += ” + document.getElementById(“t1″).value + ”;
}
The chosen color is derived from a series of arrays:
if (s1.value == “purple”) col = [“#550044″,”#770066″,”#990088″,”#aa0099″,”#bb00aa”,”#cc00bb”];
The svg element was created larger than the string that would be embedded and then resized to fir te text. The reason for the slight color is to see it as igt resizes. The saved file has no color.
This is the resizing code:
function rsize(e) {
if (e.key == “ArrowLeft”) {
if(document.getElementById(“ch1”).checked) {
wd -= 1;
} else {
wd -= 70;
}
document.getElementById(“svg1”).style.width= wd + “px”;
}
if (e.key == “ArrowRight”) {
if(document.getElementById(“ch1”).checked) {
wd += 1;
} else {
wd += 70;
}
document.getElementById(“svg1”).style.width= wd + “px”;
}
if (e.key == “ArrowUp”) {
ht –;
document.getElementById(“svg1”).style.height= ht + “px”;
}
if (e.key == “ArrowDown”) {
ht ++;
document.getElementById(“svg1”).style.height= ht + “px”;
}
}
The code for the saved svg file has the following appearence:
resresresresres
‘;
‘;
Tips & Tricks 