<div class="metric-chart-loading">
<% var minHeightSvg = "300px"; var maxHeightSvg = "370px"; %>
<!-- FAIR line chart loading skeleton -->
<% if(type == "FAIR"){ %>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 852 426" preserveAspectRatio="none" style="width: 100%; height: 100%; min-width: 950px; max-width: 1000px;">
<g fill="none" fill-rule="evenodd">
<g fill="#f7f7f7">
<path d="M56 35h612v344H56zM691 146h45v11h-45zM9 127h13v169H9zM35 44h11v13H35zM35 122h11v13H35zM35 200h11v13H35zM35 278h11v13H35zM35 356h11v13H35zM724 174h85v11h-85z"/>
<g transform="translate(694 177)">
<path d="M0 1h20v4H0z"/>
</g>
<path d="M724 199h97v11h-97z"/>
<g transform="translate(694 202)">
<path d="M0 1h20v4H0z"/>
</g>
<path d="M724 224h110v11H724z"/>
<g transform="translate(694 227)">
<path d="M0 1h20v4H0z"/>
</g>
<path d="M724 249h90v11h-90z"/>
<g transform="translate(694 252)">
<path d="M0 1h20v4H0z"/>
</g>
<path d="M74 386h29v11H74zM145 386h29v11h-29zM215 386h29v11h-29zM286 386h29v11h-29zM356 386h29v11h-29zM427 386h29v11h-29zM497 386h29v11h-29zM568 386h29v11h-29zM638 386h29v11h-29zM341 423h42v-13h-42z"/>
</g>
<g stroke="#ebebeb" stroke-width="5" transform="translate(90 80)" stroke-linecap="round" stroke-linejoin="round">
<%
const makeLineAnim = function(lineString){
var values = [lineString];
for (i = 1; i <= 12; i += 2) {
var nums = lineString.split(" ");
nums[i] = nums[i] - 20;
var newLine = nums.join(' ');
values.push(newLine)
}
values.push(lineString);
values.push(lineString);
values.push(lineString);
return values.join('; ');
};
%>
<% var animDur = "2.5s"; %>
<% var line1 = "0 268 105 243 210 204 315 187 420 186 525 189"; %>
<% var line1Animated = makeLineAnim(line1); %>
<polyline points="<%= line1 %>">
<animate
attributeName="points"
dur="<%= animDur %>"
values = "<%= line1Animated %>"
repeatCount="indefinite"/>
</polyline>
<% var line2 = "0 232 105 209 210 140 315 123 420 125 525 117"; %>
<% var line2Animated = makeLineAnim(line2); %>
<polyline points="<%= line2 %>">
<animate
attributeName="points"
dur="<%= animDur %>"
values = "<%= line2Animated %>"
repeatCount="indefinite"/>
</polyline>
<% var line3 = "0 184 105 157 210 91 315 80 420 64 525 64"; %>
<% var line3Animated = makeLineAnim(line3); %>
<polyline points="<%= line3 %>">
<animate
attributeName="points"
dur="<%= animDur %>"
values = "<%= line3Animated %>"
repeatCount="indefinite"/>
</polyline>
<% var line4 = "0 144 105 102 210 41 315 16 420 0 525 1"; %>
<% var line4Animated = makeLineAnim(line4); %>
<polyline points="<%= line4 %>">
<animate
attributeName="points"
dur="<%= animDur %>"
values = "<%= line4Animated %>"
repeatCount="indefinite"/>
</polyline>
</g>
</g>
</svg>
<!-- bar chart loading skeleton -->
<% } else if (type == "barchart") { %>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1392 353" preserveAspectRatio="none" style="height: 100%; width: 100%; max-height:<%= maxHeightSvg %>; min-height:<%= minHeightSvg %>;">
<!-- background elements -->
<g fill="none" fill-rule="evenodd">
<g fill="#f7f7f7">
<path
d="M24 283h42v15H24zM131 283h42v15h-42zM663 283h42v15h-42zM770 283h42v15h-42zM877 283h42v15h-42zM983 283h42v15h-42zM1090 283h42v15h-42zM1196 283h42v15h-42zM344 283h42v15h-42zM1303 283h42v15h-42zM450 283h42v15h-42zM557 283h42v15h-42zM237 283h42v15h-42zM1 103h14v112H1zM22 0h173v19H22zM1359 50h33v15h-33zM1359 103h33v15h-33zM1359 156h33v15h-33zM1359 213h33v15h-33zM1163 4h42v15h-42z" />
<path d="M1163 4h42v15h-42zM1100 4h56v15h-56z" />
<path d="M1163 4h42v15h-42zM1231 4h56v15h-56z" />
<path d="M1167 4h56v15h-56zM1295 4h56v15h-56zM22 26h1329v248H22zM22 311h1329v42H22z" />
</g>
<!-- bars -->
<g fill="#ebebeb" transform="translate(43 57)" class="bars">
<rect width="34" height="72" y="145">
<animate attributeName="height" attributeType="XML" dur="3s" values="30;72;30" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" dur="3s" values="187;145;187" repeatCount="indefinite" />
</rect>
<rect x="54" width="34" height="143" y="74">
<animate attributeName="height" attributeType="XML" begin="0.5s" dur="3s" values="143;50;143" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="0.5s" dur="3s" values="74;167;74" repeatCount="indefinite" />
</rect>
<rect x="108" width="34" height="110" y="107">
<animate attributeName="height" attributeType="XML" begin="1s" dur="3s" values="110;50;110" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1s" dur="3s" values="107;167;107;" repeatCount="indefinite" />
</rect>
<rect x="162" width="34" height="101" y="116">
<animate attributeName="height" attributeType="XML" begin="1.2s" dur="3s" values="101;31;101" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1.2s" dur="3s" values="116;186;116" repeatCount="indefinite" />
</rect>
<rect x="216" width="34" height="133" y="84">
<animate attributeName="height" attributeType="XML" begin="1.4s" dur="2.5s" values="133;33;133" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1.4s" dur="2.5s" values="84;184;84" repeatCount="indefinite" />
</rect>
<rect x="270" width="34" height="187" y="30">
<animate attributeName="height" attributeType="XML" begin="1.2s" dur="3s" values="187;107;187" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1.2s" dur="3s" values="30;110;30" repeatCount="indefinite" />
</rect>
<rect x="324" width="34" height="72" y="145">
<animate attributeName="height" attributeType="XML" dur="3s" values="30;72;30" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" dur="3s" values="187;145;187" repeatCount="indefinite" />
</rect>
<rect x="378" width="34" height="143" y="74">
<animate attributeName="height" attributeType="XML" begin="0.1s" dur="2s" values="143;50;143" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="0.1s" dur="2s" values="74;167;74" repeatCount="indefinite" />
</rect>
<rect x="432" width="34" height="110" y="107">
<animate attributeName="height" attributeType="XML" begin="1.2s" dur="3s" values="110;50;110" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1.2s" dur="3s" values="107;167;107;" repeatCount="indefinite" />
</rect>
<rect x="486" width="34" height="101" y="116">
<animate attributeName="height" attributeType="XML" begin="0.8s" dur="3s" values="101;31;101" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="0.8s" dur="3s" values="116;186;116" repeatCount="indefinite" />
</rect>
<rect x="540" width="34" height="133" y="84">
<animate attributeName="height" attributeType="XML" begin="1.1s" dur="3s" values="133;33;133" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1.1s" dur="3s" values="84;184;84" repeatCount="indefinite" />
</rect>
<rect x="594" width="34" height="187" y="30">
<animate attributeName="height" attributeType="XML" begin="1s" dur="2s" values="187;107;187" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1s" dur="2s" values="30;110;30" repeatCount="indefinite" />
</rect>
<rect x="648" width="34" height="72" y="145">
<animate attributeName="height" attributeType="XML" dur="3s" values="30;72;30" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" dur="3s" values="187;145;187" repeatCount="indefinite" />
</rect>
<rect x="702" width="34" height="143" y="74">
<animate attributeName="height" attributeType="XML" begin="0.5s" dur="3s" values="143;50;143" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="0.5s" dur="3s" values="74;167;74" repeatCount="indefinite" />
</rect>
<rect x="756" width="34" height="110" y="107">
<animate attributeName="height" attributeType="XML" begin="1s" dur="3s" values="110;50;110" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1s" dur="3s" values="107;167;107;" repeatCount="indefinite" />
</rect>
<rect x="810" width="34" height="101" y="116">
<animate attributeName="height" attributeType="XML" begin="1.2s" dur="3s" values="101;31;101" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1.2s" dur="3s" values="116;186;116" repeatCount="indefinite" />
</rect>
<rect x="864" width="34" height="133" y="84">
<animate attributeName="height" attributeType="XML" begin="1.4s" dur="3s" values="133;33;133" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1.4s" dur="3s" values="84;184;84" repeatCount="indefinite" />
</rect>
<rect x="918" width="34" height="187" y="30">
<animate attributeName="height" attributeType="XML" begin="1s" dur="2s" values="187;107;187" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1s" dur="2s" values="30;110;30" repeatCount="indefinite" />
</rect>
<rect x="972" width="34" height="72" y="145">
<animate attributeName="height" attributeType="XML" dur="2s" values="30;72;30" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" dur="2s" values="187;145;187" repeatCount="indefinite" />
</rect>
<rect x="1026" width="34" height="143" y="74">
<animate attributeName="height" attributeType="XML" begin="1.5s" dur="3s" values="143;50;143" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1.5s" dur="3s" values="74;167;74" repeatCount="indefinite" />
</rect>
<rect x="1080" width="34" height="110" y="107">
<animate attributeName="height" attributeType="XML" begin="1.5s" dur="3s" values="110;50;110" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1.5s" dur="3s" values="107;167;107;" repeatCount="indefinite" />
</rect>
<rect x="1134" width="34" height="101" y="116">
<animate attributeName="height" attributeType="XML" begin="1.2s" dur="3s" values="101;31;101" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1.2s" dur="3s" values="116;186;116" repeatCount="indefinite" />
</rect>
<rect x="1188" width="34" height="133" y="84">
<animate attributeName="height" attributeType="XML" begin="1.4s" dur="1.8s" values="133;33;133" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1.4s" dur="1.8s" values="84;184;84" repeatCount="indefinite" />
</rect>
<rect x="1242" width="34" height="187" y="30">
<animate attributeName="height" attributeType="XML" begin="1.2s" dur="2s" values="187;107;187" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML" begin="1.2s" dur="2s" values="30;110;30" repeatCount="indefinite" />
</rect>
</g>
</g>
</svg>
<!-- citations loading skeleton -->
<% } else if (type == "citations") { %>
<!-- citations -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1443 438" preserveAspectRatio="none" style="height: 100%; width: 100%; max-height:290px; min-height:250px;">
<linearGradient id="shimmer" x1="0%" y1="0%" x1="100%" y1="10%">
<stop offset="0%" stop-color="#f7f7f7">
<animate attributeName="stop-color" values="#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2" dur="1.95s" repeatCount="indefinite"/>
</stop>
<stop offset="4%" stop-color="#f7f7f7">
<animate attributeName="stop-color" values="#FFFFFF;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2" dur="1.95s" repeatCount="indefinite"/>
</stop>
<stop offset="12%" stop-color="#f7f7f7">
<animate attributeName="stop-color" values="#f2f2f2;#FFFFFF;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2" dur="1.95s" repeatCount="indefinite"/>
</stop>
<stop offset="19%" stop-color="#f7f7f7">
<animate attributeName="stop-color" values="#f2f2f2;#f2f2f2;#FFFFFF;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2" dur="1.95s" repeatCount="indefinite"/>
</stop>
<stop offset="30%" stop-color="#f7f7f7">
<animate attributeName="stop-color" values="#f2f2f2;#f2f2f2;#f2f2f2;#FFFFFF;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2" dur="1.95s" repeatCount="indefinite"/>
</stop>
<stop offset="40%" stop-color="#f7f7f7">
<animate attributeName="stop-color" values="#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#FFFFFF;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2" dur="1.95s" repeatCount="indefinite"/>
</stop>
<stop offset="50%" stop-color="#f7f7f7">
<animate attributeName="stop-color" values="#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#FFFFFF;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2" dur="1.95s" repeatCount="indefinite"/>
</stop>
<stop offset="60%" stop-color="#f7f7f7">
<animate attributeName="stop-color" values="#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#FFFFFF;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2" dur="1.95s" repeatCount="indefinite"/>
</stop>
<stop offset="70%" stop-color="#f7f7f7">
<animate attributeName="stop-color" values="#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#FFFFFF;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2" dur="1.95s" repeatCount="indefinite"/>
</stop>
<stop offset="80%" stop-color="#f7f7f7">
<animate attributeName="stop-color" values="#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#FFFFFF;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2" dur="1.95s" repeatCount="indefinite"/>
</stop>
<stop offset="85%" stop-color="#f7f7f7">
<animate attributeName="stop-color" values="#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#FFFFFF;#f2f2f2;#f2f2f2;#f2f2f2" dur="1.95s" repeatCount="indefinite"/>
</stop>
<stop offset="96%" stop-color="#f7f7f7">
<animate attributeName="stop-color" values="#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#FFFFFF;#f2f2f2;#f2f2f2" dur="1.95s" repeatCount="indefinite"/>
</stop>
<stop offset="100%" stop-color="#f7f7f7">
<animate attributeName="stop-color" values="#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2;#f2f2f2" dur="1.95s" repeatCount="indefinite"/>
</stop>
</linearGradient>
<g fill="none" fill-rule="evenodd">
<!-- background elements -->
<g fill="url(#shimmer)" transform="translate(57 41)">
<rect width="1329" height="104"/>
<rect width="1329" height="104" y="126"/>
<rect width="1329" height="104" y="252"/>
</g>
<!-- text skeleton -->
<g fill="#ebebeb" transform="translate(85.5 59)">
<rect width="1271" height="10" y="252"/>
<rect width="1202" height="10" x="70" y="281"/>
<rect width="1015" height="10" x="70" y="310"/>
<rect width="1271" height="10" y="126"/>
<rect width="1202" height="10" x="70" y="155"/>
<rect width="953.5" height="10" x="70" y="184"/>
<rect width="1271" height="10"/>
<rect width="1202" height="10" x="70" y="29"/>
<rect width="1015" height="10" x="70" y="58"/>
</g>
</g>
</svg>
<% } %>
<!-- developer -->
<% if (character == "developer" || character == "both") { %>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1392 353" preserveAspectRatio="xMinYMax meet" style="position: absolute;
top: 0;
right: 0; max-height:<%= maxHeightSvg %>; min-height:<%= minHeightSvg %>;"
class="character">
<g fill="none" fill-rule="evenodd">
<!-- base -->
<path fill="#E2F7FA" fill-rule="nonzero" d="M279 353c0-36-43-26-46-46-2-20-55-42-78-54l-2-2c-23-12-74-39-102-26s-49 7-50 32v4l-1 92h279z" opacity=".8"/>
<path fill="#1F2629" fill-rule="nonzero" d="M124 46c8 1 19 7 19 17 0 11-11 15-21 17 6 8 9 9 9 13-1 3-7 12-8 23 0 11-30 70-35 72-6 2 5 13-33 14-10 0-29-15-29-35 0-43 44-51 69-99 12-22 26-22 29-22z"/>
<path fill="#837163" fill-rule="nonzero" d="M217 287l9-5 7 11-9 6z"/>
<path fill="#224145" fill-rule="nonzero" d="M202 208c9 0 23 57 29 73-1 4-8 9-12 9l-27-44c-3-3 0-38 10-38z"/>
<path fill="#0CB58F" fill-rule="nonzero" d="M82 200c-1-5-7-97 27-95 33 2 33 84 29 97-15 6-55 2-56-2z"/>
<path fill="#776558" fill-rule="nonzero" d="M120 98l-4 10c-1 3-15 0-14-2 5-8 5-16 6-20s15 3 12 12z"/>
<path fill="#837163" fill-rule="nonzero" d="M137 66c-9 8-20 13-32 13l-1 3c0 2 2 4 4 4 1 6 4 11 9 13 8 2 17-5 20-17 2-6 2-11 0-16z"/>
<path stroke="#18ACC0" stroke-linecap="round" stroke-linejoin="round" stroke-width="5.8" d="M144 201l44-1 23-40"/>
<path fill="#1F2629" fill-rule="nonzero" d="M222 296l7 11 31-18-2-4-25 4z"/>
<!-- frames -->
<g fill-rule="nonzero" class="frame1">
<animate
id="frame1"
attributeName="display"
values="inline;none;none;none;none;none;inline;none;"
keyTimes="0; 0.14; 0.17; 0.43; 0.65; 0.71; 0.86; 1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
<path fill="#837163" d="M148 309l10 4-6 12-10-4z"/>
<path fill="#2B5156" d="M94 198c-8 0-15-2-15 17s21 35 46 35l38-1c1 7-14 50-16 61 1 3 9 7 12 7s44-66 43-108c0-6-24-8-39-8l-51 2"/>
<path fill="#837163" d="M116 152l-21 2-1 8c0 8 0 17 5 23 2 3 5 5 8 5l12 4 12 3 30 3h16l1-2-4-4h-8l-10-3-18-7-19-7-4-1 1-10v-11-3z"/>
<path fill="#1FD8AF" d="M90 155c-4-10-1-39 11-41 15-2 20 35 19 39-3 2-19 7-30 2z"/>
<path fill="#1F2629" d="M144 318l-7 12 32 17 2-4-16-19z"/>
</g>
<g fill-rule="nonzero" class="frame2" style="display:none">
<animate
id="frame2"
attributeName="display"
values="none;inline;none;none;none;inline;none;none;"
keyTimes="0; 0.14; 0.17; 0.43; 0.65; 0.71; 0.86; 1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
<path fill="#837163" d="M148 309l9 5-6 11-10-5z"/>
<path fill="#2B5156" d="M94 198c-8 0-15-2-15 17s21 35 46 35l38-1c1 7-15 50-17 61 1 3 9 7 12 7s45-66 44-108c0-6-24-8-39-8l-52 2"/>
<path fill="#837163" d="M116 152l-21 2-1 8c0 8 1 16 5 23 1 3 5 5 8 5l12 4 12 2s20 3 30 2h16l1-2-4-3c-3-2-5-1-8-1-3 1-6-1-10-3l-18-5-19-7-4-1 1-10v-11-3z"/>
<path fill="#1FD8AF" d="M90 155c-4-10-1-39 11-41 15-2 20 35 19 39-3 2-19 7-30 2z"/>
<path fill="#1F2629" d="M143 317l-7 12 32 18 2-3-16-20z"/>
</g>
<g fill-rule="nonzero" class="frame3" style="display:none">
<animate
id="frame3"
attributeName="display"
values="none;none;inline;none;inline;none;none;none;"
keyTimes="0; 0.14; 0.17; 0.43; 0.65; 0.71; 0.86; 1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
<path fill="#837163" d="M148 309l10 4-6 12-10-4z"/>
<path fill="#2B5156" d="M94 198c-8 0-15-2-15 17s21 35 46 35l38-1c1 7-14 50-16 61 1 3 9 7 12 7s44-66 43-108c0-6-24-8-39-8l-51 2"/>
<path fill="#837163" d="M116 153l-21 2v8c0 8 1 16 5 23 2 3 5 5 8 5h1l12 4 12 1c2 1 20 3 30 2l9-1 7 1v-2c0-2-2-4-3-4-3-2-5-1-8-1-3 1-6-1-11-2l-16-5h-1l-20-6-4-1 1-10-1-12v-2z"/>
<path fill="#1FD8AF" d="M90 155c-4-9-2-39 10-41 16-3 22 34 20 38v1c-3 1-18 7-30 2z"/>
<path fill="#1F2629" d="M144 318l-7 12 32 17 2-4-16-19z"/>
</g>
<g fill-rule="nonzero" class="frame4" style="display:none">
<animate
id="frame4"
attributeName="display"
values="none;none;none;inline;none;none;none;none;"
keyTimes="0; 0.14; 0.17; 0.43; 0.65; 0.71; 0.86; 1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
<path fill="#837163" d="M148 309l10 4-6 12-10-4z"/>
<path fill="#2B5156" d="M94 198c-8 0-15-2-15 17s21 35 46 35l38-1c1 7-14 50-16 61 1 3 9 7 12 7s44-66 43-108c0-6-24-8-39-8l-51 2"/>
<path fill="#837163" d="M116 153l-21 2v8c0 8 2 16 6 23 1 3 5 5 8 5l12 4 12 1c2 1 20 3 30 2l9-1 8 1v-3l-4-4h-8c-3 1-6-1-11-2l-16-5h-1l-20-6-1-1h-2v-10l-1-12v-2z"/>
<path fill="#1FD8AF" d="M90 155c-4-9-2-39 10-41 16-3 22 34 20 38v1c-3 1-18 7-30 2z"/>
<path fill="#1F2629" d="M144 318l-7 12 32 17 2-4-16-19z"/>
</g>
</g>
</svg>
<% } %> <% if(character == "statistician" || character == "both"){ %>
<!-- statistician -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1392 353" preserveAspectRatio="xMaxYMax meet" style="position: absolute;
top: 0;
right: 0; max-height:<%= maxHeightSvg %>; min-height:<%= minHeightSvg %>;" class="character">
<!-- statistician base -->
<g fill-rule="nonzero" transform="matrix(-1 0 0 1 1392 40)">
<path fill="#E2F7FA" d="M218 62c20 29 18 84 19 112 1 27 23 64 11 91s-56 44-76 48c-20 3-45-17-73-28-27-12-57-14-76-31-19-18-26-49-22-80s17-64 31-102S96 0 126 1s72 32 92 61z" opacity=".8" />
<path fill="#3282CE" d="M156 204c6 17 9 96 9 109h-32l-13-30 23-84 13 5z" />
<path fill="#3F8FDA" d="M145 206c-2 11-17 98-21 107H78c-2-7-9-83 0-112 9-28 67 5 67 5z" />
<path fill="#A78E7B" d="M153 160c3 0 43-19 52-26 9-8-2-14-6-12-3 2-38 17-46 19-7 3 0 19 0 19z" />
<ellipse cx="110.3" cy="56.1" fill="#A78E7B" rx="15" ry="21.8" transform="rotate(-6 110 56)" />
<path fill="#EFD268" d="M107 81c51 0 53 123 51 125-3 2-54 12-81 1-7-30-3-126 30-126z" />
<path fill="#1F2629" d="M84 46c0-7 6-11 7-12 4-4 6-13 13-13l7 1c3 0 8-5 13-5 8 0 10 8 10 10 0 9-11 15-12 16l-5-5c-1 2-8 6-14 9-3 2-5 17-5 19-5 0-14-8-14-20z" />
<circle cx="97" cy="59.8" r="4.3" fill="#A78E7B" />
<path fill="#A78E7B" d="M114 89c1 3-13 2-13 0l-1-22 12-1 2 23zm92 14c0 7 8 10 10 10s2-7 2-9c0-5-4-8-8-8-3 0-4 3-4 7z" />
</g>
<!-- statistician frame1 -->
<g class="frame1">
<animate
id="frame1"
attributeName="display"
values="inline;none;none;none;none;none;inline;none;"
keyTimes="0; 0.14; 0.17; 0.43; 0.65; 0.71; 0.86; 1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
<path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" d="M1220 131l-15 30" />
<path fill="#A78E7B" fill-rule="nonzero" d="M1205 147c0-3 3-9 8-8 3 1 7 7 9 9l49 40 5-12 26 16c-3 8-19 27-26 27-17 0-51-46-60-58-4-3-11-9-11-14z" />
<path fill="#EDD98D" fill-rule="nonzero" d="M1311 140c15 8 2 50-8 55-10 0-32-16-32-21s21-45 40-34z" />
</g>
<!-- statistician frame2 -->
<g class="frame2" style="display:none">
<animate
id="frame2"
attributeName="display"
values="none;inline;none;none;none;inline;none;none;"
keyTimes="0; 0.14; 0.17; 0.43; 0.65; 0.71; 0.86; 1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
<path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" d="M1225 128l-23 26" />
<path fill="#A78E7B" fill-rule="nonzero" d="M1205 142c0-3 4-9 8-8a1082 1082 0 0158 54l5-12 26 16c-3 8-21 27-28 27-17 0-49-50-57-63-4-2-12-8-12-14z" />
<path fill="#EDD98D" fill-rule="nonzero" d="M1311 140c15 8 2 50-8 55-10 0-32-16-32-21s21-45 40-34z" />
</g>
<!-- statistician frame3 -->
<g class="frame3" style="display:none">
<animate
id="frame3"
attributeName="display"
values="none;none;inline;none;inline;none;none;none;"
keyTimes="0; 0.14; 0.17; 0.43; 0.65; 0.71; 0.86; 1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
<path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" d="M1232 124l-31 14" />
<path fill="#A78E7B" fill-rule="nonzero" d="M1206 129c1-3 4-9 9-7 4 2 6 11 7 13 6 5 41 45 43 48l7-12 24 19c-3 7-23 25-30 24-17-1-44-57-51-70-4-4-9-9-9-15z" />
<path fill="#EDD98D" fill-rule="nonzero" d="M1310 138c14 9-3 50-12 54-11-1-31-18-31-23 1-6 25-43 43-31z" />
</g>
<!-- statistician frame4 -->
<g class="frame4" style="display:none">
<animate
id="frame4"
attributeName="display"
values="none;none;none;inline;none;none;none;none;"
keyTimes="0; 0.14; 0.17; 0.43; 0.65; 0.71; 0.86; 1"
dur="1s"
begin="0s"
repeatCount="indefinite" />
<path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" d="M1237 123l-34 8" />
<path fill="#A78E7B" fill-rule="nonzero" d="M1207 128c1-3 6-11 10-9s6 13 7 15c6 5 38 47 41 50 0-3 4-9 7-13l24 19c-3 7-24 25-31 24-17-1-41-58-48-71-4-4-10-9-10-15z" />
<path fill="#EDD98D" fill-rule="nonzero" d="M1310 138c14 9-3 50-12 54-11-1-31-18-31-23 1-6 25-43 43-31z" />
</g>
<!-- paper -->
<path fill="#18ACC0" fill-rule="nonzero" d="M1213 120l-34-2-6 66 34 2z" />
</svg>
<% } %>
<!-- message -->
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 250px;" class="alert alert-info message"><%= message %></div>
</div>