svg

by ZhenLiu

HTML

<div id="drawing"></div>

JavaScript

"use strict"
var draw = SVG('drawing').size(600,400);
// Draw the Canvas with the width of 600 and height 400

/* This function draw the base(top and bottom base)
It has 3 parameters
1) basex = x position of the base
2) basey = y position of the base
3) c = the color of the base
*/
	function makeBaseD3(basex,basey,c1,c2) {
var TopBase = draw.rect(275,150).fill(c1).stroke({width:3});
TopBase.x(basex); TopBase.y(basey)
var BottomBase = draw.rect(320,35).fill(c2).stroke({width:3});
BottomBase.x(basex-45); BottomBase.y(basey+150)
}
makeBaseD3(70,100,'#98754d','#c39765')

/* This function draw the Ladder
It has 3 parameters
1) Ladderx = x position of the ladder
2) Laddery = y position of the ladder
3) c = the color of the ladder
*/
function makeLadderD3(Ladderx,Laddery,c1) {
var Ladder3 = draw.rect(5,10).fill(c1).stroke({width:3});
Ladder3.x(Ladderx); Ladder3.y(Laddery)
var Ladder4 = draw.rect(5,10).fill(c1).stroke({width:3});
Ladder4.x(Ladderx); Ladder4.y(Laddery+15)
var Ladder5 = draw.rect(5,10).fill(c1).stroke({width:3});
Ladder5.x(Ladderx); Ladder5.y(Laddery+30)
var Ladder6 = draw.rect(5,10).fill(c1).stroke({width:3});
Ladder6.x(Ladderx); Ladder6.y(Laddery+45)
var Ladder7 = draw.rect(5,10).fill(c1).stroke({width:3});
Ladder7.x(Ladderx); Ladder7.y(Laddery+60)
var Ladder8 = draw.rect(5,10).fill(c1).stroke({width:3});
Ladder8.x(Ladderx); Ladder8.y(Laddery+75)
var Ladder9 = draw.rect(5,10).fill(c1).stroke({width:3});
Ladder9.x(Ladderx); Ladder9.y(Laddery+90)
var Ladder10 = draw.rect(5,10).fill(c1).stroke({width:3});
Ladder10.x(Ladderx); Ladder10.y(Laddery+105)
var Ladder11 = draw.rect(5,10).fill(c1).stroke({width:3});
Ladder11.x(Ladderx); Ladder11.y(Laddery+120)
var Ladder12 = draw.rect(5,10).fill(c1).stroke({width:3});
Ladder12.x(Ladderx); Ladder12.y(Laddery+135)
}
makeLadderD3(345,105,'#c39765')
// Ladders which are not labeled in the document
	function LadderD3(Ladderx,Laddery,c1) {
var Ladder1 = draw.rect(5,10).fill(c1).stroke({width:3});
Ladder1.x(Ladderx); 
var...