-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
75 lines (71 loc) · 4.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<!-- a quick roguelike mockup with html and css -->
<html>
<head>
<title>Roguelike Mockup</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" href="./assets/reset.css">
<link rel="stylesheet" href="./assets/roguelike.css">
</head>
<body>
<svg width="1200" height="800" viewbox="0 0 1200 800">
<!-- thanks https://stackoverflow.com/questions/15500894/background-color-of-text-in-svg
for a post on how to do a background filter -->
<defs>
<filter x="0" y="0" width="1" height="1" id="back">
<feflood flood-color="black"/>
<fecomposite in="SourceGraphic"/>
</filter>
</defs>
<!-- SVG content drawn onto the SVG canvas -->
<text x="600" y="30">
CSSRL
</text>
<text filter="url(#back)" x="444" y="60">It is a full moon in CSS Land.</text>
<text x="0" y="770">Eliotn Level 6 Wizard $3141 100/100 HP 50 (70) MP Left Hand: Toy Sword Right Hand: Toy Shield</text>
<!-- Thanks https://www.safaribooksonline.com/library/view/svg-text-layout/9781491933817/ch04.html for
tspan demo -->
<text x="60" y="240">
<tspan x="60" dy="30">--------------------------</tspan>
<tspan x="60" dy="30">|..@.....................+</tspan>
<tspan x="60" dy="30">|........................|</tspan>
<tspan x="60" dy="30">|........................|</tspan>
<tspan x="60" dy="30">|........................|</tspan>
<tspan x="60" dy="30">|........................|</tspan>
<tspan x="60" dy="30">|........................|</tspan>
<tspan x="60" dy="30">--------------------------</tspan>
</text>
<text filter="url(#back)" class="gold" x="96" y="300">$</text>
<text filter="url(#back)" class="gold" x="120" y="330">$</text>
<text filter="url(#back)" class="gold" x="144" y="360">$</text>
<text filter="url(#back)" class="gold" x="108" y="390">$</text>
<text filter="url(#back)" class="stairs" x="216" y="390">></text>
<!--<tspan filter="url(#back)" class="gold" x="120" y="160">$</tspan>
<tspan filter="url(#back)" class="gold" x="144" y="140">$</tspan>
<tspan filter="url(#back)" class="gold" x="108" y="100">$</tspan>-->
<text x="804" y="150">
<tspan x="804" dy="30">--------------------------</tspan>
<tspan x="804" dy="30">|........................|</tspan>
<tspan x="804" dy="30">|........................|</tspan>
<tspan x="804" dy="30">|........................|</tspan>
<tspan x="804" dy="30">|........................|</tspan>
<tspan x="804" dy="30">|........................|</tspan>
<tspan x="804" dy="30">+........................|</tspan>
<tspan x="804" dy="30">--------------------------</tspan>
</text>
<text filter="url(#back)" class="gold" x="828" y="270">$</text>
<text filter="url(#back)" class="gold" x="852" y="330">$</text>
<text filter="url(#back)" class="gold" x="924" y="360">$</text>
<text filter="url(#back)" class="gold" x="900" y="270">$</text>
<text filter="url(#back)" class="stairs" x="972" y="210"><</text>
<text x="372" y="240">
<tspan x="372" dy="30">------------------</tspan>
<tspan x="372" dy="30">.................|</tspan>
<tspan x="372" dy="30">----------------.-------------------</tspan>
<tspan x="552" dy="30"> |....................</tspan>
<tspan x="552" dy="30"> ---------------------</tspan>
</text>
<text filter="url(#back)" class="rogue" x="564" y="330">@</text>
</svg>
</body>
</html>