HW1

by Zhaoliang

HTML

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

JavaScript

"use strict"
let draw = SVG('drawing') 
draw.size(600, 400);

// redbox
let redboxbase = draw.rect(600,400)
redboxbase.fill('white');
redboxbase.stroke('red');

// roofs

let roof1 = draw.polygon("175,175 375,25 575,175").fill("#ff9900")
roof1.stroke('black').stroke({width:2})

let roof= draw.polygon("25,175 225,25 425,175").fill("#8a8a5c")
roof.stroke('black').stroke({width:2});

//housebody

let housebody = draw.rect(550,200).x(25).y(175).fill("#99994d")
housebody.stroke('black').stroke({width:2});

//door
let door=draw.rect(105,125).x(300).y(250).fill("#c0c059")
door.stroke("black").stroke({width:2});

let door1=draw.rect(95,120).x(305).y(255).fill("#996600")
door1.stroke("black").stroke({width:2});

//lower windows

let window2= draw.rect(225,150).x(50).y(200).fill("#c0c059")
window2.stroke("black").stroke({width:2})
window2.radius(10); 

let window22= draw.rect(215,140).x(55).y(205).fill("#b3f0ff")
window22.stroke("black").stroke({width:2})
window22.radius(10);

let window3= draw.rect(125,150).x(425).y(200).fill("#c0c059")
window3.stroke("black").stroke({width:2})
window3.radius(10);

let window33= draw.rect(115,140).x(430).y(205).fill("#b3f0ff")
window33.stroke("black").stroke({width:2})
window33.radius(10);

//toper windows

let window1= draw.circle(100).cx(225).cy(110).fill("#c0c059")
window1.stroke("black").stroke({width:2});

let window11= draw.circle(80).cx(225).cy(110).fill("#b3f0ff")
window11.stroke("black").stroke({width:2});

//windowlines

let windowline1= draw.line(225,70,225,150).stroke({width:2})
let windowline2= draw.line(185,110,265,110).stroke({width:2})
let windowline3= draw.line(55,275,270,275).stroke({width:2})
let windowline4= draw.line(430,275,545,275).stroke({width:2})

//handle

let handle= draw.circle(15).cx(375).cy(325).fill("black")


//I dont know how to creat a mouth for the smileface, so I using two circles.

let smileface2=draw.circle(20).cx(347).cy(310).fill("#FFFF00")

let...