A character sheet that runs in browser for D&D 5th edition for A5 sized paper
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>A5 5E Character Sheet</title>
5 <link rel="stylesheet" href="/style.css" />
6 <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.runtime.js"></script>
7 <script src="/holePunch.precompiled.js" type="text/javascript"></script>
8 <script src="/page.precompiled.js" type="text/javascript"></script>
9 <script type="text/javascript">
10 const page = Handlebars.templates.page;
11
12 window.onload = () => {
13 const pages = document.querySelectorAll("page");
14 const outer = document.querySelector(".sheet-outer.A5");
15 outer.innerHTML = "";
16
17 for (var i = 0; i < pages.length; i++) {
18 outer.innerHTML += page({ content: pages[i].innerHTML });
19 }
20 };
21 </script>
22 </head>
23 <body>
24 <div class="sheet-outer A5">
25 <page>
26 <div>
27 <svg width="40mm" height="15mm" xmlns="http://www.w3.org/2000/svg" class="carlito">
28 <polygon fill="none" stroke="black" stroke-width="0.5mm" points="24.803149,10.629921 150.5905475,10.629921 150.5905475,46.062991 24.803149,46.062991" />
29 <text x="15.5mm" fill="black" y="8.335mm" textLength="23.25mm" style="font-size:8pt;">Proficiency Bonus</text>
30 <circle stroke="black" r="7mm" stroke-width="0.5mm" cx="7.5mm" cy="7.5mm" fill="white" />
31 </svg>
32 <svg width="40mm" height="15mm" xmlns="http://www.w3.org/2000/svg" class="carlito">
33 <polygon fill="none" stroke="black" stroke-width="0.5mm" points="24.803149,10.629921 150.5905475,10.629921 150.5905475,46.062991 24.803149,46.062991" />
34 <text x="15.5mm" fill="black" y="8.335mm" textLength="23.25mm" style="font-size:8pt;">Passive Perception</text>
35 <circle stroke="black" r="7mm" stroke-width="0.5mm" cx="7.5mm" cy="7.5mm" fill="white" />
36 </svg>
37 <svg width="40mm" height="15mm"height="15mm" xmlns="http://www.w3.org/2000/svg" class="carlito">
38 <polygon fill="none" stroke="black" stroke-width="0.5mm" points="24.803149,10.629921 150.5905475,10.629921 150.5905475,46.062991 24.803149,46.062991" />
39 <text x="18.5mm" fill="black" y="8.335mm" style="font-size:10pt;">Initiative</text>
40 <circle stroke="black" r="7mm" stroke-width="0.5mm" cx="7.5mm" cy="7.5mm" fill="white" />
41 </svg>
42 <br />
43 <br />
44 <hr style="margin-bottom:0;" />
45 <span class="carlito" style="font-size:9pt;margin-bottom:2mm;">Name</span>
46 <br />
47 <br />
48 <svg width="15mm" height="30mm" xmlns="http://www.w3.org/2000/svg" class="caladea attr">
49 <text x="4mm" y="3.1mm" fill="black">STR</text>
50 <rect x="0.5mm" y="5mm" width="14mm" height="19.5mm" stroke="black" stroke-width="0.5mm" fill="none" />
51 <ellipse rx="5mm" ry="3mm" cx="7.5mm" cy="25mm" stroke="black" stroke-width="0.5mm" fill="white" />
52 </svg>
53 <svg width="15mm" height="30mm" xmlns="http://www.w3.org/2000/svg" class="caladea attr">
54 <text x="4mm" y="3.1mm" fill="black">DEX</text>
55 <rect x="0.5mm" y="5mm" width="14mm" height="19.5mm" stroke="black" stroke-width="0.5mm" fill="none" />
56 <ellipse rx="5mm" ry="3mm" cx="7.5mm" cy="25mm" stroke="black" stroke-width="0.5mm" fill="white" />
57 </svg>
58 <svg width="15mm" height="30mm" xmlns="http://www.w3.org/2000/svg" class="caladea attr">
59 <text x="4mm" y="3.1mm" fill="black">CON</text>
60 <rect x="0.5mm" y="5mm" width="14mm" height="19.5mm" stroke="black" stroke-width="0.5mm" fill="none" />
61 <ellipse rx="5mm" ry="3mm" cx="7.5mm" cy="25mm" stroke="black" stroke-width="0.5mm" fill="white" />
62 </svg>
63 <svg width="15mm" height="30mm" xmlns="http://www.w3.org/2000/svg" class="caladea attr">
64 <text x="4mm" y="3.1mm" fill="black">INT</text>
65 <rect x="0.5mm" y="5mm" width="14mm" height="19.5mm" stroke="black" stroke-width="0.5mm" fill="none" />
66 <ellipse rx="5mm" ry="3mm" cx="7.5mm" cy="25mm" stroke="black" stroke-width="0.5mm" fill="white" />
67 </svg>
68 <svg width="15mm" height="30mm" xmlns="http://www.w3.org/2000/svg" class="caladea attr">
69 <text x="4mm" y="3.1mm" fill="black">WIS</text>
70 <rect x="0.5mm" y="5mm" width="14mm" height="19.5mm" stroke="black" stroke-width="0.5mm" fill="none" />
71 <ellipse rx="5mm" ry="3mm" cx="7.5mm" cy="25mm" stroke="black" stroke-width="0.5mm" fill="white" />
72 </svg>
73 <svg width="15mm" height="30mm" xmlns="http://www.w3.org/2000/svg" class="caladea attr">
74 <text x="4mm" y="3.1mm" fill="black">CHA</text>
75 <rect x="0.5mm" y="5mm" width="14mm" height="19.5mm" stroke="black" stroke-width="0.5mm" fill="none" />
76 <ellipse rx="5mm" ry="3mm" cx="7.5mm" cy="25mm" stroke="black" stroke-width="0.5mm" fill="white" />
77 </svg>
78 <svg width="55mm" height="130mm" xmlns="http://www.w3.org/2000/svg" class="carlito">
79 <rect x="0.5mm" y="0.5mm" width="54mm" height="129mm" stroke="black" stroke-width="0.5mm" fill="none" />
80 <!-- Acrobatics (DEX) -->
81 <circle r="1mm" cx="5mm" cy="4.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
82 <circle r="1.5mm" cx="7mm" cy="5.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
83 <line x1="10mm" y1="7mm" x2="16mm" y2="7mm" stroke="black" stroke-width="0.5mm" />
84 <text x="18mm" y="7mm" fill="black">Acrobatics</text>
85 <text x="37mm" y="7mm" fill="grey" style="font-size:8pt;">(Dex)</text>
86 <!-- Animal Handling (WIS) -->
87 <circle r="1mm" cx="5mm" cy="11.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
88 <circle r="1.5mm" cx="7mm" cy="12.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
89 <line x1="10mm" y1="14mm" x2="16mm" y2="14mm" stroke="black" stroke-width="0.5mm" />
90 <text x="18mm" y="14mm" fill="black">Animal Handling</text>
91 <text x="47mm" y="14mm" fill="grey" style="font-size:8pt;">(Wis)</text>
92 <!-- Arcana (INT) -->
93 <circle r="1mm" cx="5mm" cy="18.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
94 <circle r="1.5mm" cx="7mm" cy="19.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
95 <line x1="10mm" y1="21mm" x2="16mm" y2="21mm" stroke="black" stroke-width="0.5mm" />
96 <text x="18mm" y="21mm" fill="black">Arcana</text>
97 <text x="31mm" y="21mm" fill="grey" style="font-size:8pt;">(Int)</text>
98 <!-- Athletics (STR) -->
99 <circle r="1mm" cx="5mm" cy="25.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
100 <circle r="1.5mm" cx="7mm" cy="26.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
101 <line x1="10mm" y1="28mm" x2="16mm" y2="28mm" stroke="black" stroke-width="0.5mm" />
102 <text x="18mm" y="28mm" fill="black">Athletics</text>
103 <text x="34mm" y="28mm" fill="grey" style="font-size:8pt;">(Str)</text>
104 <!-- Deception (CHA) -->
105 <circle r="1mm" cx="5mm" cy="32.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
106 <circle r="1.5mm" cx="7mm" cy="33.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
107 <line x1="10mm" y1="35mm" x2="16mm" y2="35mm" stroke="black" stroke-width="0.5mm" />
108 <text x="18mm" y="35mm" fill="black">Deception</text>
109 <text x="37mm" y="35mm" fill="grey" style="font-size:8pt;">(Cha)</text>
110 <!-- History (INT) -->
111 <circle r="1mm" cx="5mm" cy="39.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
112 <circle r="1.5mm" cx="7mm" cy="40.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
113 <line x1="10mm" y1="42mm" x2="16mm" y2="42mm" stroke="black" stroke-width="0.5mm" />
114 <text x="18mm" y="42mm" fill="black">History</text>
115 <text x="31mm" y="42mm" fill="grey" style="font-size:8pt;">(Int)</text>
116 <!-- Insight (WIS) -->
117 <circle r="1mm" cx="5mm" cy="46.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
118 <circle r="1.5mm" cx="7mm" cy="47.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
119 <line x1="10mm" y1="49mm" x2="16mm" y2="49mm" stroke="black" stroke-width="0.5mm" />
120 <text x="18mm" y="49mm" fill="black">Insight</text>
121 <text x="31mm" y="49mm" fill="grey" style="font-size:8pt;">(Wis)</text>
122 <!-- Intimidation (CHA) -->
123 <circle r="1mm" cx="5mm" cy="53.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
124 <circle r="1.5mm" cx="7mm" cy="54.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
125 <line x1="10mm" y1="56mm" x2="16mm" y2="56mm" stroke="black" stroke-width="0.5mm" />
126 <text x="18mm" y="56mm" fill="black">Intimidation</text>
127 <text x="40mm" y="56mm" fill="grey" style="font-size:8pt;">(Cha)</text>
128 <!-- Investigation (INT) -->
129 <circle r="1mm" cx="5mm" cy="60.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
130 <circle r="1.5mm" cx="7mm" cy="61.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
131 <line x1="10mm" y1="63mm" x2="16mm" y2="63mm" stroke="black" stroke-width="0.5mm" />
132 <text x="18mm" y="63mm" fill="black">Investigation</text>
133 <text x="41mm" y="63mm" fill="grey" style="font-size:8pt;">(Int)</text>
134 <!-- Medicine (WIS) -->
135 <circle r="1mm" cx="5mm" cy="67.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
136 <circle r="1.5mm" cx="7mm" cy="68.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
137 <line x1="10mm" y1="70mm" x2="16mm" y2="70mm" stroke="black" stroke-width="0.5mm" />
138 <text x="18mm" y="70mm" fill="black">Medicine</text>
139 <text x="35mm" y="70mm" fill="grey" style="font-size:8pt;">(Wis)</text>
140 <!-- Nature (INT) -->
141 <circle r="1mm" cx="5mm" cy="74.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
142 <circle r="1.5mm" cx="7mm" cy="75.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
143 <line x1="10mm" y1="77mm" x2="16mm" y2="77mm" stroke="black" stroke-width="0.5mm" />
144 <text x="18mm" y="77mm" fill="black">Nature</text>
145 <text x="31mm" y="77mm" fill="grey" style="font-size:8pt;">(Int)</text>
146 <!-- Perception (WIS) -->
147 <circle r="1mm" cx="5mm" cy="81.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
148 <circle r="1.5mm" cx="7mm" cy="82.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
149 <line x1="10mm" y1="84mm" x2="16mm" y2="84mm" stroke="black" stroke-width="0.5mm" />
150 <text x="18mm" y="84mm" fill="black">Perception</text>
151 <text x="38mm" y="84mm" fill="grey" style="font-size:8pt;">(Wis)</text>
152 <!-- Performance (CHA) -->
153 <circle r="1mm" cx="5mm" cy="88.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
154 <circle r="1.5mm" cx="7mm" cy="89.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
155 <line x1="10mm" y1="91mm" x2="16mm" y2="91mm" stroke="black" stroke-width="0.5mm" />
156 <text x="18mm" y="91mm" fill="black">Performance</text>
157 <text x="41mm" y="91mm" fill="grey" style="font-size:8pt;">(Cha)</text>
158 <!-- Persuasion (CHA) -->
159 <circle r="1mm" cx="5mm" cy="95.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
160 <circle r="1.5mm" cx="7mm" cy="96.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
161 <line x1="10mm" y1="98mm" x2="16mm" y2="98mm" stroke="black" stroke-width="0.5mm" />
162 <text x="18mm" y="98mm" fill="black">Persuasion</text>
163 <text x="37.5mm" y="98mm" fill="grey" style="font-size:8pt;">(Cha)</text>
164 <!-- Religion (INT) -->
165 <circle r="1mm" cx="5mm" cy="102.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
166 <circle r="1.5mm" cx="7mm" cy="103.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
167 <line x1="10mm" y1="105mm" x2="16mm" y2="105mm" stroke="black" stroke-width="0.5mm" />
168 <text x="18mm" y="105mm" fill="black">Religion</text>
169 <text x="33mm" y="105mm" fill="grey" style="font-size:8pt;">(Int)</text>
170 <!-- Sleight of Hand (DEX) -->
171 <circle r="1mm" cx="5mm" cy="109.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
172 <circle r="1.5mm" cx="7mm" cy="110.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
173 <line x1="10mm" y1="112mm" x2="16mm" y2="112mm" stroke="black" stroke-width="0.5mm" />
174 <text x="18mm" y="112mm" fill="black">Sleight of Hand</text>
175 <text x="45mm" y="112mm" fill="grey" style="font-size:8pt;">(Dex)</text>
176 <!-- Stealth (DEX) -->
177 <circle r="1mm" cx="5mm" cy="116.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
178 <circle r="1.5mm" cx="7mm" cy="117.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
179 <line x1="10mm" y1="119mm" x2="16mm" y2="119mm" stroke="black" stroke-width="0.5mm" />
180 <text x="18mm" y="119mm" fill="black">Stealth</text>
181 <text x="31mm" y="119mm" fill="grey" style="font-size:8pt;">(Dex)</text>
182 <!-- Survival (WIS) -->
183 <circle r="1mm" cx="5mm" cy="123.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
184 <circle r="1.5mm" cx="7mm" cy="124.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
185 <line x1="10mm" y1="126mm" x2="16mm" y2="126mm" stroke="black" stroke-width="0.5mm" />
186 <text x="18mm" y="126mm" fill="black">Survival</text>
187 <text x="32mm" y="126mm" fill="grey" style="font-size:8pt;">(Wis)</text>
188 </svg>
189 <svg width="65mm" height="130mm" xmlns="http://www.w3.org/2000/svg" class="carlito">
190 <!-- Saving Throws -->
191 <rect x="0.5mm" y="0.5mm" width="64mm" height="24mm" stroke="black" stroke-width="0.5mm" fill="none" />
192 <!-- -- Strength -- -->
193 <circle r="1.5mm" cx="5mm" cy="5.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
194 <line x1="8mm" y1="7mm" x2="13mm" y2="7mm" stroke="black" stroke-width="0.5mm" />
195 <text x="14mm" y="7mm" fill="black">STR</text>
196 <!-- -- Dexterity -- -->
197 <circle r="1.5mm" cx="5mm" cy="12.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
198 <line x1="8mm" y1="14mm" x2="13mm" y2="14mm" stroke="black" stroke-width="0.5mm" />
199 <text x="14mm" y="14mm" fill="black">DEX</text>
200 <!-- -- Constitution -- -->
201 <circle r="1.5mm" cx="5mm" cy="19.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
202 <line x1="8mm" y1="21mm" x2="13mm" y2="21mm" stroke="black" stroke-width="0.5mm" />
203 <text x="14mm" y="21mm" fill="black">CON</text>
204 <!-- -- Intelligence -- -->
205 <circle r="1.5mm" cx="33mm" cy="5.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
206 <line x1="36mm" y1="7mm" x2="41mm" y2="7mm" stroke="black" stroke-width="0.5mm" />
207 <text x="42mm" y="7mm" fill="black">INT</text>
208 <!-- -- Wisdom -- -->
209 <circle r="1.5mm" cx="33mm" cy="12.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
210 <line x1="36mm" y1="14mm" x2="41mm" y2="14mm" stroke="black" stroke-width="0.5mm" />
211 <text x="42mm" y="14mm" fill="black">WIS</text>
212 <!-- -- Charisma -- -->
213 <circle r="1.5mm" cx="33mm" cy="19.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
214 <line x1="36mm" y1="21mm" x2="41mm" y2="21mm" stroke="black" stroke-width="0.5mm" />
215 <text x="42mm" y="21mm" fill="black">CHA</text>
216 <!-- Speed -->
217 <text x="17mm" y="35.5mm" fill="black">Speed</text>
218 <rect x="8mm" y="30mm" width="25mm" height="9mm" stroke="black" stroke-width="0.5mm" fill="none" />
219 <circle r="7mm" cx="7.5mm" cy="34.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
220 <!-- AC -->
221 <rect x="40mm" y="30mm" width="25mm" height="9mm" stroke="black" stroke-width="0.5mm" fill="none" />
222 <text x="53.5mm" y="35.5mm" fill="black">AC</text>
223 <circle r="7mm" cx="42mm" cy="34.5mm" stroke="black" stroke-width="0.5mm" fill="white" />
224 <!-- HP -->
225 <rect x="0.5mm" y="44mm" width="64mm" height="40mm" stroke="black" stroke-width="0.5mm" fill="none" />
226 <text x="2mm" y="49mm" fill="rgb(78, 78, 78)">Hit Point Max</text>
227 <line x1="27mm" y1="49mm" x2="60mm" y2="49mm" stroke="rgb(78, 78, 78)" stroke-width="0.5mm" />
228 </svg>
229 </div>
230 </page>
231 </div>
232 </body>
233</html>