css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

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.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <h2>SVG graphic</h2>
<figure>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="388.94" height="390.87" data-semantic-id="11" data-semantic-structure="(11 (1 2 3) 0 (4 (5 6 7) (8 9 10)))" data-semantic-speech="a house with a grey front wall, a dark grey roof with a red chimney ad a blue door with a round door knob"><defs><linearGradient id="n"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="m"><stop offset="0" stop-color="#ac4300"/><stop offset="1" stop-color="#ac4300"/></linearGradient><linearGradient id="l"><stop offset="0" stop-color="#fff" stop-opacity=".39"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="k"><stop offset="0" stop-color="#6a8fc6"/><stop offset="1" stop-color="#97b9ec"/></linearGradient><linearGradient id="i"><stop offset="0" stop-color="#c9c9c9"/><stop offset="1" stop-color="#002f52"/></linearGradient><linearGradient id="j"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="g"><stop offset="0" stop-color="#fef9e5"/><stop offset=".18" stop-color="#fff"/><stop offset="1" stop-color="#fef9e5"/></linearGradient><linearGradient id="f"><stop offset="0" stop-color="#c9c9c9"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="e"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="d"><stop offset="0" stop-color="#003fff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="c"><stop offset="0" stop-color="#ff9191"/><stop offset="1" stop-color="#b55858"/></linearGradient><linearGradient id="b"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="a"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#c9c9c9"/></linearGradient><linearGradient id="h"><stop offset="0" stop-color="#ff9e00"/><stop offset="1" stop-color="#9c6000"/></linearGradient><linearGradient id="q" x1="368.21" x2="368.21" y1="476.65" y2="552.1" gradientTransform="translate(-39.83 -25.3) scale(1.102)" gradientUnits="userSpaceOnUse" xlink:href="#l"/><linearGradient id="p" x1="366.43" x2="366.43" y1="638.79" y2="465.47" gradientTransform="translate(-39.83 -25.3) scale(1.102)" gradientUnits="userSpaceOnUse" xlink:href="#k"/><linearGradient id="o" x1="366.69" x2="366.69" y1="640.22" y2="327.84" gradientTransform="translate(-39.83 -25.3) scale(1.102)" gradientUnits="userSpaceOnUse" xlink:href="#f"/></defs>
<g color="#000">
<path data-semantic-id="0" data-semantic-speech="grey front wall" fill="url(#o)" d="M520.46 487.66L368.91 336 217.37 487.66v179.82c0 1.75.36 3.4 1 4.92a12.61 12.61 0 0 0 2.69 4.02 12.61 12.61 0 0 0 4.02 2.68c1.51.64 3.17 1.01 4.92 1.01h277.83c1.75 0 3.4-.37 4.92-1a12.61 12.61 0 0 0 4.02-2.69 12.61 12.61 0 0 0 2.68-4.02c.64-1.51 1.01-3.17 1.01-4.92V487.66z" overflow="visible" style="marker:none" transform="translate(-174.44 -290.74)"/>
<g data-semantic-id="1" data-semantic-speech="a dark grey roof with a red chimney">
<path data-semantic-id="2" data-semantic-speech="a red chimney" fill="#a00" d="M55.54 25.25c-1.74 0-3.38.39-4.89 1.03-1.51.64-2.88 1.5-4.03 2.65a12.65 12.65 0 0 0-3.68 8.96v159.03l67.05-67.12V37.89a12.65 12.65 0 0 0-3.68-8.95 12.55 12.55 0 0 0-4.04-2.66 12.64 12.64 0 0 0-4.92-1.03h-41.8z" overflow="visible" style="marker:none"/>
<path data-semantic-id="3" data-semantic-speech="a dark grey, mono-pitched roof" fill="#4c4c4c" d="M194.25 0a18.72 18.72 0 0 0-12.97 5.48L5.48 181.38a18.73 18.73 0 1 0 26.5 26.5l162.5-162.61 162.49 162.6a18.73 18.73 0 1 0 26.49-26.48L207.77 5.48A18.72 18.72 0 0 0 194.25 0z" overflow="visible" style="marker:none"/>
</g>
<g data-semantic-id="4" data-semantic-speech="a blue door with a doorknob">
<g data-semantic-id="5" data-semantic-speech="a blue door with a shimmer">
<path data-semantic-id="6" data-semantic-speech="the blue door frame" fill="url(#p)" d="M441.78 680.11H296.05V500.29c0-1.75.36-3.4 1-4.92a12.61 12.61 0 0 1 2.68-4.02 12.61 12.61 0 0 1 4.03-2.68c1.51-.64 3.17-1.01 4.92-1.01h120.47c1.75 0 3.4.37 4.92 1 1.51.65 2.88 1.54 4.02 2.69a12.61 12.61 0 0 1 2.69 4.02c.64 1.51 1 3.17 1 4.92V680.1z" overflow="visible" style="marker:none" transform="translate(-174.44 -290.74)"/>
<path data-semantic-id="7" data-semantic-speech="a shimmer on the upper third"  fill="url(#q)" d="M319.7 498.68a12.65 12.65 0 0 0-8.95 3.68 12.55 12.55 0 0 0-2.66 4.03 12.64 12.64 0 0 0-1.03 4.92v69.64h.3c2.9 11 29.34-24.45 61.55-24.45 32.2 0 58.67 35.45 61.57 24.45h.28V511.3a12.65 12.65 0 0 0-3.68-8.95 12.65 12.65 0 0 0-8.96-3.68h-98.43z" overflow="visible" style="marker:none" transform="translate(-174.44 -290.74)"/>
</g>
<g data-semantic-id="8" data-semantic-speech="a dark gray doorknob with a shimmer">
<path data-semantic-id="9" data-semantic-speech="a dark gray, round doorknob" fill="#4c4c4c" d="M256.31 293.15a15.74 15.74 0 1 1-31.48 0 15.74 15.74 0 1 1 31.48 0z" overflow="visible" style="marker:none"/>
<path data-semantic-id="10" data-semantic-speech="a shimmer in the shape of a crescent moon" fill="#e6e6e6" d="M240.57 281.74c-6.3 0-11.43 5.1-11.43 11.4 0 4.28 2.5 7.9 6 9.85-.2-.36-.54-.63-.7-1a11.37 11.37 0 0 1 2.48-12.5 11.38 11.38 0 0 1 12.5-2.45c.38.16.65.46 1 .66a11.26 11.26 0 0 0-9.85-5.96z" opacity=".5" overflow="visible" style="marker:none"/>
</g>
</g>
</g>
</svg>
<figcaption>
<a href="https://commons.wikimedia.org/wiki/File:House.svg">barretr (Open Clip Art Library) [CC0], via Wikimedia Commons</a>
</figcaption>
</figure>
<h2>CSS equation</h2>
<span class="mjx-chtml MJXc-display" style="text-align: center;"><span class="mjx-math" data-semantic-type="relseq" data-semantic-role="equality" data-semantic-id="24" data-semantic-children="0,23" data-semantic-content="1" data-semantic-structure="(24 0 1 (23 (18 (17 2 3) 4 (16 (15 (7 5 6) 8 (14 9 12 10 13 11)))) (22 19 21 20)))" data-semantic-speech="x equals StartFraction negative b plus-or-minus StartRoot b squared minus 4 a c EndRoot Over 2 a EndFraction" aria-label="x={-b\pm\sqrt{b^2-4ac}\over2a}"><span class="mjx-mrow"><span class="mjx-mi" data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-id="0" data-semantic-parent="24" data-semantic-speech="x"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.225em; padding-bottom: 0.298em;">x</span></span><span class="mjx-mo MJXc-space3" data-semantic-type="relation" data-semantic-role="equality" data-semantic-id="1" data-semantic-parent="24" data-semantic-operator="relseq,=" data-semantic-speech="equals"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.077em; padding-bottom: 0.298em;">=</span></span><span class="mjx-texatom MJXc-space3"><span class="mjx-mrow"><span class="mjx-mfrac" data-semantic-type="fraction" data-semantic-role="division" data-semantic-id="23" data-semantic-children="18,22" data-semantic-parent="24" data-semantic-speech="StartFraction negative b plus-or-minus StartRoot b squared minus 4 a c EndRoot Over 2 a EndFraction"><span class="mjx-box MJXc-stacked" style="width: 6.965em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 6.965em; top: -1.65em;"><span class="mjx-mrow" data-semantic-type="infixop" data-semantic-role="addition" data-semantic-id="18" data-semantic-children="17,16" data-semantic-content="4" data-semantic-parent="23" data-semantic-speech="negative b plus-or-minus StartRoot b squared minus 4 a c EndRoot" data-semantic-prefix="Numerator"><span class="mjx-mrow" data-semantic-type="prefixop" data-semantic-role="negative" data-semantic-id="17" data-semantic-children="3" data-semantic-content="2" data-semantic-parent="18" data-semantic-speech="negative b"><span class="mjx-mo" data-semantic-type="operator" data-semantic-role="subtraction" data-semantic-id="2" data-semantic-parent="17" data-semantic-operator="prefixop,−" data-semantic-speech="minus"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.298em; padding-bottom: 0.446em;">−</span></span><span class="mjx-mi" data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-id="3" data-semantic-parent="17" data-semantic-speech="b"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.446em; padding-bottom: 0.298em;">b</span></span></span><span class="mjx-mo MJXc-space2" data-semantic-type="operator" data-semantic-role="addition" data-semantic-id="4" data-semantic-parent="18" data-semantic-operator="infixop,±" data-semantic-speech="plus-or-minus"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.372em; padding-bottom: 0.372em;">±</span></span><span class="mjx-msqrt MJXc-space2" data-semantic-type="sqrt" data-semantic-role="unknown" data-semantic-id="16" data-semantic-children="15" data-semantic-parent="18" data-semantic-speech="StartRoot b squared minus 4 a c EndRoot"><span class="mjx-box" style="padding-top: 0.045em;"><span class="mjx-surd"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.519em; padding-bottom: 0.519em;">√</span></span><span class="mjx-box" style="padding-top: 0.045em; border-top: 1px solid;"><span class="mjx-mrow"><span class="mjx-mrow" data-semantic-type="infixop" data-semantic-role="subtraction" data-semantic-id="15" data-semantic-children="7,14" data-semantic-content="8" data-semantic-parent="16" data-semantic-speech="b squared minus 4 a c" data-semantic-prefix="Radicand"><span class="mjx-msup" data-semantic-type="superscript" data-semantic-role="latinletter" data-semantic-id="7" data-semantic-children="5,6" data-semantic-parent="15" data-semantic-speech="b squared"><span class="mjx-base"><span class="mjx-mi" data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-id="5" data-semantic-parent="7" data-semantic-speech="b" data-semantic-prefix="Base"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.446em; padding-bottom: 0.298em;">b</span></span></span><span class="mjx-sup" style="font-size: 70.7%; vertical-align: 0.409em; padding-left: 0px; padding-right: 0.071em;"><span class="mjx-mn" data-semantic-type="number" data-semantic-role="integer" data-semantic-font="normal" data-semantic-id="6" data-semantic-parent="7" data-semantic-speech="2" data-semantic-prefix="Exponent" style=""><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.372em; padding-bottom: 0.372em;">2</span></span></span></span><span class="mjx-mo MJXc-space2" data-semantic-type="operator" data-semantic-role="subtraction" data-semantic-id="8" data-semantic-parent="15" data-semantic-operator="infixop,−" data-semantic-speech="minus"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.298em; padding-bottom: 0.446em;">−</span></span><span class="mjx-mrow MJXc-space2" data-semantic-type="infixop" data-semantic-role="implicit" data-semantic-id="14" data-semantic-children="9,10,11" data-semantic-content="12,13" data-semantic-parent="15" data-semantic-speech="4 a c"><span class="mjx-mn" data-semantic-type="number" data-semantic-role="integer" data-semantic-font="normal" data-semantic-id="9" data-semantic-parent="14" data-semantic-speech="4"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.372em; padding-bottom: 0.372em;">4</span></span><span class="mjx-mo" data-semantic-type="operator" data-semantic-role="multiplication" data-semantic-id="12" data-semantic-parent="14" data-semantic-added="true" data-semantic-operator="infixop,⁢" data-semantic-speech="times"><span class="mjx-char"></span></span><span class="mjx-mi" data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-id="10" data-semantic-parent="14" data-semantic-speech="a"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.225em; padding-bottom: 0.298em;">a</span></span><span class="mjx-mo" data-semantic-type="operator" data-semantic-role="multiplication" data-semantic-id="13" data-semantic-parent="14" data-semantic-added="true" data-semantic-operator="infixop,⁢" data-semantic-speech="times"><span class="mjx-char"></span></span><span class="mjx-mi" data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-id="11" data-semantic-parent="14" data-semantic-speech="c"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.225em; padding-bottom: 0.298em;">c</span></span></span></span></span></span></span></span></span></span><span class="mjx-denominator" style="width: 6.965em; bottom: -0.766em;"><span class="mjx-mrow" data-semantic-type="infixop" data-semantic-role="implicit" data-semantic-id="22" data-semantic-children="19,20" data-semantic-content="21" data-semantic-parent="23" data-semantic-speech="2 a" data-semantic-prefix="Denominator"><span class="mjx-mn" data-semantic-type="number" data-semantic-role="integer" data-semantic-font="normal" data-semantic-id="19" data-semantic-parent="22" data-semantic-speech="2"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.372em; padding-bottom: 0.372em;">2</span></span><span class="mjx-mo" data-semantic-type="operator" data-semantic-role="multiplication" data-semantic-id="21" data-semantic-parent="22" data-semantic-added="true" data-semantic-operator="infixop,⁢" data-semantic-speech="times"><span class="mjx-char"></span></span><span class="mjx-mi" data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-id="20" data-semantic-parent="22" data-semantic-speech="a"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.225em; padding-bottom: 0.298em;">a</span></span></span></span><span style="border-bottom: 1.3px solid; top: -0.296em; width: 6.965em;" class="mjx-line"></span></span><span style="height: 2.416em; vertical-align: -0.766em;" class="mjx-vsize"></span></span></span></span></span></span></span>

<h2>SVG equation</h2>
  
 <span class="mjx-svg__block">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" data-semantic-type="relseq" data-semantic-role="equality" data-semantic-id="24" data-semantic-children="0,23" data-semantic-content="1" data-semantic-structure="(24 0 1 (23 (18 (17 2 3) 4 (16 (15 (7 5 6) 8 (14 9 12 10 13 11)))) (22 19 21 20)))" data-semantic-speech="x equals StartFraction negative b plus-or-minus StartRoot b squared minus 4 a c EndRoot Over 2 a EndFraction" width="21.525ex" height="6.176ex" style="vertical-align: -1.838ex;" viewBox="0 -1867.7 9267.9 2659.1" role="img" focusable="true" xmlns="http://www.w3.org/2000/svg" aria-labelledby="MathJax-SVG-1-Title">
<title id="MathJax-SVG-1-Title">x equals StartFraction negative b plus-or-minus StartRoot b squared minus 4 a c EndRoot Over 2 a EndFraction</title>
<defs>
<path stroke-width="1" id="E1-MJMATHI-78" d="M52 289Q59 331 106 386T222 442Q257 442 286 424T329 379Q371 442 430 442Q467 442 494 420T522 361Q522 332 508 314T481 292T458 288Q439 288 427 299T415 328Q415 374 465 391Q454 404 425 404Q412 404 406 402Q368 386 350 336Q290 115 290 78Q290 50 306 38T341 26Q378 26 414 59T463 140Q466 150 469 151T485 153H489Q504 153 504 145Q504 144 502 134Q486 77 440 33T333 -11Q263 -11 227 52Q186 -10 133 -10H127Q78 -10 57 16T35 71Q35 103 54 123T99 143Q142 143 142 101Q142 81 130 66T107 46T94 41L91 40Q91 39 97 36T113 29T132 26Q168 26 194 71Q203 87 217 139T245 247T261 313Q266 340 266 352Q266 380 251 392T217 404Q177 404 142 372T93 290Q91 281 88 280T72 278H58Q52 284 52 289Z"></path>
<path stroke-width="1" id="E1-MJMAIN-3D" d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z"></path>
<path stroke-width="1" id="E1-MJMAIN-2212" d="M84 237T84 250T98 270H679Q694 262 694 250T679 230H98Q84 237 84 250Z"></path>
<path stroke-width="1" id="E1-MJMATHI-62" d="M73 647Q73 657 77 670T89 683Q90 683 161 688T234 694Q246 694 246 685T212 542Q204 508 195 472T180 418L176 399Q176 396 182 402Q231 442 283 442Q345 442 383 396T422 280Q422 169 343 79T173 -11Q123 -11 82 27T40 150V159Q40 180 48 217T97 414Q147 611 147 623T109 637Q104 637 101 637H96Q86 637 83 637T76 640T73 647ZM336 325V331Q336 405 275 405Q258 405 240 397T207 376T181 352T163 330L157 322L136 236Q114 150 114 114Q114 66 138 42Q154 26 178 26Q211 26 245 58Q270 81 285 114T318 219Q336 291 336 325Z"></path>
<path stroke-width="1" id="E1-MJMAIN-B1" d="M56 320T56 333T70 353H369V502Q369 651 371 655Q376 666 388 666Q402 666 405 654T409 596V500V353H707Q722 345 722 333Q722 320 707 313H409V40H707Q722 32 722 20T707 0H70Q56 7 56 20T70 40H369V313H70Q56 320 56 333Z"></path>
<path stroke-width="1" id="E1-MJMAIN-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path>
<path stroke-width="1" id="E1-MJMAIN-34" d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z"></path>
<path stroke-width="1" id="E1-MJMATHI-61" d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z"></path>
<path stroke-width="1" id="E1-MJMATHI-63" d="M34 159Q34 268 120 355T306 442Q362 442 394 418T427 355Q427 326 408 306T360 285Q341 285 330 295T319 325T330 359T352 380T366 386H367Q367 388 361 392T340 400T306 404Q276 404 249 390Q228 381 206 359Q162 315 142 235T121 119Q121 73 147 50Q169 26 205 26H209Q321 26 394 111Q403 121 406 121Q410 121 419 112T429 98T420 83T391 55T346 25T282 0T202 -11Q127 -11 81 37T34 159Z"></path>
<path stroke-width="1" id="E1-MJSZ1-221A" d="M263 249Q264 249 315 130T417 -108T470 -228L725 302Q981 837 982 839Q989 850 1001 850Q1008 850 1013 844T1020 832V826L741 243Q645 43 540 -176Q479 -303 469 -324T453 -348Q449 -350 436 -350L424 -349L315 -96Q206 156 205 156L171 130Q138 104 137 104L111 130L263 249Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
<g data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-id="0" data-semantic-parent="24" data-semantic-speech="x">
 <use xlink:href="#E1-MJMATHI-78"></use>
</g>
<g data-semantic-type="relation" data-semantic-role="equality" data-semantic-id="1" data-semantic-parent="24" data-semantic-operator="relseq,=" data-semantic-speech="equals" transform="translate(850,0)">
 <use xlink:href="#E1-MJMAIN-3D"></use>
</g>
<g transform="translate(1906,0)">
<g data-semantic-type="fraction" data-semantic-role="division" data-semantic-id="23" data-semantic-children="18,22" data-semantic-parent="24" data-semantic-speech="StartFraction negative b plus-or-minus StartRoot b squared minus 4 a c EndRoot Over 2 a EndFraction">
<g transform="translate(120,0)">
<rect stroke="none" width="7121" height="60" x="0" y="220"></rect>
<g data-semantic-type="infixop" data-semantic-role="addition" data-semantic-id="18" data-semantic-children="17,16" data-semantic-content="4" data-semantic-parent="23" data-semantic-speech="negative b plus-or-minus StartRoot b squared minus 4 a c EndRoot" data-semantic-prefix="Numerator" transform="translate(60,775)">
<g data-semantic-type="prefixop" data-semantic-role="negative" data-semantic-id="17" data-semantic-children="3" data-semantic-content="2" data-semantic-parent="18" data-semantic-speech="negative b">
<g data-semantic-type="operator" data-semantic-role="subtraction" data-semantic-id="2" data-semantic-parent="17" data-semantic-operator="prefixop,−" data-semantic-speech="minus">
 <use xlink:href="#E1-MJMAIN-2212"></use>
</g>
<g data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-id="3" data-semantic-parent="17" data-semantic-speech="b" transform="translate(778,0)">
 <use xlink:href="#E1-MJMATHI-62"></use>
</g>
</g>
<g data-semantic-type="operator" data-semantic-role="addition" data-semantic-id="4" data-semantic-parent="18" data-semantic-operator="infixop,±" data-semantic-speech="plus-or-minus" transform="translate(1430,0)">
 <use xlink:href="#E1-MJMAIN-B1"></use>
</g>
<g data-semantic-type="sqrt" data-semantic-role="unknown" data-semantic-id="16" data-semantic-children="15" data-semantic-parent="18" data-semantic-speech="StartRoot b squared minus 4 a c EndRoot" transform="translate(2430,0)">
 <use xlink:href="#E1-MJSZ1-221A" x="0" y="94"></use>
<rect stroke="none" width="3569" height="60" x="1000" y="885"></rect>
<g transform="translate(1000,0)">
<g data-semantic-type="infixop" data-semantic-role="subtraction" data-semantic-id="15" data-semantic-children="7,14" data-semantic-content="8" data-semantic-parent="16" data-semantic-speech="b squared minus 4 a c" data-semantic-prefix="Radicand">
<g data-semantic-type="superscript" data-semantic-role="latinletter" data-semantic-id="7" data-semantic-children="5,6" data-semantic-parent="15" data-semantic-speech="b squared">
<g data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-id="5" data-semantic-parent="7" data-semantic-speech="b" data-semantic-prefix="Base">
 <use xlink:href="#E1-MJMATHI-62"></use>
</g>
<g data-semantic-type="number" data-semantic-role="integer" data-semantic-font="normal" data-semantic-id="6" data-semantic-parent="7" data-semantic-speech="2" data-semantic-prefix="Exponent" transform="translate(429,288)">
 <use transform="scale(0.707)" xlink:href="#E1-MJMAIN-32"></use>
</g>
</g>
<g data-semantic-type="operator" data-semantic-role="subtraction" data-semantic-id="8" data-semantic-parent="15" data-semantic-operator="infixop,−" data-semantic-speech="minus" transform="translate(1105,0)">
 <use xlink:href="#E1-MJMAIN-2212"></use>
</g>
<g data-semantic-type="infixop" data-semantic-role="implicit" data-semantic-id="14" data-semantic-children="9,10,11" data-semantic-content="12,13" data-semantic-parent="15" data-semantic-speech="4 a c" transform="translate(2106,0)">
<g data-semantic-type="number" data-semantic-role="integer" data-semantic-font="normal" data-semantic-id="9" data-semantic-parent="14" data-semantic-speech="4">
 <use xlink:href="#E1-MJMAIN-34"></use>
</g>
<g data-semantic-type="operator" data-semantic-role="multiplication" data-semantic-id="12" data-semantic-parent="14" data-semantic-added="true" data-semantic-operator="infixop,⁢" data-semantic-speech="times"></g>
<g data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-id="10" data-semantic-parent="14" data-semantic-speech="a" transform="translate(500,0)">
 <use xlink:href="#E1-MJMATHI-61"></use>
</g>
<g data-semantic-type="operator" data-semantic-role="multiplication" data-semantic-id="13" data-semantic-parent="14" data-semantic-added="true" data-semantic-operator="infixop,⁢" data-semantic-speech="times"></g>
<g data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-id="11" data-semantic-parent="14" data-semantic-speech="c" transform="translate(1030,0)">
 <use xlink:href="#E1-MJMATHI-63"></use>
</g>
</g>
</g>
</g>
</g>
</g>
<g data-semantic-type="infixop" data-semantic-role="implicit" data-semantic-id="22" data-semantic-children="19,20" data-semantic-content="21" data-semantic-parent="23" data-semantic-speech="2 a" data-semantic-prefix="Denominator" transform="translate(3045,-687)">
<g data-semantic-type="number" data-semantic-role="integer" data-semantic-font="normal" data-semantic-id="19" data-semantic-parent="22" data-semantic-speech="2">
 <use xlink:href="#E1-MJMAIN-32"></use>
</g>
<g data-semantic-type="operator" data-semantic-role="multiplication" data-semantic-id="21" data-semantic-parent="22" data-semantic-added="true" data-semantic-operator="infixop,⁢" data-semantic-speech="times"></g>
<g data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-id="20" data-semantic-parent="22" data-semantic-speech="a" transform="translate(500,0)">
 <use xlink:href="#E1-MJMATHI-61"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
    </span>
  
            
          
!
            
              body {
  margin: 2em;
  font-size: 1.66em;
}

.is-activedescendant {
  color: #f012be !important;
}

[data-semantic-structure]:focus {
  background-color: black;
  color: #ffff;
}

figure .is-activedescendant,
figure .is-activedescendant * {
  outline: 1px solid #f012be;
}


/* MathJax */

.mjx-chtml {
  display: inline-block;
  line-height: 0;
  text-indent: 0;
  text-align: left;
  text-transform: none;
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
  font-size-adjust: none;
  letter-spacing: normal;
  word-wrap: normal;
  word-spacing: normal;
  white-space: nowrap;
  float: none;
  direction: ltr;
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;
  border: 0;
  margin: 0;
  padding: 1px 0;
}

.MJXc-display {
  display: block;
  text-align: center;
  margin: 1em 0;
  padding: 0;
}


.mjx-math {
  display: inline-block;
  border-collapse: separate;
  border-spacing: 0;
}

.mjx-math * {
  display: inline-block;
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
  text-align: left;
}

.mjx-numerator {
  display: block;
  text-align: center;
}

.mjx-denominator {
  display: block;
  text-align: center;
}

.MJXc-stacked {
  height: 0;
  position: relative;
}

.MJXc-stacked > * {
  position: absolute;
}
.mjx-surd {
  vertical-align: top;
}

.mjx-box {
  display: inline-block;
}

.mjx-char {
  display: block;
  white-space: pre;
}
.mjx-line {
  display: block;
  height: 0;
}

.mjx-vsize {
  width: 0;
}
.MJXc-space2 {
  margin-left: 0.222em;
}

.MJXc-space3 {
  margin-left: 0.278em;
}

.MJXc-TeX-main-R {
  font-family: MJXc-TeX-main-Rw;
}

.MJXc-TeX-math-I {
  font-family: MJXc-TeX-math-Iw;
}

@font-face {
  font-family: MJXc-TeX-main-Rw;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Main-Regular.eot');
  src: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Main-Regular.woff')
      format('woff'),
    url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Main-Regular.otf')
      format('opentype');
}

@font-face {
  font-family: MJXc-TeX-math-Iw;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Math-Italic.eot');
  src: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Math-Italic.woff')
      format('woff'),
    url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Math-Italic.otf')
      format('opentype');
}



.mjx-svg__block {
  display: block;
  margin: 0 auto;
  text-align: center;
}

            
          
!
            
              /*
 *
 *  Copyright (c) 2019 Tseng. Sorge, Cervone, Krautzberger
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */



function makeid(c, i) {
  return 'MJX' + c + '-' + i;
}

const speechers = function(node) {
  if (node.hasAttribute('data-semantic-speech')) {
    let speech = '';
    if (node.getAttribute('data-semantic-prefix')) speech += node.getAttribute('data-semantic-prefix') + ' ';
    speech += node.getAttribute('data-semantic-speech');
    node.setAttribute('aria-label', speech);
    if (node.hasAttribute('role') || node.tagName === 'A' || node.tagName === 'IMAGE') return;
    node.setAttribute('role', 'treeitem');
  } else {
    node.setAttribute('role', 'presentation');
  }
};

function rewriteNode(node, tree) {
  rewriteNodeRec(node, tree.root);
}

function rewriteNodeRec(node, snode) {
  let domNode =
    node.getAttribute('data-semantic-id') == snode.id
      ? node
      : node.querySelector(`[data-semantic-id="${snode.id}"]`);
  domNode.setAttribute('id', snode.name);
  speechers(domNode);
  let owned = snode.children.map(n => n.name);
  if (owned.length) {
    domNode.setAttribute('aria-owns', owned.join(' '));
    snode.children.forEach(x => rewriteNodeRec(node, x));
  }
}


function attachNavigator(node, tree) {
  new navigator(node, tree);
}

class navigator {
  constructor(node, tree) {
    this.node = node;
    this.tree = tree;
    this.node.addEventListener('keydown', this.move.bind(this));
    this.node.addEventListener('focusin', this.highlight.bind(this, true));
    this.node.addEventListener('focusout', this.highlight.bind(this, false));
  }

  active() {
    return this.tree.active;
  }

  move(event) {
    this.highlight(false);
    if ([32, 37, 38, 39, 40].indexOf(event.keyCode) > -1) {
      event.preventDefault();
    }
    switch (event.keyCode) {
      case 37: //left
        this.tree.left();
        break;
      case 38: //up
        this.tree.up();
        break;
      case 39: //right
        this.tree.right();
        break;
      case 40: //down
        this.tree.down();
        break;
      default:
        break;
    }
    this.highlight(true);
    this.node.setAttribute('aria-activedescendant', this.active().name);
  }

  highlight(boolean) {
    const activedescendant =
      this.active().name === this.node.id
        ? this.node
        : this.node.querySelector('#' + this.active().name);
    if (boolean === true) activedescendant.classList.add('is-activedescendant');
    if (boolean === false)
      activedescendant.classList.remove('is-activedescendant');
  }
}



const makeTree = function(sexp, count) {
  if (!Array.isArray(sexp)) {
    return new node(sexp, makeid(count, sexp));
  }
  let parent = new node(sexp[0], makeid(count, sexp[0]));
  for (let i = 1, child; i < sexp.length; i++) {
    let child = sexp[i];
    let newnode = makeTree(child, count);
    newnode.parent = parent;
    parent.children.push(newnode);
  }
  return parent;
};

class node {
  constructor(id, name) {
    this.id = id;
    this.name = name;
    this.parent = null;
    this.children = [];
  }
}

class tree {
  constructor(root, offset) {
    this.root = root;
    this.active = root;
    this.offset = offset;
  }

  up() {
    if (this.active.parent) {
      this.active = this.active.parent;
    }
  }

  down() {
    if (this.active.children.length) {
      this.active = this.active.children[0];
    }
  }

  left() {
    if (this.active.parent) {
      let index = this.active.parent.children.indexOf(this.active);
      if (index > 0) {
        this.active = this.active.parent.children[index - 1];
      }
    }
  }

  right() {
    if (this.active.parent) {
      let index = this.active.parent.children.indexOf(this.active);
      if (index < this.active.parent.children.length - 1) {
        this.active = this.active.parent.children[index + 1];
      }
    }
  }
}


const rewriteSkeleton = function(node, count) {
  let skeleton = node.getAttribute('data-semantic-structure');
  let replaced = skeleton
    .replace(/\(/g, '[')
    .replace(/\)/g, ']')
    .replace(/ /g, ',');
  let linearization = JSON.parse(replaced);
  let navigationStructure = makeTree(linearization, count);
  return new tree(navigationStructure, count);
};

document
  .querySelectorAll('[data-semantic-structure]')
  .forEach((node, index) => {
    node.setAttribute('tabindex', '0');
    node.setAttribute('role', 'tree');
    let tree = rewriteSkeleton(node, index);
    rewriteNode(node, tree);
    attachNavigator(node, tree);
  });

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console