300 lines
22 KiB
HTML
300 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Specimens of (discriminatory) composite portraiture</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<h1>Specimens <span class='of'>of</span> Discriminatory Composite Portraiture</h1>
|
|
<section id='gender'>
|
|
<h2>Gender Differentiation<span class='star'>*</span></h2>
|
|
<div class='genders'>
|
|
<svg
|
|
xmlns:svg="http://www.w3.org/2000/svg"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
id="svg954"
|
|
version="1.1"
|
|
viewBox="0 0 269.68921 171.03902"
|
|
height="171.03902mm"
|
|
width="249.68921mm">
|
|
<defs
|
|
id="defs948" />
|
|
<g
|
|
transform="translate(-479.74467,99.971886)"
|
|
id="layer1">
|
|
<path
|
|
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
d="m 707.56274,47.386401 c -39.08004,0 -26.35353,-98.175942 -59.54802,-98.175942"
|
|
id="path919" />
|
|
<path
|
|
id="path921"
|
|
d="m 707.56274,-67.970339 c -39.08004,0 -26.35353,17.180798 -59.54802,17.180798"
|
|
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
|
<path
|
|
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
d="m 707.56274,-8.6440273 c -39.08004,0 -26.35353,-42.1455137 -59.54802,-42.1455137"
|
|
id="path923" />
|
|
<path
|
|
id="path836"
|
|
d="m 540.57238,-79.730199 c 70.83004,0 26.35353,98.17594 59.54801,98.17594"
|
|
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
|
<path
|
|
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
d="m 540.57238,35.626541 c 39.08004,0 26.35352,-17.1808 59.54801,-17.1808"
|
|
id="path838" />
|
|
<path
|
|
id="path840"
|
|
d="m 540.57238,-23.699793 c 39.08004,0 26.35352,42.145534 59.54801,42.145534"
|
|
style="fill:none;stroke:var(--primary-color);stroke-width:1.02617979;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
|
<image
|
|
y="-98.78492"
|
|
x="488.05942"
|
|
id="image826"
|
|
xlink:href="unknown_side-1000x1000-3.png"
|
|
preserveAspectRatio="none"
|
|
height="51.730377"
|
|
width="51.730377" />
|
|
<use
|
|
height="100%"
|
|
width="100%"
|
|
transform="translate(-4.5528998e-7,57.022051)"
|
|
id="use828"
|
|
xlink:href="#image826"
|
|
y="0"
|
|
x="0" />
|
|
<use
|
|
height="100%"
|
|
width="100%"
|
|
transform="translate(-4.5528998e-7,58.005791)"
|
|
id="use830"
|
|
xlink:href="#use828"
|
|
y="0"
|
|
x="0" />
|
|
<image
|
|
width="49.769428"
|
|
height="49.769428"
|
|
preserveAspectRatio="none"
|
|
xlink:href="unknown_side-1000x1000-3.png"
|
|
id="use834"
|
|
x="597.66241"
|
|
y="-20.339062" />
|
|
<image
|
|
width="53.440414"
|
|
height="53.440414"
|
|
preserveAspectRatio="none"
|
|
xlink:href="unknown_side-1000x1000-3.png"
|
|
id="image910"
|
|
x="687.51868"
|
|
y="-99.971886" />
|
|
<image
|
|
y="-41.172611"
|
|
x="687.51868"
|
|
id="image913"
|
|
xlink:href="unknown_side-1000x1000-3.png"
|
|
preserveAspectRatio="none"
|
|
height="53.440414"
|
|
width="53.440414" />
|
|
<image
|
|
width="53.440414"
|
|
height="53.440414"
|
|
preserveAspectRatio="none"
|
|
xlink:href="unknown_side-1000x1000-3.png"
|
|
id="image915"
|
|
x="687.51868"
|
|
y="17.626713" />
|
|
<image
|
|
width="49.769428"
|
|
height="51.32375"
|
|
preserveAspectRatio="none"
|
|
xlink:href="unknown_side-1000x1000-3.png"
|
|
id="image917"
|
|
x="597.66241"
|
|
y="-82.246162" />
|
|
<text
|
|
id="text927"
|
|
y="63.765812"
|
|
x="542.91345"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:5.96850729px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.14921269"
|
|
xml:space="preserve"><tspan
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:5.96850729px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.14921269"
|
|
y="63.765812"
|
|
x="542.91345"
|
|
id="tspan925">20 cases</tspan></text>
|
|
<text
|
|
xml:space="preserve"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:0.80000001;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
|
|
x="541.38544"
|
|
y="1.2943537"
|
|
id="text931"><tspan
|
|
id="tspan929"
|
|
x="541.38544"
|
|
y="1.2943537"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:0.80000001;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924">1.200</tspan><tspan
|
|
id="tspan939"
|
|
x="541.38544"
|
|
y="7.1525693"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:0.80000001;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924">cases</tspan></text>
|
|
<text
|
|
id="text935"
|
|
y="-48.44733"
|
|
x="540.32709"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
|
|
xml:space="preserve"><tspan
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924"
|
|
y="-48.44733"
|
|
x="540.32709"
|
|
id="tspan933">120 cases</tspan></text>
|
|
<path
|
|
id="path937"
|
|
d="M 540.57238,-79.730199 Z"
|
|
style="fill:none;stroke:var(--primary-color);stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
|
<text
|
|
xml:space="preserve"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
|
|
x="603.58911"
|
|
y="37.606449"
|
|
id="text972"><tspan
|
|
id="tspan970"
|
|
x="603.58911"
|
|
y="37.606449"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924">1.340 cases</tspan></text>
|
|
<text
|
|
id="text976"
|
|
y="-24.546719"
|
|
x="608.34381"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
|
|
xml:space="preserve"><tspan
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924"
|
|
y="-24.546719"
|
|
x="608.34381"
|
|
id="tspan974">800 cases</tspan></text>
|
|
<text
|
|
xml:space="preserve"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
|
|
x="479.47293"
|
|
y="-66.438972"
|
|
id="text1006"><tspan
|
|
id="tspan1004"
|
|
x="479.47293"
|
|
y="-66.438972"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924">M</tspan></text>
|
|
<text
|
|
id="text1010"
|
|
y="-13.522312"
|
|
x="480.53125"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
|
|
xml:space="preserve"><tspan
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924"
|
|
y="-13.522312"
|
|
x="480.53125"
|
|
id="tspan1008">F</tspan></text>
|
|
<text
|
|
xml:space="preserve"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
|
|
x="481.06042"
|
|
y="44.686024"
|
|
id="text1014"><tspan
|
|
id="tspan1012"
|
|
x="481.06042"
|
|
y="44.686024"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924">?</tspan></text>
|
|
<text
|
|
id="text1018"
|
|
y="-66.438972"
|
|
x="742.99786"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
|
|
xml:space="preserve"><tspan
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924"
|
|
y="-66.438972"
|
|
x="742.99786"
|
|
id="tspan1016">M</tspan></text>
|
|
<text
|
|
xml:space="preserve"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
|
|
x="744.05621"
|
|
y="-13.522312"
|
|
id="text1022"><tspan
|
|
id="tspan1020"
|
|
x="744.05621"
|
|
y="-13.522312"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924">F</tspan></text>
|
|
<text
|
|
id="text1026"
|
|
y="44.686024"
|
|
x="744.58539"
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;line-height:1.25;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:var(--primary-color);fill-opacity:1;stroke:none;stroke-width:0.18306924"
|
|
xml:space="preserve"><tspan
|
|
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.32276964px;font-family:'CMU Serif';-inkscape-font-specification:'CMU Serif, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.18306924"
|
|
y="44.686024"
|
|
x="744.58539"
|
|
id="tspan1024">?</tspan></text>
|
|
</g>
|
|
</svg>
|
|
|
|
</div>
|
|
</section>
|
|
<section id='differences'>
|
|
<div class='gender'>
|
|
<h2>Distinctive traits</h2>
|
|
</div>
|
|
<div class='gender'>
|
|
<img src="unknown_side-1000x1000-3.png"><img src="unknown_side-1000x1000-3.png">
|
|
</div>
|
|
<div class='gender'>
|
|
<img src="unknown_side-1000x1000-3.png"><img src="unknown_side-1000x1000-3.png">
|
|
</div>
|
|
<div class='gender'>
|
|
<img src="unknown_side-1000x1000-3.png"><img src="unknown_side-1000x1000-3.png">
|
|
</div>
|
|
|
|
</section>
|
|
<section id='graph'>
|
|
<div id='graph--male' data-width="30%">
|
|
<div class='wrap'><div class='background'></div></div>
|
|
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
|
|
</div>
|
|
<div id='graph--female' data-width="30%">
|
|
<div class='wrap'><div class='background'></div></div>
|
|
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
|
|
</div>
|
|
<div id='graph--unknown' data-width="30%">
|
|
<div class='wrap'><div class='background'></div></div>
|
|
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
|
|
</div>
|
|
</section>
|
|
<!-- <section id='ethnicity'>
|
|
<h2>Reinforced Ethnical Stereotypes</h2>
|
|
<div id='graph'>
|
|
<div id='graph--black-african'>
|
|
<div class='background'></div>
|
|
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
|
|
</div>
|
|
<div id='graph--caucasian'>
|
|
<div class='background'></div>
|
|
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
|
|
</div>
|
|
<div id='graph--east-asian'>
|
|
<div class='background'></div>
|
|
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
|
|
</div>
|
|
<div id='graph--hispanic'>
|
|
<div class='background'></div>
|
|
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
|
|
</div>
|
|
<div id='graph--south-asian'>
|
|
<div class='background'></div>
|
|
<div class='cases'><span class='nr'>0</span> <span class='txt'>cases</span></div>
|
|
</div>
|
|
</div>
|
|
</section> -->
|
|
<div id='affdex'>* according to the 2018 edition of Affectiva's gender detection toolkit</div>
|
|
<div id='signature'>
|
|
<!-- — -->
|
|
Ruben van de Ven
|
|
<!-- — -->
|
|
</div>
|
|
</body>
|
|
</html>
|