shooflenet/articles/circle_script/circle_setter.html

695 lines
34 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<script src="../../static/jquery.min.js" type="text/javascript"></script>
<link href="../../static/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="../../static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="../../static/shoofle.css" rel="stylesheet" type="text/css">
<script src="circle_setter_utils.js" type="text/javascript"></script>
<script src="circle_setter.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
#testbed { display: none; }
td svg {
width: 100px;
}
th label svg {
display: none;
}
#consonant-grid, #vowel-grid {
margin-left: auto;
margin-right: auto;
}
td {
padding: 0.25em;
}
.vowel-example {
padding: 1em;
}
td, .vowel-sequence {
border: 2px solid gray;
}
table > img {
width: 50%;
height: 50%;
}
svg#arena circle, svg#arena path { fill: none; stroke: #600; }
svg#arena .consonant { stroke: #600; fill: none; }
svg#arena .radical { stroke: #004; }
svg#arena circle.radical { fill: black; }
svg#arena circle { stroke: #044; }
.highlit { fill: red; }
.veryhighlit { fill: green; }
.clicked { fill: darkgreen; }
.placeholder { fill: lightblue; }
.chosen { fill: blue;stroke: red; }
rect { fill:transparent; }
#delete { fill:pink; }
svg#arena .enclosure { stroke: #000; }
#vowel-grid {
display: block;
}
.vowel-sequence {
display: block;
}
.vowel-example {
display: inline-block;
}
.vowel-example * {
vertical-align: middle;
}
.vowel-example > svg {
width: 3.5em;
height: 3.5em;
}
.unverified {
color: lightgray;
}
</style>
<svg id="testbed" width=800><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
class="angle-1" class="megaglyph"><path
style="opacity:1;fill:none;stroke:#000000;stroke-width:2.88527;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -14.06223,75.917879 H 39.968325 L 39.843832,126.71158"
class="glyph" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 5.6174494,75.22561 C 6.0813724,41.977797 -0.2589083,-1.1670398 -0.2589083,-1.1670398"
class="line_2"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 22.988704,75.145855 C 23.452627,41.898043 28.865062,-0.93751155 28.865062,-0.93751155"
class="line_3"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 14.502302,74.634887 c 0.463923,-33.247813 0,-74.22767555 0,-74.22767555"
class="line_1" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -6.0317653,62.94798 C 7.2673588,45.937471 9.7416152,47.32924 13.298357,50.576701"
id="path1720" class="dot_2"/>
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 4.9623979,42.300769 C 18.261522,25.29026 20.735778,26.682029 24.292521,29.92949"
id="path1720-7" class="dot_1"/>
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 16.096549,63.950507 C 29.395673,46.939999 31.86993,48.331768 35.426672,51.579229"
id="path1720-1" class="dot_3"/>
</g></svg>
<div class="row-fluid">
<div class="span4"><!-- consonants -->
<form id="consonant_form">
<table id="consonant-grid">
<thead>
<tr class="header">
<th></th>
<th scope="col" class="diacritic-header">
<input type="radio" id="rad_1" name="radicals" value="example-diacritic-1.svg">
<label for="rad_1"><img src="example-diacritic-1.svg" /></label>
</th>
<th scope="col" class="diacritic-header">
<input type="radio" id="rad_2" name="radicals" value="example-diacritic-2.svg">
<label for="rad_2"><img src="example-diacritic-2.svg" /></label>
</th>
<th scope="col" class="diacritic-header">
<input type="radio" id="rad_3" name="radicals" value="example-diacritic-3.svg">
<label for="rad_3"><img src="example-diacritic-3.svg" /></label>
</th>
<th scope="col" class="diacritic-header">
<input type="radio" id="rad_4" name="radicals" value="example-diacritic-4.svg">
<label for="rad_4"><img src="example-diacritic-4.svg" /></label>
</th>
<th scope="col" class="diacritic-header">
<input type="radio" id="rad_5" name="radicals" value="example-diacritic-5.svg">
<label for="rad_5"><img src="example-diacritic-5.svg" /></label>
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_1_u" name="glyphs" value="consonant-mound-1.svg">
<label for="shape_1_u"><svg>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
class="mound-1 megaglyph"
transform="translate(25,0)"><path
style="fill:none;stroke:#000000;stroke-width:3.38618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -22.108869,113.14142 C -14.825778,68.277574 38.195123,67.792033 47.420373,112.9472"
class="glyph"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 12.100818,78.237112 c 0.463923,-33.247812 0,-74.2276752 0,-74.2276752"
class="line_1" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 3.5161518,80.328763 C 3.9800748,47.08095 -2.3602059,3.9361133 -2.3602059,3.9361133"
class="line_2"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 20.887406,80.249008 C 21.351329,47.001196 26.763764,4.1656416 26.763764,4.1656416"
class="line_3"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -6.9323217,68.201226 C 6.3668024,51.190717 8.8410588,52.582486 12.397801,55.829947"
class="dot_2" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 4.0618415,47.554015 C 17.360965,30.543506 19.835221,31.935275 23.391964,35.182736"
class="dot_1" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 15.195992,69.203753 C 28.495116,52.193245 30.969373,53.585014 34.526115,56.832475"
class="dot_3" /></g>
</svg></label>
</th>
<td>[m]<svg/></td>
<td>[n]<svg/></td>
<td class="unverified">[ñ]</td>
<td>[ŋ]<svg/></td>
<td></td>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_1_v" name="glyphs" value="consonant-mound-2.svg">
<label for="shape_1_v"><img src="consonant-mound-2.svg" /></label>
</th>
</tr>
<tr>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_2_u" name="glyphs" value="consonant-ohm-1.svg">
<label for="shape_2_u"><svg>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
class="omega-1 megaglyph"
transform="translate(25,0)">
<path
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.3829;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -20.755057,77.343458 c 0,0 0,30.618622 0.380829,46.994252 C -23.040029,95.204323 -6.4362494,84.506425 8.6829945,92.576601 23.802242,100.64678 20.107856,123.61413 -0.07606316,123.80455 H 44.10006"
class="glyph"
sodipodi:nodetypes="cczcc" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -1.7099346,89.222829 c 0.46392,-33.24781 0,-74.22767 0,-74.22767"
class="line_1" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 23.690919,125.15467 C 24.154842,91.90686 17.814561,48.76203 17.814561,48.76203"
class="line_2"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 41.062172,125.07492 c 0.46392,-33.24781 5.87636,-76.08337 5.87636,-76.08337"
class="line_3"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -12.402587,73.540483 C -5.9076651,66.117713 20.07202,31.787413 34.91756,47.251513"
class="dot_1"
inkscape:label="dot_1" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 0.413012,80.253857 C 13.712136,63.243348 16.186393,64.635117 19.743135,67.882578"
class="dot_2"
inkscape:label="dot_2" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 22.541326,81.256384 C 35.84045,64.245876 38.314707,65.637645 41.871449,68.885106"
id="path1720-1"
class="dot_3" />
</g>
</svg></label>
</th>
<td>[p], [b]<svg/></td>
<td>[t], [d]<svg/></td>
<td></td>
<td>[k], [g]<svg/></td>
<td class="unverified">[q], [ɢ]</td>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_2_v" name="glyphs" value="consonant-ohm-2.svg">
<label for="shape_2_v"><img src="consonant-ohm-2.svg" /></label>
</th>
</tr>
<tr>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_3_u" name="glyphs" value="consonant-angle-1.svg">
<label for="shape_3_u"><svg>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
class="angle-1 megaglyph"
transform="translate(25,0)">
<path
style="opacity:1;fill:none;stroke:#000000;stroke-width:2.88527;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -14.06223,75.917879 H 39.968325 L 39.843832,126.71158"
class="glyph" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 5.6174494,75.22561 C 6.0813724,41.977797 -0.2589083,-1.1670398 -0.2589083,-1.1670398"
class="line_2"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 22.988704,75.145855 C 23.452627,41.898043 28.865062,-0.93751155 28.865062,-0.93751155"
class="line_3"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 14.502302,74.634887 c 0.463923,-33.247813 0,-74.22767555 0,-74.22767555"
class="line_1" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -6.0317653,62.94798 C 7.2673588,45.937471 9.7416152,47.32924 13.298357,50.576701"
id="path1720" class="dot_2"/>
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 4.9623979,42.300769 C 18.261522,25.29026 20.735778,26.682029 24.292521,29.92949"
id="path1720-7" class="dot_1"/>
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 16.096549,63.950507 C 29.395673,46.939999 31.86993,48.331768 35.426672,51.579229"
id="path1720-1" class="dot_3"/>
</g>
</svg></label>
</th>
<td>[f], [v]<svg></svg></td>
<td>[s], [z]<svg></svg></td>
<td>[ʃ], [ʒ]<svg></svg></td>
<td></td>
<td class="unverified">[ʔ], [ʡ]<svg></svg></td>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_3_v" name="glyphs" value="consonant-angle-2.svg">
<label for="shape_3_v"><img src="consonant-angle-2.svg" /></label>
</th>
</tr>
<tr>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_4_u" name="glyphs" value="consonant-loop-1.svg">
<label for="shape_4_u"><svg>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
class="loop-1 megaglyph"
transform="translate(25,0)"><path
style="fill:none;stroke:#000000;stroke-width:3.47853;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -17.664457,111.5189 c 17.71094207,0 50.4325,2.83413 56.735052,-9.45585 C 43.573377,93.28263 38.467691,81.072874 30.440263,79.305245 19.108262,76.809953 6.7206019,82.850589 6.8006582,96.359531 c 0.093399,15.760439 0.600371,39.624479 0.600371,39.624479"
class="path1628"
sodipodi:nodetypes="csssc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 23.808051,77.786834 c 0.463923,-33.247812 0,-74.2276754 0,-74.2276754"
class="line_1" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 15.223385,80.178675 C 15.687308,46.930858 9.347027,3.7860214 9.347027,3.7860214"
class="line_2"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 32.594639,80.098915 C 33.058562,46.851104 38.470997,4.0155494 38.470997,4.0155494"
class="line_3"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 4.774911,69.552061 C 18.074035,52.541552 20.548292,53.933321 24.105034,57.180782"
class="dot_2" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 15.769074,48.90485 C 29.068198,31.894341 31.542454,33.28611 35.099197,36.533571"
class="dot_1" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 26.903225,70.554588 C 40.202349,53.54408 42.676606,54.935849 46.233348,58.18331"
class="dot_3" /></g>
</svg></label>
</th>
<td>[θ], [ð]<svg/></td>
<td class="unverified">[ts]<svg/></td>
<td>[tʃ], [dʒ]<svg/></td>
<td>[x~χ], <span class="unverified">[ʁ]</span><svg/></td>
<td></td>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_4_v" name="glyphs" value="consonant-loop-2.svg">
<label for="shape_4_v"><img src="consonant-loop-2.svg" /></label>
</th>
</tr>
<tr>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_5_u" name="glyphs" value="consonant-wave-1.svg">
<label for="shape_5_u"><svg>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
class="wave-1 megaglyph"
transform="translate(25,0)"><path
style="fill:none;stroke:#000000;stroke-width:3.47853;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -22.617516,106.41574 C -10.15982,87.804245 -3.4056477,76.397198 -3.4056477,76.397198 c 0,0 -3.1519473,26.266232 11.2569551,26.116132 C 22.260209,102.36324 26.913083,76.847476 26.913083,76.847476 l 23.414466,29.868454"
class="glyph"
sodipodi:nodetypes="ccscc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 8.1984075,103.1525 c 0.463923,-33.247807 0,-74.22767 0,-74.22767"
class="line_1" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -3.3881142,77.627094 C -2.9241912,44.379281 -9.2644719,1.2344442 -9.2644719,1.2344442"
class="line_2"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 26.891115,78.748081 C 27.355038,45.500269 32.767473,2.6647142 32.767473,2.6647142"
class="line_3"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -7.8328782,68.651504 C 5.4662459,51.640995 7.9405023,53.032764 11.497244,56.280225"
class="dot_2" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 3.161285,48.004293 C 16.460409,30.993784 18.934665,32.385553 22.491408,35.633014"
class="dot_1" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 14.295436,69.654031 C 27.59456,52.643523 30.068817,54.035292 33.625559,57.282753"
class="dot_3" /></g>
</svg></label>
</th>
<td>[w]<svg/></td>
<td>[ɹ], [l]<svg/></td>
<td>[ɾ~r], <span class="unverified">[ɬ]</span><svg/></td>
<td>[j]<svg/></td>
<td>[h]<svg/></td>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_5_v" name="glyphs" value="consonant-wave-2.svg">
<label for="shape_5_v"><img src="consonant-wave-2.svg" /></label>
</th>
</tr>
</tbody>
</table>
</form>
</div>
<div class="span4 ">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="400px" preserveAspectRatio="xMidYMax" id="arena" viewBox="-75 -105 150 210" draggable="false">
<rect x="-200" y="-1" width="400" height="2"/>
<defs>
</defs>
<g transform="translate(-100,0)" id="place_group">
<g transform="scale(0.5)" >
<rect x="-30" y="-70" width="60" height="70"/>
<image x="-25" y="-70" class="radical placeholder"/>
<image x="-25" y="-50" class="glyph placeholder"/>
</g>
</g>
<circle cx="0" cy="0" r="60" id="word_circle" />
<rect x="-50" id="delete" y="80" width="100" height="80"/>
<g transform="translate(100,0)" id="vowel_place_group">
<g id="vowel_copy_from_here">
<rect x="-15" y="-35" width="30" height="35"/>
<g id="vowel_put_it_in_here" transform="translate(-6,-30) scale(0.5)"></g>
</g>
</g>
</svg>
</div>
<div class="span4">
<div id="vowel-grid">
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137"
id="base-omega"
sodipodi:nodetypes="cczzzcc" />
<circle
id="dot-outer"
cx="12.504731"
cy="50.600185"
r="7.9595795" />
<path
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="m 12.50473,58.701897 c 0,15.634887 0,15.634887 0,15.634887"
id="emphasis-outer" />
</svg>
[ɑ, a], box or bah
</div>
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137"
id="base-omega"
sodipodi:nodetypes="cczzzcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-outer"
cx="12.504731"
cy="50.600185"
r="7.9595795" />
</svg>
[ʌ, ə], but or schwa
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
id="base-mound"
sodipodi:nodetypes="cczcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-inner"
cx="12.50473"
cy="14.924212"
r="7.9595795" />
<path
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
id="emphasis-inner" />
</svg>
[i], beat
</div>
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
id="base-mound"
sodipodi:nodetypes="cczcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-inner"
cx="12.50473"
cy="14.924212"
r="7.9595795" />
</svg>
[ɪ], bit
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
id="base-mound"
sodipodi:nodetypes="cczcc" />
<path
sodipodi:type="star"
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="triangle-inner"
sodipodi:sides="3"
sodipodi:cx="12.602679"
sodipodi:cy="15.606641"
sodipodi:r1="8.7842556"
sodipodi:r2="8.4311752"
sodipodi:arg1="-1.565766"
sodipodi:arg2="-0.51856839"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="M 12.646867,6.822496 20.187878,20.036981 4.9732929,19.960446 Z"
inkscape:transform-center-x="0.11044414"
inkscape:transform-center-y="-0.12140727" />
<path
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
id="emphasis-inner" />
</svg>
[u], boot
</div>
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
id="base-mound"
sodipodi:nodetypes="cczcc" />
<path
sodipodi:type="star"
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="triangle-inner"
sodipodi:sides="3"
sodipodi:cx="12.602679"
sodipodi:cy="15.606641"
sodipodi:r1="8.7842556"
sodipodi:r2="8.4311752"
sodipodi:arg1="-1.565766"
sodipodi:arg2="-0.51856839"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="M 12.646867,6.822496 20.187878,20.036981 4.9732929,19.960446 Z"
inkscape:transform-center-x="0.11044414"
inkscape:transform-center-y="-0.12140727" />
</svg>
[ʊ], book
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
id="base-mound"
sodipodi:nodetypes="cczcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-outer"
cx="12.504731"
cy="50.600185"
r="7.9595795" />
<path
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="m 12.50473,58.701897 c 0,15.634887 0,15.634887 0,15.634887"
id="emphasis-outer" />
</svg>
[ɛi, e], bait
</div>
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
id="base-mound"
sodipodi:nodetypes="cczcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-outer"
cx="12.504731"
cy="50.600185"
r="7.9595795" />
</svg>
[ɛ], bet
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137"
id="base-omega"
sodipodi:nodetypes="cczzzcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-inner"
cx="12.50473"
cy="14.924212"
r="7.9595795" />
<path
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
id="emphasis-inner" />
</svg>
[o, ɔu], won't, boat
</div>
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137"
id="base-omega"
sodipodi:nodetypes="cczzzcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-inner"
cx="12.50473"
cy="14.924212"
r="7.9595795" />
</svg>
[ɔ], bawk
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137"
id="base-omega"
sodipodi:nodetypes="cczzzcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-on"
cx="12.646866"
cy="31.411909"
r="7.9595795" />
</svg>
[æ], bat
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
d="m -24.143392,69.705313 c 21.9728073,0 54.541558,-0.600371 58.120012,-22.089973 C 35.199043,37.798618 21.290897,32.244199 12.511064,32.347864 3.742928,32.451391 -10.546513,37.771707 -8.5599175,48.096898 -4.5769567,68.798058 27.981866,69.673483 49.560097,69.531345"
id="base-loop"
sodipodi:nodetypes="ccssc" />
<circle
id="dot-outer"
cx="12.504731"
cy="50.600185"
r="7.9595795" />
</svg>
[au], cow
</div>
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
d="m -24.143392,69.705313 c 21.9728073,0 54.541558,-0.600371 58.120012,-22.089973 C 35.199043,37.798618 21.290897,32.244199 12.511064,32.347864 3.742928,32.451391 -10.546513,37.771707 -8.5599175,48.096898 -4.5769567,68.798058 27.981866,69.673483 49.560097,69.531345"
id="base-loop"
sodipodi:nodetypes="ccssc" />
<circle
id="dot-on"
cx="12.646866"
cy="31.411909"
r="7.9595795" />
</svg>
[ai, aɪ], by
</div>
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
d="m -24.143392,69.705313 c 21.9728073,0 54.541558,-0.600371 58.120012,-22.089973 C 35.199043,37.798618 21.290897,32.244199 12.511064,32.347864 3.742928,32.451391 -10.546513,37.771707 -8.5599175,48.096898 -4.5769567,68.798058 27.981866,69.673483 49.560097,69.531345"
id="base-loop"
sodipodi:nodetypes="ccssc" />
<circle
id="dot-inner"
cx="12.50473"
cy="14.924212"
r="7.9595795" />
</svg>
[ɔi, ɔɪ], boy
</div>
</div>
</div>
</div>
</div>
<hr>
<h2 id="xthing">x value is something</h2>
</body>
</html>