HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
h1 Interactive Inky Figure & Figcaption Pairing
figure#fig1
img.frame(src="//upload.wikimedia.org/wikipedia/commons/0/06/Treasure-island01.png")
figcaption.frame
span(data-region="0.88 0.73 0.2 0.15") Jim Hawkins
span hiding in the apple-barrel, listening to
span(data-region="0.28 0.47 0.37 0.25") the pirates
@import url('https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister|Satisfy');
body {
min-height:100vh;
display:flex; flex-flow:row nowrap; align-items:start;
}
h1 {
font:3.3em/1 "love ya like a sister", cursive;
width:min-content;
order:2;
text-align:left;
margin:1em 1em 1em 0;
transform-origin:left top;
animation:fx 0.3s 4 alternate;
z-index:-1;
}
@keyframes fx {
0 {transform:rotate(0)}
100% {transform:rotate(10deg)}
}
figure {
position:relative; align-self:start;
filter:drop-shadow(0 0 3px black);
width:260px;
margin:1em;
order:1;
}
figcaption {
width:100%;
padding:0.5em;
border-width:0 0.3em 1.5em 0.5em;
box-sizing:border-box;
background-image:linear-gradient(black,black);
background-clip:padding-box;
color:lightgray;
font:1em/1 "satisfy", cursive;
text-align:center;
}
img {
box-sizing:border-box;
display:block;
border-width:0.3em 0.3em 0;
width:100%; height:auto;
}
figcaption [data-region] {
color:white;
font-size:1.1em;
text-decoration:underline;
overflow:hidden;
animation:guide 2s alternate 2;
}
@keyframes guide {
0% {background:transparent;color:white}
100% {background:yellow;color:black}
}
figcaption [data-region]:hover {
background:yellow;color:black;
}
.region {
position:absolute;
box-sizing:border-box; border-width:0.3em;
transition:all 0.3s;
box-shadow:inset 0 0 0.3em 0.1em white;
}
.region.hide { opacity:0; }
/*
The only SVG used for styling <img>, <figcaption>, .region and even <figure>, <h1> etc.
All .frame-applied elms must set their own `border-width`,
some fx can be achived by overwriting below props on them.
1 `border-image-slice` (select diff samples)
2 `border-width` (big num can distort sample, see #fig3 figcaption)
3 `border-image-repeat` (only used `stretch` in this pen)
4 `border-image-outset` (ignored in this pen)
5 `background-image:radial-gradient` plus `background-clip` (vignette effect, see .region)
6 `filter:drop-shadow` with hugh offset (thicker frameborder in ANY sides)
*/
.frame {
border-style:solid;
border-image-slice:30 38 30 37;
border-image-repeat:stretch;
border-image-source:url('data:image/svg+xml;utf8,%3Csvg%20%20%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20%20%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20%20%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20%20%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20%20id%3D%22svg8%22%20%20%20version%3D%221.1%22%20%20%20viewBox%3D%220%200%2079.374998%2079.375002%22%20%20%20height%3D%22300%22%20%20%20width%3D%22300%22%3E%20%20%3Cdefs%20%20%20%20%20id%3D%22defs2%22%20%2F%3E%20%20%3Cmetadata%20%20%20%20%20id%3D%22metadata5%22%3E%20%20%20%20%3Crdf%3ARDF%3E%20%20%20%20%20%20%3Ccc%3AWork%20%20%20%20%20%20%20%20%20rdf%3Aabout%3D%22%22%3E%20%20%20%20%20%20%20%20%3Cdc%3Aformat%3Eimage%2Fsvg%2Bxml%3C%2Fdc%3Aformat%3E%20%20%20%20%20%20%20%20%3Cdc%3Atype%20%20%20%20%20%20%20%20%20%20%20rdf%3Aresource%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fdcmitype%2FStillImage%22%20%2F%3E%20%20%20%20%20%20%20%20%3Cdc%3Atitle%3E%3C%2Fdc%3Atitle%3E%20%20%20%20%20%20%3C%2Fcc%3AWork%3E%20%20%20%20%3C%2Frdf%3ARDF%3E%20%20%3C%2Fmetadata%3E%20%20%3Cg%20%20%20%20%20transform%3D%22translate(0%2C-217.62499)%22%20%20%20%20%20id%3D%22layer1%22%3E%20%20%20%20%3Cpath%20%20%20%20%20%20%20id%3D%22path1166%22%20%20%20%20%20%20%20d%3D%22m%203.9687533%2C218.94791%20c%20-5.4940912%2C0%20-5.4940912%2C8.16173%200%2C8.16173%200.3954051%2C-0.0948%200.7765291%2C-0.19531%201.1548428%2C-0.29031%20-0.1954806%2C0.45024%20-0.3346142%2C0.96607%20-0.3909388%2C1.55776%200.089823%2C0.76277%200.2343745%2C1.52056%200.2696132%2C2.28826%200.077846%2C1.69624%20-0.263177%2C3.34565%20-0.1831121%2C5.03087%20-0.6400113%2C0.83537%20-0.9441902%2C2.01582%20-0.5987661%2C3.4613%201.1797996%2C2.55699%200.607786%2C1.18729%201.6839587%2C4.12453%200.163972%2C0.88361%200.3128111%2C1.77052%200.4875504%2C2.65174%200.041276%2C0.39736%200.086042%2C0.79427%200.1246961%2C1.19193%200.1370964%2C1.41044%200.3660464%2C2.81657%200.380829%2C4.23428%200.013087%2C1.24741%20-0.5300937%2C5.79203%20-0.6021361%2C7.16925%20-0.169068%2C3.23188%20-0.064114%2C2.94749%200.3594842%2C6.04813%20-0.172465%2C0.9234%200.1791681%2C1.67889%200.5650644%2C2.42161%20-0.051529%2C0.64871%200.029235%2C-0.37297%20-0.064033%2C0.80839%200.029087%2C1.14695%200.041233%2C2.2949%200.087624%2C3.44124%200.1579309%2C3.9021%200.2170617%2C2.30005%200.2606261%2C5.99267%200.010826%2C0.91132%200.1449377%2C1.8385%20-0.014604%2C2.73434%20-0.3149813%2C1.76883%20-1.481694%2C3.30418%20-1.4559112%2C5.17721%20-0.1245794%2C0.47985%20-0.1663883%2C0.92712%20-0.1449176%2C1.3418%20-4.0421827%2C1.15567%20-3.619209%2C7.78999%201.2750458%2C7.78999%203.5791749%2C-1.5347%203.4770659%2C-1.79636%207.4851349%2C-2.20329%201.46374%2C-0.1489%202.955473%2C0.0967%204.409302%2C-0.13572%201.612594%2C-0.25778%203.117522%2C-1.0555%204.728339%2C-1.32528%201.104801%2C-0.18555%202.227744%2C-0.18367%203.348823%2C-0.20888%200.544299%2C0.28198%201.196311%2C0.45081%201.962554%2C0.45081%201.225007%2C0.10071%202.03051%2C0.21914%203.267941%2C0.10976%200.489106%2C-0.0433%200.961716%2C-0.2519%201.452541%2C-0.25374%201.729476%2C-0.007%201.128493%2C0.96292%203.392628%2C0.19355%200.59874%2C-0.20346%201.016225%2C-0.77326%201.514332%2C-1.18131%200.467553%2C-0.0326%200.934935%2C-0.0664%201.401988%2C-0.10857%200.108254%2C0.0498%200.24453%2C0.11007%200.527993%2C0.20062%200.212965%2C0.0681%200.448361%2C0.0548%200.652686%2C0.14752%200.256556%2C0.11649%200.436183%2C0.40647%200.708857%2C0.47087%200.369676%2C0.0875%200.758005%2C-0.0411%201.136867%2C-0.0342%200.275606%2C0.005%200.548705%2C0.0463%200.823449%2C0.0696%200.319262%2C0.0703%200.632491%2C0.22951%200.958247%2C0.21124%202.944837%2C-0.85581%20-0.590101%2C-0.0465%202.179372%2C-0.026%200.130714%2C10e-4%200.148377%2C-0.32053%200.276354%2C-0.29267%204.818797%2C1.05149%20-3.152292%2C0.3679%202.893848%2C0.71161%202.759493%2C0.45498%20-0.08567%2C0.15493%202.900589%2C-0.0944%200.472126%2C-0.0395%200.949044%2C0.0101%201.418841%2C0.0732%200.43061%2C0.0578%200.839847%2C0.2948%201.27392%2C0.28795%203.047754%2C-0.045%20-0.425508%2C-0.77905%202.389449%2C-0.0189%200.002%2C0.0697%200.01522%2C0.13051%200.07077%2C0.15814%200.06352%2C0.0315%200.132031%2C0.0441%200.19996%2C0.0602%200.0034%2C0.005%200.0067%2C0.0102%200.01011%2C0.0153%200.01805%2C-0.003%200.06363%2C0.01%200.121327%2C0.0283%20-0.0057%2C-0.004%20-0.0112%2C-0.009%20-0.01685%2C-0.013%200.181582%2C0.0258%200.372034%2C0.0245%200.5572%2C0.0401%20-0.212791%2C-0.1354%20-0.428275%2C-0.26651%20-0.644822%2C-0.39652%200.173944%2C-0.1185%200.349326%2C-0.24756%200.504399%2C-0.15106%200.153928%2C0.0958%200.244323%2C0.34446%200.235914%2C0.5582%200.09639%2C0.0129%200.191004%2C0.0315%200.280846%2C0.0684%200.0968%2C0.0399%20-0.0024%2C0.062%20-0.149413%2C0.0696%20-0.04223%2C-0.0298%20-0.08607%2C-0.0576%20-0.12919%2C-0.0862%20-0.0039%2C0.0305%20-0.0101%2C0.0586%20-0.0191%2C0.0862%20-0.05453%2C-10e-4%20-0.106528%2C-10e-4%20-0.159519%2C-0.006%200.04145%2C0.02%200.08681%2C0.043%200.134804%2C0.0673%20-0.01308%2C0.024%20-0.02624%2C0.0482%20-0.04493%2C0.0673%20-0.165127%2C0.16831%20-0.449585%2C-0.10788%20-0.633595%2C-0.27733%200.232566%2C0.35295%200.466743%2C0.7042%200.759415%2C1.00074%200.196698%2C0.19931%200.419998%2C0.36547%200.648193%2C0.52634%20-0.09048%2C-0.13573%20-0.181686%2C-0.2719%20-0.274105%2C-0.40478%20-0.03261%2C-0.0468%20-0.06805%2C-0.20678%20-0.02359%2C-0.1723%200.479955%2C0.37181%200.910341%2C0.80907%201.36604%2C1.21317%200.108996%2C0.21046%200.122725%2C0.527%200.328028%2C0.63137%200.441729%2C0.22468%200.962509%2C0.20497%201.44917%2C0.27142%200.01622%2C0.002%200.05289%2C0.0114%200.07077%2C0.0142%203.002626%2C1.89517%206.086103%2C-0.32321%206.524639%2C-3.16509%200.09725%2C-0.0724%200.192178%2C-0.14753%200.283096%2C-0.22776%202.462012%2C0.8029%205.576279%2C-0.6971%205.591101%2C-4.52341%20-1.082249%2C-0.77847%200.318727%2C-0.25735%200.244898%2C-0.83199%20-0.204475%2C-1.59163%20-0.730162%2C0.70704%20-0.294329%2C-0.80131%20-0.823656%2C-0.71285%20-0.632214%2C-0.25794%200.150535%2C-0.83789%200.06665%2C-0.0493%20-0.163188%2C0.0219%20-0.240406%2C0.0496%20-0.02837%2C0.0101%20-0.06738%2C0.0917%20-0.06853%2C0.0602%20-0.0048%2C-0.11377%200.03816%2C-0.22421%200.05729%2C-0.33634%20-0.01219%2C-0.28669%20-0.02489%2C-0.57361%20-0.03707%2C-0.86031%200.06906%2C-0.60516%200.182313%2C-1.23312%200.131439%2C-1.85161%200.06216%2C-0.0742%200.1228%2C-0.20977%200.06403%2C-0.23603%20-0.03025%2C-0.0135%20-0.06311%2C-0.0167%20-0.09436%2C-0.026%20-0.01678%2C-0.10116%20-0.0391%2C-0.20192%20-0.0674%2C-0.30211%20-0.03409%2C-0.12069%20-0.09652%2C-0.3014%20-0.168504%2C-0.49093%206.96e-4%2C-0.004%200.0029%2C-0.007%200.0034%2C-0.0106%200.04229%2C-0.29766%20-0.180829%2C-0.5721%20-0.241527%2C-0.86621%20-0.12999%2C-0.62992%20-0.188192%2C-0.97182%20-0.214563%2C-1.16951%200.03417%2C0.0387%200.06043%2C0.0654%200.05167%2C0.0319%20-0.03681%2C-0.11735%20-0.03502%2C-0.11635%20-0.06853%2C-0.22423%200.0021%2C0.0442%20-8.1e-5%2C0.0641%200.01685%2C0.19119%20-0.03032%2C-0.0344%20-0.06673%2C-0.0775%20-0.08875%2C-0.098%20-0.03318%2C-0.0895%20-0.138634%2C-0.18183%20-0.09998%2C-0.26906%200.02738%2C-0.0617%200.05182%2C-0.0918%200.07752%2C-0.1369%200.04041%2C0.13185%200.04769%2C0.16245%200.09436%2C0.31273%20-0.0038%2C-0.0822%20-0.02103%2C-0.16717%20-0.08201%2C-0.33515%200.372506%2C-0.62603%200.543563%2C0.33491%200.02359%2C-0.98894%200.02824%2C-0.44306%200.05601%2C-0.88577%200.08425%2C-1.32882%20-0.04377%2C-0.075%20-0.09946%2C-0.14587%20-0.155027%2C-0.21715%20-0.01141%2C0.0563%20-0.02698%2C0.1134%20-0.0337%2C0.16876%20-0.01858%2C0.15297%200.0029%2C0.0468%200.02921%2C-0.17584%20-0.05505%2C-0.0703%20-0.109318%2C-0.14119%20-0.165139%2C-0.21124%20-0.03655%2C-0.25512%20-0.09803%2C-0.56477%20-0.167387%2C-0.91223%200.106793%2C-0.12206%200.246376%2C-0.22043%200.348251%2C-0.21596%20-0.05635%2C-0.31758%20-0.186926%2C-0.50373%20-0.457218%2C-0.32572%20-0.02628%2C-0.0981%20-0.06191%2C-0.19304%20-0.09099%2C-0.29031%200.01054%2C0.0824%200.03112%2C0.21314%200.04718%2C0.32571%20-0.03708%2C0.0281%20-0.07254%2C0.0506%20-0.114586%2C0.092%200.0071%2C-0.34102%200.0087%2C-0.4882%200.01235%2C-0.59124%20-0.06669%2C-0.21072%20-0.132929%2C-0.42087%20-0.210071%2C-0.62783%200.07347%2C-0.25861%200.05047%2C-0.78155%20-0.0022%2C-1.03378%20-0.188612%2C-0.90237%20-0.564143%2C-1.72819%20-1.032393%2C-2.49596%200.05132%2C0.31846%200.135856%2C0.64692%20-0.02472%2C0.89807%20-0.123358%2C0.19292%20-0.412303%2C-0.29226%20-0.440366%2C-0.5228%20-0.02398%2C-0.19686%200.178385%2C-0.34585%200.261745%2C-0.52751%200.06175%2C0.0486%200.112614%2C0.0735%200.143794%2C0.0578%20-0.03465%2C-0.0555%20-0.07%2C-0.11031%20-0.105597%2C-0.16522%200.04145%2C-0.31202%20-0.09517%2C-0.63136%20-0.06403%2C-0.94528%200.10352%2C-1.04394%200.391608%2C0.0678%200.0674%2C-0.85913%20-0.0089%2C-0.20626%20-0.02711%2C-0.41312%20-0.02696%2C-0.61957%201.72e-4%2C-0.27415%200.0726%2C-0.55125%200.02808%2C-0.82136%20-0.06133%2C-0.37192%20-0.343863%2C-0.69647%20-0.340383%2C-1.07391%200.0042%2C-0.46048%200.350425%2C-0.86848%200.361727%2C-1.32882%200.0014%2C-0.0575%20-0.04982%2C-0.11657%20-0.126941%2C-0.17348%208.98e-4%2C-0.004%20-0.0021%2C-1.4e-4%20-0.0022%2C-0.001%20-0.07539%2C-0.0553%20-0.175836%2C-0.10417%20-0.290958%2C-0.14515%20-0.0013%2C0.0322%200.0033%2C0.0649%200.0011%2C0.0968%20-0.02239%2C-0.0293%20-0.04697%2C-0.0724%20-0.0719%2C-0.11565%20-0.0085%2C-0.003%20-0.01722%2C-0.005%20-0.02584%2C-0.007%20-0.0093%2C-0.0322%20-0.0213%2C-0.0774%20-0.03146%2C-0.11447%20-0.05973%2C-0.12198%20-0.121943%2C-0.26125%20-0.194346%2C-0.47913%20-0.01063%2C-0.032%20-0.0014%2C-0.0778%200.01573%2C-0.1251%20-0.07771%2C-0.24228%20-0.149948%2C-0.40787%20-0.17862%2C-0.15341%20-0.426625%2C-1.84709%20-0.180945%2C0.0187%200.18424%2C-1.88466%200.05989%2C-0.3122%20-0.116801%2C-0.65019%20-0.02809%2C-0.95472%200.03839%2C-0.13177%200.267439%2C-0.073%200.356114%2C-0.17465%200.258569%2C-0.29604%20-0.579489%2C-1.14851%20-0.03033%2C-1.20491%200.0731%2C-2.0113%200.261192%2C-0.47606%20-0.569555%2C-1.98261%200.08854%2C-0.0747%200.213654%2C-0.10898%200.313424%2C-0.17112%20-0.01915%2C-0.0756%20-0.04751%2C-0.14893%20-0.05729%2C-0.22658%20-0.01283%2C-0.0998%200.03219%2C-0.21122%20-0.009%2C-0.30211%20-0.07785%2C-0.17203%20-0.351219%2C-0.26244%20-0.332525%2C-0.45199%200.02463%2C-0.24979%200.354267%2C-0.36228%200.435873%2C-0.59832%200.06526%2C-0.18905%20-0.04202%2C-0.40323%20-0.02022%2C-0.60305%200.0128%2C-0.11737%200.08167%2C-0.22036%200.122449%2C-0.33043%200.589365%2C-0.63559%200.294536%2C-0.0891%20-0.186483%2C-0.68801%20-0.170999%2C-0.21286%200.257454%2C-0.80602%200.03595%2C-0.49447%20-0.09337%2C0.13124%20-0.198815%2C0.9001%200.01235%2C-0.30566%20-1.073954%2C-1.88648%200.385195%2C0.9434%20-0.267364%2C-1.49285%20-0.113804%2C-0.4249%20-0.533986%2C-0.7191%20-0.622356%2C-1.15062%20-0.235045%2C-1.14789%200.664614%2C-2.17701%200.38757%2C-3.31851%20-0.138054%2C-1.19219%20-0.234528%2C-1.18922%200.0865%2C-2.47354%200.185742%2C-0.74309%200.514247%2C-1.44368%200.681899%2C-2.19149%200.165017%2C-0.73601%20-0.326889%2C-1.51867%200.135925%2C-2.22099%200.0088%2C-0.2906%20-0.0045%2C-0.58209%200.02696%2C-0.87093%200.01478%2C-0.1359%200.114696%2C-0.25737%200.111216%2C-0.39416%20-0.01095%2C-0.40654%20-0.254216%2C-0.14915%20-0.448234%2C-0.3387%20-0.224542%2C-0.21942%200.505723%2C-0.93828%20-0.08425%2C-0.9618%200.0967%2C-0.22938%200.20448%2C-0.45517%200.304434%2C-0.68329%200.447739%2C-0.82949%200.8857%2C-1.66453%201.322229%2C-2.50068%200.47315%2C0.11134%200.995386%2C0.15061%201.571619%2C0.0944%20-0.499142%2C-0.80909%20-1.022983%2C-1.53001%20-1.526681%2C-2.20565%200.01944%2C-0.0491%200.03289%2C-0.0984%200.05392%2C-0.14752%200.177913%2C0.0721%200.354912%2C0.14778%200.529115%2C0.22895%200.815776%2C0.38007%201.1028%2C1.92503%201.994016%2C1.87639%201.505278%2C-0.082%204.202491%2C-0.63324%204.007122%2C-2.20329%20-0.296911%2C-2.3862%20-2.712364%2C-3.77817%20-4.429519%2C-5.49819%20-0.03478%2C0.18513%20-0.547451%2C0.64511%20-1.035763%2C1.03614%20-0.01181%2C-0.1646%20-0.332515%2C-0.38598%20-1.100919%2C-0.66323%200.536281%2C-0.16339%201.170498%2C-0.3143%201.962559%2C-0.44844%200.042%2C-0.007%200.07348%2C-0.008%200.09998%2C-0.006%20-0.189416%2C-0.19338%20-0.377987%2C-0.38728%20-0.54484%2C-0.59124%20-0.251898%2C0.0603%20-0.504146%2C0.12026%20-0.756038%2C0.18055%20-0.700765%2C0.0688%20-1.303024%2C0.25884%20-1.810904%2C0.53578%20-0.742165%2C-0.2096%20-1.707481%2C-0.44287%20-2.950019%2C-0.70217%20-0.220298%2C-0.1626%20-0.444766%2C-0.31725%20-0.686391%2C-0.44019%20-0.04217%2C-0.0215%20-0.08718%2C-0.0336%20-0.13256%2C-0.0413%200.122903%2C0.0483%200.332491%2C0.2137%200.687518%2C0.45552%20-0.449436%2C-0.093%20-0.915132%2C-0.18736%20-1.436816%2C-0.28677%20-0.401334%2C0.14675%20-0.794725%2C0.2418%20-1.039134%2C-0.34695%200.08154%2C-0.0286%200.181296%2C-0.0618%200.271857%2C-0.0968%20-0.06317%2C-0.0471%20-0.124905%2C-0.0965%20-0.185356%2C-0.1487%20-0.09926%2C-0.0152%20-0.194553%2C-0.03%20-0.311181%2C-0.0437%200.09437%2C0.006%200.188956%2C0.0131%200.283095%2C0.0212%20-0.192292%2C-0.16849%20-0.376803%2C-0.35256%20-0.576296%2C-0.50745%20-0.288738%2C0.0539%20-0.577228%2C0.10869%20-0.866133%2C0.16167%20-0.143748%2C0.0265%20-0.30471%2C0.15276%20-0.431381%2C0.0767%20-0.469412%2C-0.28208%20-0.749159%2C-0.87337%20-1.250332%2C-1.08689%20-0.689244%2C-0.29349%20-1.000545%2C-0.31486%20-1.133497%2C-0.24547%200.03983%2C-0.21009%200.01149%2C-0.41984%20-0.128068%2C-0.51453%20-0.990589%2C-0.67172%20-2.207464%2C-0.90788%20-3.363421%2C-1.1518%20-0.15398%2C-0.0325%20-0.203911%2C0.25181%20-0.305568%2C0.37764%20-0.09188%2C-0.0944%20-0.158834%2C-0.22614%20-0.275226%2C-0.28323%20-0.13871%2C-0.0681%20-0.529259%2C0.15041%20-0.666168%2C0.16639%20-0.124077%2C0.0137%20-0.255826%2C-0.0428%20-0.375215%2C-0.005%20-0.188761%2C0.0602%20-0.347941%2C0.19467%20-0.522374%2C0.2915%20-0.775531%2C-0.45096%20-0.407948%2C-0.327%20-1.182927%2C-0.47796%20-0.08238%2C-0.016%20-0.179903%2C-0.0958%20-0.248269%2C-0.0448%20-0.08993%2C0.0669%20-0.07743%2C0.23025%20-0.14155%2C0.31863%200.01676%2C0.0208%200.01603%2C0.0172%200.03595%2C0.0425%20-0.01514%2C-0.009%20-0.02932%2C-0.0216%20-0.04381%2C-0.0331%20-0.0088%2C0.0103%20-0.01387%2C0.0246%20-0.02584%2C0.0319%20-0.0047%2C0.003%20-0.03713%2C-0.0554%20-0.06291%2C-0.0932%20-0.02961%2C-0.0204%20-0.05957%2C-0.0415%20-0.09437%2C-0.046%20-0.41771%2C-0.0523%20-0.839807%2C-0.0381%20-1.260438%2C-0.0472%20-0.690199%2C-0.0164%20-1.413838%2C-0.25106%20-2.071533%2C-0.0307%20-0.401035%2C0.13445%20-0.637753%2C0.56619%20-0.893091%2C0.9323%20-0.287415%2C-0.10555%20-0.797945%2C-0.13319%20-0.814459%2C-0.0425%20-0.104032%2C0.0379%20-0.207155%2C0.0754%20-0.311175%2C0.11329%20-0.102709%2C-0.0322%20-0.205257%2C-0.12532%20-0.308932%2C-0.0968%20-0.249718%2C0.0689%20-0.530645%2C0.65584%20-0.674036%2C0.6113%20-1.21179%2C-0.37635%200.584838%2C-1.14454%20-1.022281%2C-0.19236%20-2.218093%2C0.73304%200.386408%2C0.12898%20-2.223183%2C-0.28323%20-1.788425%2C-0.28246%20-1.15433%2C0.61578%20-2.925304%2C0.72106%20-2.555577%2C0.152%20-0.623041%2C-1.15211%20-2.39619%2C0.43665%20-0.934636%2C-0.63768%20-1.124254%2C-1.07643%20-2.211949%2C-0.891%20-0.24491%2C0.0417%20-0.424957%2C0.34193%20-0.672909%2C0.3328%20-0.30004%2C-0.0112%20-0.522512%2C-0.40425%20-0.822322%2C-0.38826%20-2.960631%2C0.16396%201.319365%2C1.08011%20-1.876059%2C0.2077%20-0.268468%2C0.14277%20-0.506832%2C0.38956%20-0.805469%2C0.42838%20-0.747968%2C0.0971%20-1.491629%2C-0.54316%20-2.256888%2C-0.14043%20-0.438496%2C0.0774%20-0.837696%2C0.36733%20-1.281782%2C0.39062%20-0.24908%2C0.0131%20-3.484933%2C-0.5574%20-3.546539%2C-0.56882%20-0.595945%2C0.048%20-1.19136%2C0.0958%20-1.78731%2C0.14397%20-0.466277%2C0.0178%20-0.934176%2C0.0219%20-1.39974%2C0.0543%20-0.326262%2C0.0226%20-0.652018%2C0.0594%20-0.975105%2C0.11211%20-0.389911%2C0.0637%20-0.770285%2C0.29087%20-1.161583%2C0.23721%20-0.370297%2C-0.0507%20-0.62889%2C-0.47884%20-0.998693%2C-0.53342%20-0.287766%2C-0.0425%20-0.556274%2C0.17452%20-0.834676%2C0.26199%20-0.278402%2C-0.0393%20-0.55857%2C-0.16551%20-0.835798%2C-0.11801%20-0.348493%2C0.0598%20-0.532209%2C0.12896%20-0.654934%2C0.19826%20-0.161538%2C-0.0294%20-0.509203%2C-0.093%20-0.639209%2C-0.11684%20-9.03751%2C-2.22254%201.52144%2C0.68774%20-5.498988%2C-2.07229%20-1.713163%2C-0.67348%20-2.2237869%2C-0.33991%20-3.9060202%2C-0.5169%20-0.7233334%2C-0.0761%20-1.4371857%2C-0.23045%20-2.155782%2C-0.34577%20z%20m%2051.3500777%2C1.45273%20c%200.02962%2C0.0204%200.05988%2C0.0386%200.08874%2C0.0614%200.0026%2C-0.003%200.0055%2C-0.006%200.0079%2C-0.009%20-0.265156%2C-0.3292%20-0.177269%2C-0.17017%20-0.09661%2C-0.0519%20z%20m%2011.563032%2C2.97627%20c%200.0091%2C0.008%200.01894%2C0.0145%200.02809%2C0.0224%200.09498%2C0.0146%200.226233%2C0.0267%200.297699%2C0.0425%200.0837%2C0.0185%200.0059%2C0.0606%20-0.112343%2C0.10621%200.116116%2C0.0865%200.235908%2C0.1652%200.368474%2C0.22068%200.133998%2C0.0562%200.49109%2C-0.23962%200.349373%2C-0.26789%20-0.307909%2C-0.0614%20-0.619003%2C-0.0969%20-0.931289%2C-0.12391%20z%20m%200.980719%2C0.61484%20c%200.258668%2C-0.0946%200.519952%2C-0.20693%200.745927%2C-0.16993%20-0.164132%2C-0.0628%20-0.311158%2C0.0117%20-0.940273%2C0.13099%200.07194%2C0.0136%200.123772%2C0.0255%200.194346%2C0.0389%20z%20m%207.63005%2C0.88982%20c%200.02594%2C0.0265%200.04787%2C0.0551%200.07415%2C0.0814%200.0088%2C-0.0469%20-0.01356%2C-0.076%20-0.07415%2C-0.0814%20z%20m%20-0.55383%2C8.03074%20c%200.04041%2C0.0655%200.08259%2C0.12713%200.122449%2C0.19354%20l%20-0.119078%2C-0.19354%20c%20-0.0012%2C1.1e-4%20-0.0022%2C-1.1e-4%20-0.0034%2C0%20z%20m%20-3.254454%2C29.02985%20c%200.06215%2C0.19378%200.122294%2C0.39863%200.178621%2C0.60423%200.01904%2C0.0389%200.03954%2C0.0907%200.05729%2C0.12155%200.02336%2C0.007%200.04817%2C0.0108%200.07077%2C0.0189%200.01269%2C-0.31123%20-0.0086%2C-0.63119%20-0.128062%2C-0.91224%20-0.03321%2C-0.078%20-0.135396%2C0.0482%20-0.178621%2C0.16757%20z%20m%200.806591%2C6.87777%20c%200.01972%2C0.0316%200.04014%2C0.0626%200.05954%2C0.0944%20-0.01667%2C-0.10346%20-0.0299%2C-0.2062%20-0.03033%2C-0.30448%200.01972%2C0.1292%200.0066%2C0.19202%20-0.02921%2C0.21007%20z%20m%201.304255%2C4.25198%20c%200.01833%2C0.0579%200.03765%2C0.11528%200.05505%2C0.17348%20-0.03413%2C-0.26651%20-0.04951%2C-0.33181%20-0.05505%2C-0.17348%20z%20m%200.60326%2C0.78951%20c%200.07119%2C0.40116%200.0241%2C1.00291%20-0.01573%2C1.33943%200.0017%2C0.002%200.0027%2C0.005%200.0045%2C0.007%200.08816%2C-0.43517%200.279385%2C-0.89153%200.111216%2C-1.28515%20-0.01913%2C-0.0448%20-0.05676%2C-0.0595%20-0.09998%2C-0.0614%20z%20m%20-14.405206%2C19.28321%20c%200.256292%2C0.38446%200.516438%2C0.76698%200.850402%2C1.07391%200.08315%2C0.0765%200.35383%2C-0.10828%200.276354%2C-0.19117%20-0.328517%2C-0.35081%20-0.735608%2C-0.60699%20-1.126756%2C-0.88274%20z%20m%20-1.407608%2C-1.52708%20c%20-0.01225%2C-0.0186%20-0.02481%2C-0.0369%20-0.03707%2C-0.0555%20-0.01314%2C0.002%20-0.01536%2C0.01%200.0079%2C0.0307%200.008%2C0.007%200.02075%2C0.017%200.02921%2C0.0248%20z%20m%200.543724%2C0.14279%20c%20-0.03866%2C-0.0187%20-0.097%2C-0.0501%20-0.125819%2C-0.0625%20-0.07776%2C-0.0184%20-0.224663%2C-0.0725%20-0.333648%2C-0.10739%200.07589%2C0.0554%200.155602%2C0.10249%200.241528%2C0.13217%200.05159%2C0.0178%200.131951%2C0.03%200.217939%2C0.0378%20z%20m%200.178615%2C-0.0802%20c%200.0021%2C-0.0166%20-0.0029%2C-0.0348%20-0.0022%2C-0.0519%20-0.03166%2C-0.004%20-0.06343%2C-0.008%20-0.09549%2C-0.0106%200.03262%2C0.0208%200.06551%2C0.0412%200.09773%2C0.0625%20z%20m%201.863704%2C-70.78853%20c%200.0042%2C-7.3e-4%200.02206%2C0.005%200.05841%2C0.0177%200.267175%2C0.0964%200.57349%2C0.1567%200.817824%2C0.30093%200.0054%2C0.0415%200.01383%2C0.0909%200.0146%2C0.11802%20-0.242638%2C-0.12226%20-0.920079%2C-0.43153%20-0.890843%2C-0.43665%20z%20m%200.979592%2C0.40006%20c%200.04803%2C0.0377%200.09976%2C0.0703%200.139302%2C0.11919%200.03149%2C0.0389%200.04346%2C0.0995%200.0483%2C0.1664%20-0.05413%2C-0.0851%20-0.11224%2C-0.17421%20-0.187605%2C-0.28559%20z%20m%2012.046092%2C4.9636%20c%20-0.120033%2C0.0895%20-0.25601%2C0.19506%20-0.343759%2C0.25373%20-0.309507%2C0.20695%20-0.62124%2C0.42116%20-0.933531%2C0.63372%20-0.208846%2C-0.28582%20-0.43118%2C-0.56255%20-0.656062%2C-0.8367%200.687673%2C0.0953%201.489622%2C0.0775%201.933352%2C-0.0507%20z%20m%20-18.369644%2C2.09708%20c%200.0085%2C0.001%200.0168%2C0.003%200.02472%2C0.005%20-0.0086%2C-0.001%20-0.01614%2C-0.003%20-0.02472%2C-0.005%20z%20m%208.916331%2C0.42367%20c%200.106073%2C0.11126%200.318497%2C0.17662%200.317922%2C0.33397%20-2.02e-4%2C0.05%20-0.01597%2C0.0963%20-0.03034%2C0.14279%20-0.0804%2C-0.002%20-0.160077%2C1.2e-4%20-0.2404%2C-0.001%20-0.01612%2C-0.17269%20-0.02317%2C-0.24978%20-0.04719%2C-0.47559%20z%20m%200.05617%2C0.56528%20c%200.06712%2C0.001%200.134171%2C0.003%200.201087%2C0.004%20-0.04793%2C0.10396%20-0.113839%2C0.20382%20-0.170758%2C0.30683%20-0.0085%2C-0.0891%20-0.02045%2C-0.20343%20-0.03033%2C-0.31037%20z%20m%20-22.379015%2C0.005%20c%200.240515%2C0.0104%200.55647%2C0.0565%201.020032%2C0.12863%200.408438%2C0.0636%200.789336%2C0.29903%201.202029%2C0.31273%200.343224%2C0.0111%200.675428%2C-0.34442%201.004307%2C-0.24074%202.814722%2C0.8878%20-0.618295%2C1.05146%201.903024%2C0.75527%200.76072%2C-0.40199%200.580943%2C-0.48244%201.340197%2C-0.32099%200.181772%2C0.0388%200.346301%2C0.15742%200.531364%2C0.17112%200.126964%2C0.009%200.273587%2C-0.0193%200.367347%2C-0.10975%200.119561%2C-0.11522%200.105124%2C-0.57565%200.220188%2C-0.45553%200.200368%2C0.20921%200.118561%2C0.5807%200.177493%2C0.87093%200.428252%2C0.09%200.588438%2C-0.51732%200.948141%2C-0.55112%200.472943%2C-0.0445%200.941441%2C0.14886%201.413222%2C0.20535%20-0.920188%2C2.27774%200.217358%2C1.02254%201.435688%2C-0.25255%20-0.0084%2C0.002%20-0.01629%2C0.005%20-0.02472%2C0.006%20-0.09872%2C0.0163%20-0.192897%2C-0.017%20-0.284217%2C-0.0649%200.132146%2C-0.009%200.261451%2C-0.0189%200.393189%2C-0.0283%20-0.02845%2C0.0297%20-0.05585%2C0.0576%20-0.08426%2C0.0873%200.112372%2C-0.021%200.219429%2C-0.0582%200.323536%2C-0.10503%201.196156%2C-0.0865%202.388545%2C-0.17338%203.561143%2C-0.25609%200.533256%2C0.33642%201.092469%2C0.62328%201.582852%2C0.69627%200.165006%2C0.0246%20-0.04647%2C-0.3471%20-0.06965%2C-0.52043%200.333084%2C0.29934%200.484918%2C0.45161%200.54821%2C0.51925%20-0.0706%2C-0.0979%20-0.155682%2C-0.30403%200.441493%2C-0.14161%200.143569%2C0.0391%200.188571%2C0.28856%200.335896%2C0.30683%200.195123%2C0.0235%200.367037%2C-0.2396%200.559444%2C-0.19826%201.015885%2C0.21886%201.32912%2C0.52527%202.026594%2C1.05385%20-0.17368%2C-0.0354%20-0.346687%2C-0.13517%20-0.521252%2C-0.10503%20-0.0695%2C0.0119%200.06808%2C0.14261%200.13256%2C0.17229%200.404193%2C0.18651%200.840998%2C0.31265%201.271677%2C0.44728%200.05035%2C-0.006%200.107638%2C-0.005%200.161768%2C-0.008%20-6.9e-4%2C0.0193%20-0.0027%2C0.0385%20-0.0034%2C0.0578%200.181611%2C0.0586%200.355601%2C0.12971%200.530236%2C0.20062%20-0.002%2C0.0111%20-0.0022%2C0.019%20-0.0045%2C0.0307%200.004%2C-0.009%200.0083%2C-0.0181%200.01235%2C-0.0271%200.04045%2C0.0165%200.08258%2C0.0297%200.122449%2C0.0472%200.143868%2C0.16915%200.275157%2C0.31547%200.414534%2C0.45553%20-0.181347%2C-0.0436%20-0.424128%2C-0.21354%20-0.593149%2C-0.31981%20-0.0189%2C0.0424%20-0.03667%2C0.0853%20-0.06179%2C0.1251%200.186885%2C0.17076%200.514378%2C0.20074%200.758281%2C0.29738%200.03165%2C0.0305%200.071%2C0.0725%200.09886%2C0.0979%20-0.321908%2C-0.005%20-0.887748%2C-0.13395%20-1.327843%2C-0.33279%20-0.01402%2C0.0742%20-0.0314%2C0.14823%20-0.05505%2C0.2195%20-0.166105%2C0.50058%20-0.770355%2C0.83185%20-0.781876%2C1.36187%20-0.0079%2C0.36324%200.490503%2C0.51212%200.735816%2C0.76825%20-1.238622%2C1.17936%20-0.318642%2C-0.0751%20-0.230295%2C1.81504%200.01469%2C0.31414%20-0.288824%2C0.57152%20-0.312297%2C0.88509%20-0.01663%2C0.2225%200.272817%2C0.4269%200.198838%2C0.63609%20-0.07804%2C0.22066%20-0.58191%2C0.15375%20-0.561692%2C0.38825%200.02023%2C0.23456%200.412705%2C0.18508%200.618985%2C0.27733%20-0.318698%2C2.31293%200.02832%2C-0.96519%200.133683%2C1.15535%200.01441%2C0.28986%20-0.169665%2C0.56601%20-0.150535%2C0.85558%200.01187%2C0.17932%200.255769%2C0.29914%200.238157%2C0.47795%20-0.05445%2C0.54891%20-0.301702%2C1.05681%20-0.442615%2C1.58845%20-0.158909%2C0.59956%20-0.303962%2C1.20293%20-0.456096%2C1.80441%20-0.01958%2C0.58357%20-0.03997%2C1.16775%20-0.05954%2C1.7513%200.163114%2C0.52034%200.466622%2C1.01405%200.489796%2C1.56131%20-0.26037%2C0.94852%20-0.483446%2C1.37369%20-0.410037%2C2.32366%200.05698%2C0.73699%200.381617%2C0.45656%20-0.02359%2C0.69981%20-0.142264%2C-0.10429%20-0.301933%2C-0.43925%20-0.426884%2C-0.31273%20-0.07413%2C0.0751%20-0.02297%2C1.10531%200.0056%2C1.29578%200.04%2C0.26645%200.205004%2C0.50915%200.207828%2C0.77888%200.0012%2C0.10176%20-0.06189%2C0.19299%20-0.09324%2C0.28912%200.06846%2C0.1738%200.314949%2C0.78857%200.306684%2C0.84497%20-0.03437%2C0.2365%20-0.358329%2C0.36114%20-0.377459%2C0.59951%20-0.01467%2C0.18327%200.273824%2C0.27496%200.292085%2C0.45789%200.01455%2C0.14592%20-0.404744%2C0.48519%20-0.480811%2C0.55348%200.138571%2C0.0771%200.457413%2C0.0726%200.415656%2C0.2313%20-0.05339%2C0.20306%20-0.571621%2C0.0554%20-0.545968%2C0.26435%20-0.388306%2C0.93057%200.591412%2C1.3934%200.904325%2C2.0841%200.0018%2C-0.006%200.0038%2C-0.011%200.0056%2C-0.0165%200.0025%2C0.0182%200.0065%2C0.0361%200.009%2C0.0543%200.02491%2C0.0605%200.05446%2C0.11956%200.06741%2C0.1841%200.0044%2C0.0221%20-0.01567%2C0.012%20-0.03932%2C-0.006%200.02412%2C0.16849%200.04587%2C0.33709%200.07864%2C0.50391%200.123317%2C0.62792%200.451748%2C1.53338%200.376337%2C2.21273%20-0.03635%2C0.32743%20-0.209059%2C0.6226%20-0.31343%2C0.93348%20-0.128926%2C0.19096%20-0.309312%2C0.35267%20-0.386443%2C0.57236%20-0.04239%2C0.12073%200.03385%2C0.25493%200.05167%2C0.38236%200.08357%2C0.59876%200.104831%2C1.21178%200.241533%2C1.79851%200.04704%2C-0.13124%200.105171%2C-0.26235%200.133682%2C-0.39298%200.05229%2C0.27105%200.104981%2C0.54205%200.157276%2C0.8131%200.09049%2C0.0687%200.165282%2C0.13844%200.138174%2C0.23602%20-0.01123%2C0.0404%20-0.04167%2C0.0595%20-0.08089%2C0.0649%200.01185%2C0.0614%200.02411%2C0.12271%200.03595%2C0.1841%20-0.0062%2C0.0924%200.0064%2C0.21126%200.0079%2C0.28441%200.0044%2C0.20953%200.06573%2C0.41407%200.09886%2C0.62075%20-0.134424%2C0.17093%20-0.39721%2C0.29065%20-0.403295%2C0.51217%20-0.0078%2C0.28379%200.257949%2C0.49974%200.368469%2C0.75882%200.142476%2C0.33401%200.352386%2C0.65456%200.389818%2C1.01844%200.05848%2C0.5683%20-0.07301%2C1.14084%20-0.108966%2C1.71118%20-0.02272%2C0.3603%20-0.166145%2C0.73511%20-0.0674%2C1.081%200.183026%2C0.64114%200.589485%2C1.1873%200.884107%2C1.7808%20-0.236903%2C-0.20508%20-0.132101%2C-0.063%200.09886%2C0.20653%200.08208%2C0.43713%200.159358%2C0.87529%200.250517%2C1.30993%200.01229%2C0.024%200.02661%2C0.047%200.03932%2C0.0708%20-0.03508%2C0.31622%20-0.03234%2C0.44501%200.20895%2C0.6113%20-0.02072%2C-0.10492%20-0.03437%2C-0.21013%20-0.04718%2C-0.31627%200.0776%2C0.13757%200.144898%2C0.28076%200.20895%2C0.42484%200.06008%2C0.0383%200.111469%2C0.0708%200.190975%2C0.12156%20-0.116576%2C0.0625%20-0.125814%2C0.0599%20-0.210071%2C0.10267%200.1106%2C0.3073%200.165512%2C0.63261%200.208949%2C0.9618%20-0.03109%2C-0.0565%20-0.06498%2C-0.11798%20-0.08987%2C-0.16758%20-0.285016%2C0.38265%20-0.06468%2C0.0342%200.09324%2C0.18764%200.02706%2C0.20615%200.05736%2C0.41149%200.09436%2C0.61484%20-0.0661%2C0.14519%20-0.257408%2C0.24659%20-0.310054%2C0.40715%20-0.0513%2C0.15618%20-0.0392%2C0.33922%200.01123%2C0.49565%200.140929%2C0.43692%200.230904%2C0.76185%200.303312%2C1.04323%200.101823%2C-0.011%200.264897%2C0.0676%200.305562%2C0.15814%200.06528%2C0.1454%20-0.118066%2C0.30039%20-0.134804%2C0.46024%20-0.0031%2C0.03%20-6.04e-4%2C0.0532%20-0.0022%2C0.0814%200.05842%2C0.27033%200.11339%2C0.46513%200.214569%2C0.57%20-0.06665%2C-0.0437%20-0.128172%2C-0.0904%20-0.185361%2C-0.13925%200.03713%2C0.17575%200.0967%2C0.34524%200.159524%2C0.55938%200.0028%2C0.084%200.01033%2C0.16573%200.0146%2C0.249%20-0.280214%2C-0.31022%20-0.390923%2C-0.43855%20-0.90096%2C-0.98422%20-0.307666%2C-0.62406%200.519078%2C1.01171%200.939152%2C1.86342%20-0.02409%2C-0.002%20-0.04782%2C-0.004%20-0.0719%2C-0.006%20-0.509927%2C-0.89168%20-1.005797%2C-1.79104%20-1.508707%2C-2.68714%20-0.0638%2C0.009%20-0.131255%2C0.0523%20-0.192102%2C0.0295%20-1.077872%2C-0.39882%20-2.134135%2C-0.85669%20-3.201653%2C-1.28516%200.303824%2C0.0259%200.608086%2C0.0427%200.912187%2C0.0661%20-0.202657%2C-0.1486%20-0.407172%2C-0.29234%20-0.639203%2C-0.37056%20-1.584411%2C-0.53395%20-1.924961%2C-0.42874%20-3.203908%2C-0.31981%200.12961%2C0.0179%201.117927%2C0.15348%201.890663%2C0.25963%20-0.296186%2C0.097%20-0.578338%2C0.28538%20-0.885229%2C0.26906%20-3.562592%2C-0.18925%200.816357%2C-1.35197%20-3.647643%2C0.33397%20-4.090781%2C0.94917%20-1.95904%2C0.25423%20-6.341526%2C2.2564%20-1.375122%2C0.35169%20-2.824413%2C0.21143%20-4.230681%2C0.37882%20-1.422453%2C0.16938%20-2.828134%2C0.47467%20-4.25202%2C0.63019%20-1.611478%2C0.17597%20-2.715624%2C0.29076%20-3.534184%2C0.37056%20-0.145882%2C-0.0266%20-0.317635%2C-0.0568%20-0.542597%2C-0.0956%200.496905%2C-0.0733%200.523231%2C-0.0806%20-0.02134%2C-0.004%20-0.196209%2C-0.0338%20-0.199626%2C-0.0374%20-0.466208%2C-0.0814%20-0.101438%2C0.0626%20-0.202484%2C0.12589%20-0.30444%2C0.18764%20-0.448469%2C0.0628%20-1.095754%2C0.15208%20-2.136682%2C0.29503%20-1.45456%2C0.0931%20-2.902257%2C0.34059%20-4.359871%2C0.35994%20-1.768536%2C0.0226%20-3.53174%2C-0.23733%20-5.300143%2C-0.26907%20-6.475537%2C-0.11639%20-3.263887%2C0.45381%20-7.414366%2C-0.50982%200.110986%2C-0.0322%200.258237%2C-0.12738%200.393184%2C-0.44018%200.04769%2C-0.11049%20-0.281922%2C-0.17715%20-0.220182%2C-0.27969%200.105044%2C-0.17459%200.644011%2C-0.0743%200.539226%2C-0.249%20-0.154544%2C-0.25829%20-0.618727%2C-0.0473%20-0.836925%2C-0.24783%20-0.09417%2C-0.0865%200.176624%2C-0.18557%200.265121%2C-0.27851%20-0.570119%2C-0.71171%20-0.183153%2C-0.006%20-0.110089%2C-0.90752%200.01621%2C-0.20016%20-0.136713%2C-0.39629%20-0.10111%2C-0.5936%200.02756%2C-0.15275%200.233958%2C-0.21721%200.274111%2C-0.36701%200.02193%2C-0.082%20-0.0773%2C-0.1505%20-0.115713%2C-0.22541%200.03924%2C-0.1048%200.07874%2C-0.21027%200.117956%2C-0.31509%200.108248%2C-0.21889%200.359335%2C-0.41219%200.324664%2C-0.65615%20-0.0372%2C-0.26178%20-0.340377%2C-0.39058%20-0.502157%2C-0.5936%20-0.04539%2C-0.0569%20-0.07856%2C-0.12244%20-0.117957%2C-0.1841%200.0037%2C-0.0119%200.01536%2C-0.024%200.01123%2C-0.0354%20-0.856666%2C-2.40617%20-0.341401%2C-0.63749%20-1.01217%2C-3.27838%20-0.05131%2C-0.37738%20-0.05452%2C-0.76512%20-0.153905%2C-1.13174%20-0.198344%2C-0.73171%20-0.947652%2C-2.50527%20-1.213262%2C-3.24888%20-0.8067%2C-2.25849%20-0.635471%2C-1.8842%20-1.241343%2C-4.17527%20-0.16458%2C-0.62238%20-0.335585%2C-1.24315%20-0.503278%2C-1.8646%20-0.138714%2C-0.54467%20-0.294265%2C-1.14987%20-0.442614%2C-1.75131%20-0.04727%2C-0.48588%20-0.09692%2C-0.97139%20-0.12919%2C-1.45863%20-0.105694%2C-1.59603%20-0.0457%2C-3.20375%20-0.194346%2C-4.79602%20-0.153531%2C-1.64439%20-0.644172%2C-3.24907%20-0.711105%2C-4.89987%20-0.05441%2C-1.34189%200.291999%2C-2.67071%200.3505%2C-4.01242%200.05156%2C-1.18354%20-0.01348%2C-2.36976%20-0.02022%2C-3.55453%20-0.16393%2C-0.5612%20-0.254043%2C-0.82164%20-0.363976%2C-1.16125%200.116462%2C-1.6072%200.325923%2C-4.41646%200.441487%2C-5.01906%200.111762%2C-0.58273%200.571407%2C-1.08728%200.566191%2C-1.68168%20-0.005%2C-0.55644%20-0.529851%2C-0.99495%20-0.595398%2C-1.54714%20-0.02766%2C-0.23292%200.173449%2C-1.75246%200.319043%2C-2.82285%202.027204%2C-0.61486%20-0.19924%2C-0.11705%203.056738%2C0.13925%200.534378%2C0.042%201.069583%2C-0.2762%201.598583%2C-0.18646%200.456884%2C0.0776%200.784038%2C0.55696%201.234607%2C0.66795%200.209617%2C0.0517%201.507274%2C-0.31472%201.706423%2C-0.36702%201.637867%2C0.36964%20-0.0058%2C0.11917%201.833369%2C-0.0153%200.386685%2C-0.0283%200.780593%2C0.11431%201.16271%2C0.046%200.605435%2C-0.10832%201.155066%2C-0.46061%201.760346%2C-0.57%200.461215%2C-0.0831%200.936275%2C0.002%201.404237%2C-0.002%200.451018%2C-0.005%200.902714%2C-0.0156%201.353686%2C-0.0248%201.320785%2C0.0169%201.725357%2C-0.005%203.019667%2C0.11093%200.410065%2C0.0365%200.816012%2C0.12012%201.226739%2C0.14752%200.41959%2C0.0274%200.846496%2C-0.0515%201.261565%2C0.0189%201.927428%2C0.32641%200.526452%2C0.71278%202.111967%2C0.005%200.66542%2C-0.29147%201.215896%2C0.30916%201.835618%2C0.31038%200.269838%2C6.6e-4%200.50681%2C-0.22358%200.776262%2C-0.23957%200.22062%2C-0.0123%200.424059%2C0.15136%200.644823%2C0.1605%200.331433%2C0.0135%200.660513%2C-0.0629%200.99083%2C-0.0944%200.414327%2C0.0365%200.82927%2C0.0723%201.243591%2C0.10857%201.336563%2C-0.83999%201.381438%2C-1.12535%202.102983%2C-1.09397%20z%20m%2020.04686%2C48.9645%20c%200.270671%2C0.19846%200.536126%2C0.40854%200.845915%2C0.51335%200.177585%2C0.0601%200.622207%2C-0.0358%200.524623%2C-0.20298%20-0.143782%2C-0.24611%20-0.518175%2C-0.20545%20-0.789744%2C-0.25018%20-0.192419%2C-0.0317%20-0.386477%2C-0.0452%20-0.580794%2C-0.0602%20z%20m%203.849852%2C2.19503%20c%20-0.02759%2C-0.1306%20-0.03858%2C-0.26978%20-0.02921%2C-0.43075%20-0.03819%2C-0.1767%20-0.08347%2C-0.36935%20-0.168509%2C-0.69981%20-0.04018%2C0.004%20-0.07203%2C0.0194%20-0.08088%2C0.0578%20-0.128971%2C0.55955%200.01962%2C0.85162%200.278598%2C1.07273%20z%20m%20-0.508892%2C-4.67329%20c%20-0.01032%2C-0.0287%20-0.01554%2C-0.059%20-0.02696%2C-0.0873%20-0.02839%2C-0.0703%20-0.926935%2C0.57138%200.02696%2C0.0873%20z%20m%200.0191%2C-0.22423%20c%20-0.05916%2C-0.0376%20-0.117946%2C-0.078%20-0.160647%2C-0.10738%200.02443%2C0.11697%200.272812%2C0.36906%200.232544%2C0.25844%20-0.01914%2C-0.0526%20-0.04927%2C-0.10015%20-0.0719%2C-0.15106%20z%20M%2063.86332%2C265.3495%20c%20-0.01934%2C-0.10025%20-0.03795%2C-0.20068%20-0.05729%2C-0.30093%20-0.103486%2C-0.0785%20-0.227827%2C-0.15501%20-0.25838%2C-0.26671%20-0.0138%2C-0.0504%20-0.02072%2C-0.10253%20-0.03258%2C-0.15341%20-0.05555%2C0.15495%20-0.09558%2C0.3097%20-0.0528%2C0.46143%200.03757%2C0.13319%200.271643%2C0.27735%200.401046%2C0.25962%20z%20m%20-0.396554%2C-7.1244%20c%20-0.0085%2C-0.0596%20-0.01978%2C-0.11856%20-0.02809%2C-0.1782%20-0.0051%2C-0.0125%20-0.009%2C-0.0254%20-0.0146%2C-0.0378%20-0.01084%2C0.0341%20-0.02901%2C0.0658%20-0.03482%2C0.10149%20-0.0055%2C0.034%200.04124%2C0.087%200.07751%2C0.11447%20z%20m%200.817829%2C-25.87185%20c%200.03525%2C-0.18648%200.04338%2C-0.38028%200.05055%2C-0.57472%20-0.05253%2C-0.0169%20-0.105614%2C-0.0331%20-0.158398%2C-0.0496%20-0.313343%2C0.0383%20-0.532755%2C0.12855%20-0.381956%2C0.30683%200.09844%2C0.11632%200.281042%2C0.22314%200.489801%2C0.31745%20z%20m%200.470701%2C-0.0625%20c%20-0.0046%2C-0.004%20-0.0091%2C-0.009%20-0.01348%2C-0.013%20-0.01878%2C0.0434%20-0.03871%2C0.0864%20-0.05729%2C0.12981%200.02095%2C-0.0398%200.04652%2C-0.0784%200.07078%2C-0.11682%20z%20m%20-0.01348%2C-0.013%20c%200.01794%2C-0.0415%200.03696%2C-0.0825%200.05504%2C-0.12391%20-0.113937%2C-0.0699%20-0.194599%2C-0.10914%20-0.147165%2C-0.002%200.02233%2C0.0503%200.05561%2C0.0901%200.09212%2C0.12627%20z%20m%200.05504%2C-0.12391%20c%200.0069%2C0.004%200.01299%2C0.007%200.02022%2C0.0118%200.01039%2C-0.0233%200.02527%2C-0.0446%200.03146%2C-0.0696%200.0092%2C-0.0374%200.0058%2C-0.0534%200.01235%2C-0.0862%20-0.02119%2C0.048%20-0.04301%2C0.0959%20-0.06403%2C0.14398%20z%20m%20-4.865392%2C-1.95901%20c%200.03564%2C0.0491%200.06399%2C0.0684%200%2C0%20z%20m%2011.430471%2C25.45055%20c%200.0156%2C0.0914%200.03287%2C0.1831%200.04269%2C0.27497%200.0097%2C0.0911%20-0.09529%2C-0.19584%20-0.04606%2C-0.27143%209.21e-4%2C-0.001%200.0024%2C-0.002%200.0034%2C-0.004%20z%20m%201.535676%2C15.19999%20c%200.02644%2C0.0926%200.03873%2C0.19554%200.05392%2C0.29621%20-0.200247%2C-0.21593%20-0.302289%2C-0.17861%20-0.05392%2C-0.29621%20z%20m%20-8.136704%2C1.01962%20c%200.01988%2C-0.005%200.03602%2C-5.3e-4%200.04157%2C0.0189%200.119642%2C0.41875%200.211147%2C0.84494%200.29545%2C1.27335%20-0.183348%2C-0.36018%20-0.339221%2C-0.73727%20-0.47407%2C-1.11876%20-0.02017%2C-0.057%200.0774%2C-0.15861%200.137052%2C-0.17348%20z%20m%209.227512%2C2.27764%20c%200.04272%2C0.23396%200.09767%2C0.48907%200.162889%2C0.76236%20-0.128453%2C-0.17102%20-0.232002%2C-0.34879%20-0.238157%2C-0.5582%20-0.0018%2C-0.0622%200.0283%2C-0.13511%200.07527%2C-0.20416%20z%20m%20-0.06179%2C2.01565%20c%20-0.01963%2C-0.10528%200.157402%2C0.49151%200.375209%2C1.21317%20-0.07063%2C-0.1933%20-0.129012%2C-0.34973%20-0.276354%2C-0.76826%20-0.05583%2C-0.24615%20-0.08938%2C-0.39409%20-0.09886%2C-0.44491%20z%20m%20-7.891801%2C0.66677%20c%200.012%2C0.0143%200.0218%2C0.0387%200.03258%2C0.0602%20-0.01177%2C-0.0214%20-0.02114%2C-0.0395%20-0.03258%2C-0.0602%20z%20m%208.7467%2C3.75634%20c%200.06634%2C0.1656%200.14082%2C0.32721%200.219061%2C0.48739%20-0.198562%2C-0.0131%20-0.405308%2C0.0109%20-0.60326%2C-0.005%200.03075%2C-0.20289%200.224669%2C-0.34504%200.384199%2C-0.48267%20z%20m%20-38.54907%2C1.58018%20c%20-0.04625%2C0.028%20-0.09196%2C0.0569%20-0.138174%2C0.085%20-0.330427%2C0.0141%20-0.19499%2C-0.0249%200.138174%2C-0.085%20z%22%20%20%20%20%20%20%20style%3D%22opacity%3A1%3Bfill%3A%23000000%3Bfill-opacity%3A1%3Bstroke%3Anone%3Bstroke-width%3A2.35808039%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20%2F%3E%20%20%3C%2Fg%3E%3C%2Fsvg%3E');
}
const regionTriggerEls = document.querySelectorAll("figcaption [data-region]");
for (const triggerEl of regionTriggerEls) {
const regionEl = document.createElement("div");
triggerEl.parentNode.parentNode.appendChild(regionEl);
regionEl.classList.add("region");
regionEl.classList.add("hide");
regionEl.classList.add("frame");
triggerEl.addEventListener("mouseover", e=>triggerRegion(e.currentTarget, regionEl));
triggerEl.addEventListener("mouseout", e=>untriggerRegion(e.currentTarget, regionEl));
}
function triggerRegion(triggerEl, regionEl) {
const figcaptionEl = triggerEl.parentNode;
const figureEl = figcaptionEl.parentNode;
const contentEl = figureEl.querySelector("img");//maybe canvas etc
const [regx,regy,regw,regh] = triggerEl.dataset.region.split(' ').map(parseFloat);
const {width,height} = contentEl.getBoundingClientRect();
const x = (regx - regw/2)*width;
const y = (regy - regh/2)*height;
const w = regw * width;
const h = regh * height;
regionEl.style.left = `${x}px`;
regionEl.style.top = `${y}px`;
regionEl.style.width = `${w}px`;
regionEl.style.height = `${h}px`;
regionEl.classList.remove("hide");
}
function untriggerRegion(triggerEl, regionEl) {
const contentEl = regionEl.parentNode.querySelector("img");
regionEl.classList.add("hide");
}
// Dev only
// To find coords in image elm space on mouse click on it
for (const img of document.querySelectorAll("img")) {
img.addEventListener("click", e => {
const {left, top, width, height} = e.currentTarget.getBoundingClientRect();
console.log(
`at`,
((e.clientX - left)/width).toFixed(2),
((e.clientY-top)/height).toFixed(2)
);
})
}
Also see: Tab Triggers