<body>
<div id="cen">
<button id="but" onclick="javascript:draw()">Click Me</button>
</div>
<svg height="333" width="647" id="taj">
<path id="one" style="fill:none;stroke-width:2px;stroke:red;" d="M38,290 L26,290 L26,297 L644,297 L644,290 L595,290 L598,234 Q593,229 599,224 L600,170 Q595,165 601,160 L601,100 Q596,95 601,90 L601,75 L596,70 L601,70 Q605,59 612,54 Q623,58 626,70 L631,70 L626,75 L626,90 Q631, 95 626,100 L627,160 Q632,165 627,170 L629,225 Q634,230 629,235 L630,290 L487,290 L485,179 L453,174 L400,174 L400,290 L373,290 L373,178 L298,178 L298,290 L271,290 L271,174 L224,174 L191,181 L191,290 L38,290 L39,236 Q34,231 40,226 L41,172 Q36,167 42,162 L44,103 Q39,98 45,93 L45,79 L40,74 L45,74 Q49,60 57,57 Q68,61 70,74 L75,74 L70,79 L70,93 Q75,98 70,103 L71,163 Q76,168 71,172 L72,225 Q77,230 72,235 L73,290"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="base1" d="M188,290 L268,290 L268,244 L230,244 L230,290 L235,290 L235,262 Q239,253 249,249 Q257,253 262,262 L262,290 L215,290 L215,245 L196,249 L196,290 L199,290 L199,260 Q201,254 206,252 Q211,255 213,260 L213,290"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="base2" d="M487,290 L408,290 L408,242 L446,242 L446,290 L441,290 L441,261 Q436,253 426,249 Q416,253 411,261 L411,290 L456,290 L456,244 L482,246 L482,290 L479,290 L479,263 Q477,255 469,251 Q462,255 460,261 L460,290 L397,290"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="window1" d="M196,209 L196,241 L216,239 L216,192 L196,195 L196,209 L200,209 Q201,203 208,199 Q211,201 213,204 L216,205"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="window2" d="M230,208 L230,240, L268,240 L268,190 L230,190 L230,208 L234,208 Q240,199 248,197 Q258,200 263,207 L267,207"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="window3" d="M406,206 L406,239 L445,239 L445,188 L406,188 L406,206 L410,206 Q415,199 425,196 Q432,198 440,206 L444,206"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="window4" d="M457,205 L457,240 L480,242 L480,194 L457,190 L457,205 L460,205 Q463,199 468,199 Q472,202 478,210 L480,210"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="doord" d="M284,278 291,278 L291,173 L380,173 L380,277 L388,277 L388,164 L284,164 L284,278"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="doorin" d="M299,210 Q309,196 335,185 Q353,190 373,213 L373,245 L300,245 L300,240 L373,240"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="doordoor1" d="M326,240 L326,222 L337,215 L348,222 L348,240"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="doordoor2" d="M299,290 L328,290 L328,268 L338,263 L348,268 L348,290 L373,290 L307,290"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="kitiki1" d="M246,290 L246,278 L256,278 L256,290"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="kitiki2" d="M246,239 L246,225 L256,225 L256,239"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="kitiki3" d="M420,290 L420,278 L430,278 L430,290"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="kitiki4" d="M420,239 L420,223 L430,223 L430,239"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="doombase" d="M277,290 L277,151 L396,151 L396,290"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="bars1" d="M38,235 Q55,230 71,235 Q76,230 71,227 Q55,220 38,227"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="bars2" d="M42,173 Q55,169 70,173 Q75,168 70,163 Q55,159 42,164"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="bars3" d="M45,102 L69,102 Q74,97 69,93 L45,93"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="bars4" d="M598,234 Q612,231 629,235 Q634,230 629,225 Q612,222 598,225"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="bars5" d="M600,170 Q614,168 627,170 Q632,165 627,160 Q614,158 600,160"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="bars6" d="M602,100 L626,100 Q631,95 626,90 L602,90"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="bars7" d="M46,74 L73,74 "></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="bars8" d="M601,70 L626,70"></path>
<path style="fill:none;stroke-width:4px;stroke:red;" id="bars9" d="M192,180 L192,160"></path>
<path style="fill:none;stroke-width:4px;stroke:red;" id="bars10" d="M223,175 L223,150"></path>
<path style="fill:none;stroke-width:4px;stroke:red;" id="bars11" d="M450,173 L450,150"></path>
<path style="fill:none;stroke-width:4px;stroke:red;" id="bars12" d="M483,179 L483,160"></path>
<path style="fill:none;stroke-width:4px;stroke:red;" id="bars13" d="M58,57 L58,47"></path>
<path style="fill:none;stroke-width:4px;stroke:red;" id="bars14" d="M613,53 L613,43"></path>
<path style="fill:none;stroke-width:4px;stroke:red;" id="bars15" d="M278,152 L278,130"></path>
<path style="fill:none;stroke-width:4px;stroke:red;" id="bars16" d="M396,152 L396,130"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="doomleft" d="M234,173 L234,156 Q231,153 234,150 Q234,135 256,123 Q267,127 276,139"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="bars17" d="M235,150 L277,150 L277,156 L235,156"></path>
<path style="fill:none;stroke-width:4px;stroke:red;" id="bars18" d="M256,123 L256,110"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="doomright" d="M441,173 L441,154 Q444,151 441,148 Q437,131 418,122 Q408,126 397,143"></path>
<path style="fill:none;stroke-width:2px;stroke:red;" id="bars19" d="M440,154 L398,154 L398,148 L440,148"></path>
<path style="fill:none;stroke-width:4px;stroke:red;" id="bars20" d="M419,122 L419,110"></path>
<path style="fill:none;stroke-width:3px;stroke:red;" id="doom" d="M276,134 Q260,75 337,48 Q418,73 399,135"></path>
<path style="fill:none;stroke-width:4px;stroke:red;" id="bars22" d="M276,133 Q333,118 395,133"></path>
<path style="fill:none;stroke-width:4px;stroke:red;" id="bars23" d="M276,143 Q333,128 395,143"></path>
<path style="fill:none;stroke-width:4px;stroke:red;" id="bars24" d="M338,47 L338,5"></path>
<circle cx="338" cy="40" r="9" id="cir" style="fill:red;stroke:red;stroke-width:0px;"></circle>
<circle cx="338" cy="25" r="6" id="cir1" style="fill:red;stroke:red;stroke-width:0px;"></circle>
</svg>
</body>body{
background-position: 50px 50px;
background-repeat: no-repeat;
}
#taj{
position:absolute;
top:50px;
left:50px;
}
#but{
width:150px;
padding:10px;
color:white;
background:brown;
border-radius:5px;
font-family: Arial;
margin:0px auto;
outline: none;
}
#cen{
text-align:center;
}
#one {
stroke-dasharray:5000px;
stroke-dashoffset:5000px;
transition-timing-function: linear;
transition: stroke-dashoffset 15s;
}
#base1{
stroke-dasharray: 600px;
stroke-dashoffset:600px;
transition-timing-function: linear;
transition: stroke-dashoffset 10s;
}
#base2{
stroke-dasharray: 800px;
stroke-dashoffset:800px;
transition-timing-function: linear;
transition: stroke-dashoffset 10s;
}
#window1{
stroke-dasharray: 200px;
stroke-dashoffset:200px;
transition-timing-function: linear;
transition: stroke-dashoffset 10s;
}
#window2{
stroke-dasharray: 700px;
stroke-dashoffset:700px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#window3{
stroke-dasharray: 700px;
stroke-dashoffset:700px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#window4{
stroke-dasharray: 700px;
stroke-dashoffset:700px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#doord{
stroke-dasharray: 1000px;
stroke-dashoffset:1000px;
transition-timing-function: linear;
transition: stroke-dashoffset 10s;
}
#doorin{
stroke-dasharray: 500px;
stroke-dashoffset:500px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#doordoor1{
stroke-dasharray: 300px;
stroke-dashoffset:300px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#doordoor2{
stroke-dasharray: 300px;
stroke-dashoffset:300px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#kitiki1{
stroke-dasharray: 200px;
stroke-dashoffset:200px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#kitiki2{
stroke-dasharray: 200px;
stroke-dashoffset:200px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#kitiki3{
stroke-dasharray: 500px;
stroke-dashoffset:500px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#kitiki4{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#doombase{
stroke-dasharray: 1000px;
stroke-dashoffset:1000px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#bars1{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#bars2{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#bars3{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#bars4{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#bars5{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#bars6{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#bars7{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#bars8{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#bars9{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#bars10{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 20s;
}
#bars11{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 5s;
}
#bars12{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 5s;
}
#bars13{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 5s;
}
#bars14{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 5s;
}
#bars15{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 5s;
}
#bars16{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 5s;
}
#bars17{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 5s;
}
#bars18{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 5s;
}
#bars19{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 5s;
}
#bars20{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 5s;
}
#bars21{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 5s;
}
#bars22{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 5s;
}
#bars23{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 5s;
}
#bars24{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 5s;
}
#doomright{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 10s;
}
#doomleft{
stroke-dasharray: 400px;
stroke-dashoffset:400px;
transition-timing-function: linear;
transition: stroke-dashoffset 10s;
}
#doom{
stroke-dasharray: 600px;
stroke-dashoffset:600px;
transition-timing-function: linear;
transition: stroke-dashoffset 10s;
}
#cir{
display:none;
}
#cir1{
display:none;
}function draw(){
$("#one").css({"stroke-dashoffset":"0px"});
$("#base1").css({"stroke-dashoffset":"0px"});
$("#base2").css({"stroke-dashoffset":"0px"});
$("#window1").css({"stroke-dashoffset":"0px"});
$("#window2").css({"stroke-dashoffset":"0px"});
$("#window3").css({"stroke-dashoffset":"0px"});
$("#window4").css({"stroke-dashoffset":"0px"});
$("#doord").css({"stroke-dashoffset":"0px"});
$("#doorin").css({"stroke-dashoffset":"0px"});
$("#doordoor1").css({"stroke-dashoffset":"0px"});
$("#doordoor2").css({"stroke-dashoffset":"0px"});
$("#kitiki1").css({"stroke-dashoffset":"0px"});
$("#kitiki2").css({"stroke-dashoffset":"0px"});
$("#kitiki3").css({"stroke-dashoffset":"0px"});
$("#kitiki4").css({"stroke-dashoffset":"0px"});
$("#doombase").css({"stroke-dashoffset":"0px"});
$("#bars1").css({"stroke-dashoffset":"0px"});
$("#bars2").css({"stroke-dashoffset":"0px"});
$("#bars3").css({"stroke-dashoffset":"0px"});
$("#bars4").css({"stroke-dashoffset":"0px"});
$("#bars5").css({"stroke-dashoffset":"0px"});
$("#bars6").css({"stroke-dashoffset":"0px"});
$("#bars7").css({"stroke-dashoffset":"0px"});
$("#bars8").css({"stroke-dashoffset":"0px"});
$("#bars9").css({"stroke-dashoffset":"0px"});
$("#bars10").css({"stroke-dashoffset":"0px"});
$("#bars11").css({"stroke-dashoffset":"0px"});
$("#bars12").css({"stroke-dashoffset":"0px"});
$("#bars13").css({"stroke-dashoffset":"0px"});
$("#bars14").css({"stroke-dashoffset":"0px"});
$("#bars15").css({"stroke-dashoffset":"0px"});
$("#bars16").css({"stroke-dashoffset":"0px"});
$("#bars17").css({"stroke-dashoffset":"0px"});
$("#bars18").css({"stroke-dashoffset":"0px"});
$("#bars19").css({"stroke-dashoffset":"0px"});
$("#bars20").css({"stroke-dashoffset":"0px"});
$("#bars21").css({"stroke-dashoffset":"0px"});
$("#bars22").css({"stroke-dashoffset":"0px"});
$("#bars23").css({"stroke-dashoffset":"0px"});
$("#bars24").css({"stroke-dashoffset":"0px"});
$("#cir").show(500);
$("#cir1").show(500);
$("#doomleft").css({"stroke-dashoffset":"0px"});
$("#doomright").css({"stroke-dashoffset":"0px"});
$("#doom").css({"stroke-dashoffset":"0px"});
}
External CSS
This Pen doesn't use any external CSS resources.