Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

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.

Details

Privacy

Go PRO Window blinds lowered to protect code. Code Editor with window blinds (raised) and a light blub turned on.

Keep it secret; keep it safe.

Private Pens are hidden everywhere on CodePen, except to you. You can still share them and other people can see them, they just can't find them through searching or browsing.

Upgrade to PRO

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

Template

Make Template?

Templates are Pens that can be used to start other Pens quickly from the create menu. The new Pen will copy all the code and settings from the template and make a new Pen (that is not a fork). You can view all of your templates, or learn more in the documentation.

Template URL

Any Pen can act as a template (even if you don't flip the toggle above) with a special URL you can use yourself or share with others. Here's this Pen's template URL:

Screenshot

Screenshot or Custom Thumbnail

Screenshots of Pens are shown in mobile browsers, RSS feeds, to users who chose images instead of iframes, and in social media sharing.

This Pen is using the default Screenshot, generated by CodePen. Upgrade to PRO to upload your own thumbnail that will be displayed on previews of this pen throughout the site and when sharing to social media.

Upgrade to PRO

HTML

              
                <div style="display:flex;"><input id="hideunmapped_5_4" type="checkbox" name="hideunmapped_5_4" value="true" onclick="animateWedges();">
<span style="font-size:80%; margin-right:2em;">Hide wedges with no associated products</span>
</div><svg id="svg5_4" width="600" height="600" viewBox="0 0 600 600"><defs><path id="path_5_4_5_1377" d="M486.8483 307.5297 L594.7607 311.8784"></path>
<radialGradient id="grad_5_4_5_1377" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#A7BCC2"></stop>
<stop offset="100%" stop-color="#7A8F95"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1377" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1377, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1377" class="wedgePath" d="M485 300 A297 297 0 0 1 484.4001 314.8863 L596.0369 323.8986 A297 297 0 0 0 597 300 Z" stroke="#98ADB3" fill="url(#grad_5_4_5_1377)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1377" startOffset="50%"><tspan dx="0pt" dy="2pt">1.1)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1385" d="M485.6366 322.5403 L592.8491 335.5583"></path>
<radialGradient id="grad_5_4_5_1385" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#A7BCC2"></stop>
<stop offset="100%" stop-color="#7A8F95"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1385" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1385, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1385" class="wedgePath" d="M484.4001 314.8863 A297 297 0 0 1 482.6043 329.6761 L593.1539 347.6422 A297 297 0 0 0 596.0369 323.8986 Z" stroke="#98ADB3" fill="url(#grad_5_4_5_1385)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1385" startOffset="50%"><tspan dx="0pt" dy="2pt">1.2)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1389" d="M483.2209 337.4048 L589.0383 359.0076"></path>
<radialGradient id="grad_5_4_5_1389" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#A7BCC2"></stop>
<stop offset="100%" stop-color="#7A8F95"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1389" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1389, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1389" class="wedgePath" d="M482.6043 329.6761 A297 297 0 0 1 479.6242 344.2734 L588.3697 371.0768 A297 297 0 0 0 593.1539 347.6422 Z" stroke="#98ADB3" fill="url(#grad_5_4_5_1389)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1389" startOffset="50%"><tspan dx="0pt" dy="2pt">1.3)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1398" d="M479.6169 352.0267 L583.3528 382.0742"></path>
<radialGradient id="grad_5_4_5_1398" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94C1ED"></stop>
<stop offset="100%" stop-color="#6794C0"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1398" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1398, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1398" class="wedgePath" d="M479.6242 344.2734 A297 297 0 0 1 475.4792 358.5836 L581.7153 394.0504 A297 297 0 0 0 588.3698 371.0768 Z" stroke="#85B2DE" fill="url(#grad_5_4_5_1398)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1398" startOffset="50%"><tspan dx="0pt" dy="2pt">1.4)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1399" d="M474.848 366.3111 L575.8298 404.6084"></path>
<radialGradient id="grad_5_4_5_1399" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94ED94"></stop>
<stop offset="100%" stop-color="#67C067"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1399" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1399, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1399" class="wedgePath" d="M475.4792 358.5836 A297 297 0 0 1 470.1962 372.5138 L573.2339 416.4141 A297 297 0 0 0 581.7153 394.0504 Z" stroke="#85DE85" fill="url(#grad_5_4_5_1399)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1399" startOffset="50%"><tspan dx="0pt" dy="2pt">1.5)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1401" d="M468.9452 380.1655 L566.5179 426.4643"></path>
<radialGradient id="grad_5_4_5_1401" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94ED94"></stop>
<stop offset="100%" stop-color="#67C067"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1401" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1401, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1401" class="wedgePath" d="M470.1962 372.5138 A297 297 0 0 1 463.8094 385.9738 L562.9805 438.0228 A297 297 0 0 0 573.2339 416.4141 Z" stroke="#85DE85" fill="url(#grad_5_4_5_1401)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1401" startOffset="50%"><tspan dx="0pt" dy="2pt">2.1)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1403" d="M461.9467 393.5 L555.4775 447.5"></path>
<radialGradient id="grad_5_4_5_1403" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94ED94"></stop>
<stop offset="100%" stop-color="#67C067"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1403" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1403, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1403" class="wedgePath" d="M463.8094 385.9738 A297 297 0 0 1 456.3602 398.8762 L551.0214 458.7364 A297 297 0 0 0 562.9804 438.0228 Z" stroke="#85DE85" fill="url(#grad_5_4_5_1403)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1403" startOffset="50%"><tspan dx="0pt" dy="2pt">2.2)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1409" d="M453.898 406.2281 L542.7802 467.5791"></path>
<radialGradient id="grad_5_4_5_1409" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94C1ED"></stop>
<stop offset="100%" stop-color="#6794C0"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1409" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1409, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1409" class="wedgePath" d="M456.3602 398.8762 A297 297 0 0 1 447.8969 411.1373 L537.4345 478.4205 A297 297 0 0 0 551.0214 458.7364 Z" stroke="#85B2DE" fill="url(#grad_5_4_5_1409)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1409" startOffset="50%"><tspan dx="0pt" dy="2pt">2.3)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1410" d="M444.8511 418.2673 L528.5085 486.5714"></path>
<radialGradient id="grad_5_4_5_1410" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#62BB62"></stop>
<stop offset="100%" stop-color="#358E35"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1410" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1410, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1410" class="wedgePath" d="M447.8969 411.1373 A297 297 0 0 1 438.4745 422.6777 L522.3077 496.9474 A297 297 0 0 0 537.4345 478.4204 Z" stroke="#53AC53" fill="url(#grad_5_4_5_1410)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1410" startOffset="50%"><tspan dx="0pt" dy="2pt">2.4)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1411" d="M434.8649 429.5395 L512.7547 504.3537"></path>
<radialGradient id="grad_5_4_5_1411" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94ED94"></stop>
<stop offset="100%" stop-color="#67C067"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1411" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1411, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1411" class="wedgePath" d="M438.4745 422.6777 A297 297 0 0 1 428.154 433.4225 L505.7391 514.1971 A297 297 0 0 0 522.3077 496.9474 Z" stroke="#85DE85" fill="url(#grad_5_4_5_1411)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1411" startOffset="50%"><tspan dx="0pt" dy="2pt">2.5)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1412" d="M424.0039 439.9715 L495.6212 520.8107"></path>
<radialGradient id="grad_5_4_5_1412" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#EDD794"></stop>
<stop offset="100%" stop-color="#C0AA67"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1412" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1412, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1412" class="wedgePath" d="M428.154 433.4225 A297 297 0 0 1 417.0024 443.3019 L487.8363 530.0577 A297 297 0 0 0 505.7391 514.1971 Z" stroke="#DEC885" fill="url(#grad_5_4_5_1412)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1412" startOffset="50%"><tspan dx="0pt" dy="2pt">2.6)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1414" d="M412.3388 449.4958 L477.219 535.8356"></path>
<radialGradient id="grad_5_4_5_1414" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94ED94"></stop>
<stop offset="100%" stop-color="#67C067"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1414" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1414, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1414" class="wedgePath" d="M417.0024 443.3019 A297 297 0 0 1 405.092 452.252 L468.7152 544.4262 A297 297 0 0 0 487.8363 530.0577 Z" stroke="#85DE85" fill="url(#grad_5_4_5_1414)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1414" startOffset="50%"><tspan dx="0pt" dy="2pt">3.1)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1415" d="M399.9451 458.0505 L457.6674 549.3311"></path>
<radialGradient id="grad_5_4_5_1415" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94C1ED"></stop>
<stop offset="100%" stop-color="#6794C0"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1415" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1415, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1415" class="wedgePath" d="M405.092 452.252 A297 297 0 0 1 392.5 460.2147 L448.5 557.2095 A297 297 0 0 0 468.7152 544.4262 Z" stroke="#85B2DE" fill="url(#grad_5_4_5_1415)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1415" startOffset="50%"><tspan dx="0pt" dy="2pt">3.2)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1419" d="M386.9032 465.5803 L437.0933 561.2095"></path>
<radialGradient id="grad_5_4_5_1419" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94C1ED"></stop>
<stop offset="100%" stop-color="#6794C0"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1419" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1419, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1419" class="wedgePath" d="M392.5 460.2147 A297 297 0 0 1 379.3081 467.1383 L427.3217 568.3248 A297 297 0 0 0 448.5 557.2095 Z" stroke="#85B2DE" fill="url(#grad_5_4_5_1419)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1419" startOffset="50%"><tspan dx="0pt" dy="2pt">3.3)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1420" d="M373.2978 472.0362 L415.6301 571.3939"></path>
<radialGradient id="grad_5_4_5_1420" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94C1ED"></stop>
<stop offset="100%" stop-color="#6794C0"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1420" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1420, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1420" class="wedgePath" d="M379.3081 467.1383 A297 297 0 0 1 365.6019 472.978 L405.3176 577.6998 A297 297 0 0 0 427.3217 568.3248 Z" stroke="#85B2DE" fill="url(#grad_5_4_5_1420)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1420" startOffset="50%"><tspan dx="0pt" dy="2pt">3.4)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1422" d="M359.2169 477.3763 L393.417 579.8182"></path>
<radialGradient id="grad_5_4_5_1422" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94C1ED"></stop>
<stop offset="100%" stop-color="#6794C0"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1422" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1422, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1422" class="wedgePath" d="M365.6019 472.978 A297 297 0 0 1 351.4702 477.6959 L382.6306 585.2739 A297 297 0 0 0 405.3176 577.6998 Z" stroke="#85B2DE" fill="url(#grad_5_4_5_1422)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1422" startOffset="50%"><tspan dx="0pt" dy="2pt">3.5)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1426" d="M344.752 481.5661 L370.5981 586.4279"></path>
<radialGradient id="grad_5_4_5_1426" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94ED94"></stop>
<stop offset="100%" stop-color="#67C067"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1426" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1426, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1426" class="wedgePath" d="M351.4702 477.6959 A297 297 0 0 1 337.0047 481.2613 L359.4076 590.9978 A297 297 0 0 0 382.6306 585.2739 Z" stroke="#85DE85" fill="url(#grad_5_4_5_1426)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1426" startOffset="50%"><tspan dx="0pt" dy="2pt">3.6)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1435" d="M329.9969 484.5784 L347.3213 591.1798"></path>
<radialGradient id="grad_5_4_5_1435" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94ED94"></stop>
<stop offset="100%" stop-color="#67C067"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1435" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1435, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1435" class="wedgePath" d="M337.0047 481.2613 A297 297 0 0 1 322.2993 483.6512 L335.7993 594.8345 A297 297 0 0 0 359.4076 590.9979 Z" stroke="#85DE85" fill="url(#grad_5_4_5_1435)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1435" startOffset="50%"><tspan dx="0pt" dy="2pt">3.7)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1437" d="M315.0472 486.3936 L323.7376 594.0434"></path>
<radialGradient id="grad_5_4_5_1437" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94C1ED"></stop>
<stop offset="100%" stop-color="#6794C0"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1437" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1437, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1437" class="wedgePath" d="M322.2993 483.6512 A297 297 0 0 1 307.4492 484.85 L311.959 596.7592 A297 297 0 0 0 335.7994 594.8345 Z" stroke="#85B2DE" fill="url(#grad_5_4_5_1437)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1437" startOffset="50%"><tspan dx="0pt" dy="2pt">4.1)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1439" d="M300 595 L300 487"></path>
<radialGradient id="grad_5_4_5_1439" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94C1ED"></stop>
<stop offset="100%" stop-color="#6794C0"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1439" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1439, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1439" class="wedgePath" d="M307.4492 484.85 A297 297 0 0 1 292.5508 484.85 L288.041 596.7592 A297 297 0 0 0 311.959 596.7592 Z" stroke="#85B2DE" fill="url(#grad_5_4_5_1439)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1439" startOffset="50%"><tspan dx="0pt" dy="2pt">4.2)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1440" d="M276.2623 594.0434 L284.9527 486.3936"></path>
<radialGradient id="grad_5_4_5_1440" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94ED94"></stop>
<stop offset="100%" stop-color="#67C067"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1440" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1440, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1440" class="wedgePath" d="M292.5508 484.85 A297 297 0 0 1 277.7007 483.6511 L264.2006 594.8345 A297 297 0 0 0 288.041 596.7592 Z" stroke="#85DE85" fill="url(#grad_5_4_5_1440)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1440" startOffset="50%"><tspan dx="0pt" dy="2pt">4.3)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1442" d="M252.6786 591.1798 L270.0031 484.5784"></path>
<radialGradient id="grad_5_4_5_1442" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94C1ED"></stop>
<stop offset="100%" stop-color="#6794C0"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1442" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1442, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1442" class="wedgePath" d="M277.7007 483.6512 A297 297 0 0 1 262.9952 481.2613 L240.5923 590.9978 A297 297 0 0 0 264.2006 594.8345 Z" stroke="#85B2DE" fill="url(#grad_5_4_5_1442)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1442" startOffset="50%"><tspan dx="0pt" dy="2pt">5.1)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1445" d="M229.4019 586.4279 L255.248 481.5661"></path>
<radialGradient id="grad_5_4_5_1445" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94C1ED"></stop>
<stop offset="100%" stop-color="#6794C0"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1445" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1445, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1445" class="wedgePath" d="M262.9952 481.2613 A297 297 0 0 1 248.5298 477.6958 L217.3694 585.2739 A297 297 0 0 0 240.5923 590.9978 Z" stroke="#85B2DE" fill="url(#grad_5_4_5_1445)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1445" startOffset="50%"><tspan dx="0pt" dy="2pt">5.2)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1446" d="M206.5829 579.8182 L240.7831 477.3763"></path>
<radialGradient id="grad_5_4_5_1446" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94C1ED"></stop>
<stop offset="100%" stop-color="#6794C0"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1446" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1446, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1446" class="wedgePath" d="M248.5297 477.6958 A297 297 0 0 1 234.3981 472.978 L194.6823 577.6998 A297 297 0 0 0 217.3694 585.2739 Z" stroke="#85B2DE" fill="url(#grad_5_4_5_1446)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1446" startOffset="50%"><tspan dx="0pt" dy="2pt">5.3)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1447" d="M184.3698 571.3939 L226.7022 472.0361"></path>
<radialGradient id="grad_5_4_5_1447" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94ED94"></stop>
<stop offset="100%" stop-color="#67C067"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1447" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1447, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1447" class="wedgePath" d="M234.3981 472.978 A297 297 0 0 1 220.6918 467.1383 L172.6783 568.3248 A297 297 0 0 0 194.6823 577.6998 Z" stroke="#85DE85" fill="url(#grad_5_4_5_1447)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1447" startOffset="50%"><tspan dx="0pt" dy="2pt">5.4)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1449" d="M162.9066 561.2095 L213.0968 465.5803"></path>
<radialGradient id="grad_5_4_5_1449" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94ED94"></stop>
<stop offset="100%" stop-color="#67C067"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1449" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1449, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1449" class="wedgePath" d="M220.6919 467.1383 A297 297 0 0 1 207.5 460.2147 L151.5 557.2095 A297 297 0 0 0 172.6783 568.3248 Z" stroke="#85DE85" fill="url(#grad_5_4_5_1449)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1449" startOffset="50%"><tspan dx="0pt" dy="2pt">6.1)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1450" d="M142.3326 549.3311 L200.0549 458.0505"></path>
<radialGradient id="grad_5_4_5_1450" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94C1ED"></stop>
<stop offset="100%" stop-color="#6794C0"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1450" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1450, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1450" class="wedgePath" d="M207.5 460.2147 A297 297 0 0 1 194.908 452.252 L131.2847 544.4262 A297 297 0 0 0 151.5 557.2095 Z" stroke="#85B2DE" fill="url(#grad_5_4_5_1450)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1450" startOffset="50%"><tspan dx="0pt" dy="2pt">6.2)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1451" d="M122.781 535.8356 L187.6612 449.4958"></path>
<radialGradient id="grad_5_4_5_1451" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94ED94"></stop>
<stop offset="100%" stop-color="#67C067"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1451" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1451, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1451" class="wedgePath" d="M194.908 452.252 A297 297 0 0 1 182.9976 443.3019 L112.1637 530.0576 A297 297 0 0 0 131.2847 544.4262 Z" stroke="#85DE85" fill="url(#grad_5_4_5_1451)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1451" startOffset="50%"><tspan dx="0pt" dy="2pt">6.3)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1454" d="M104.3788 520.8107 L175.996 439.9715"></path>
<radialGradient id="grad_5_4_5_1454" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94ED94"></stop>
<stop offset="100%" stop-color="#67C067"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1454" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1454, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1454" class="wedgePath" d="M182.9976 443.3019 A297 297 0 0 1 171.846 433.4225 L94.26085 514.1971 A297 297 0 0 0 112.1637 530.0577 Z" stroke="#85DE85" fill="url(#grad_5_4_5_1454)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1454" startOffset="50%"><tspan dx="0pt" dy="2pt">6.4)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1464" d="M87.24525 504.3537 L165.1351 429.5394"></path>
<radialGradient id="grad_5_4_5_1464" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#EDD794"></stop>
<stop offset="100%" stop-color="#C0AA67"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1464" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1464, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1464" class="wedgePath" d="M171.846 433.4224 A297 297 0 0 1 161.5255 422.6777 L77.69228 496.9474 A297 297 0 0 0 94.26084 514.1971 Z" stroke="#DEC885" fill="url(#grad_5_4_5_1464)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1464" startOffset="50%"><tspan dx="0pt" dy="2pt">6.5)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1475" d="M71.49151 486.5714 L155.1488 418.2673"></path>
<radialGradient id="grad_5_4_5_1475" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94ED94"></stop>
<stop offset="100%" stop-color="#67C067"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1475" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1475, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1475" class="wedgePath" d="M161.5255 422.6777 A297 297 0 0 1 152.1031 411.1373 L62.56547 478.4204 A297 297 0 0 0 77.69228 496.9474 Z" stroke="#85DE85" fill="url(#grad_5_4_5_1475)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1475" startOffset="50%"><tspan dx="0pt" dy="2pt">6.6)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1476" d="M57.21973 467.579 L146.102 406.2281"></path>
<radialGradient id="grad_5_4_5_1476" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94ED94"></stop>
<stop offset="100%" stop-color="#67C067"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1476" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1476, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1476" class="wedgePath" d="M152.1031 411.1373 A297 297 0 0 1 143.6398 398.8762 L48.97851 458.7363 A297 297 0 0 0 62.56546 478.4204 Z" stroke="#85DE85" fill="url(#grad_5_4_5_1476)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1476" startOffset="50%"><tspan dx="0pt" dy="2pt">6.7)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1478" d="M44.52247 447.4999 L138.0532 393.5"></path>
<radialGradient id="grad_5_4_5_1478" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#A7BCC2"></stop>
<stop offset="100%" stop-color="#7A8F95"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1478" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1478, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1478" class="wedgePath" d="M143.6398 398.8761 A297 297 0 0 1 136.1906 385.9738 L37.01953 438.0227 A297 297 0 0 0 48.9785 458.7363 Z" stroke="#98ADB3" fill="url(#grad_5_4_5_1478)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1478" startOffset="50%"><tspan dx="0pt" dy="2pt">7.1)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1483" d="M33.48209 426.4642 L131.0547 380.1655"></path>
<radialGradient id="grad_5_4_5_1483" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#A7BCC2"></stop>
<stop offset="100%" stop-color="#7A8F95"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1483" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1483, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1483" class="wedgePath" d="M136.1906 385.9738 A297 297 0 0 1 129.8038 372.5138 L26.76607 416.414 A297 297 0 0 0 37.01952 438.0227 Z" stroke="#98ADB3" fill="url(#grad_5_4_5_1483)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1483" startOffset="50%"><tspan dx="0pt" dy="2pt">7.2)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1487" d="M24.17017 404.6083 L125.1519 366.3111"></path>
<radialGradient id="grad_5_4_5_1487" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#94ED94"></stop>
<stop offset="100%" stop-color="#67C067"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1487" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1487, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1487" class="wedgePath" d="M129.8038 372.5138 A297 297 0 0 1 124.5207 358.5835 L18.28465 394.0503 A297 297 0 0 0 26.76607 416.414 Z" stroke="#85DE85" fill="url(#grad_5_4_5_1487)"></path>
<text text-anchor="middle" font-size="8pt" font-family="Calibri" pointer-events="none"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path_5_4_5_1487" startOffset="50%"><tspan dx="0pt" dy="2pt">7.3)</tspan>
</textPath>
</text>
</g>
<defs><path id="path_5_4_5_1489" d="M16.64713 382.074 L120.3831 352.0266"></path>
<radialGradient id="grad_5_4_5_1489" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"><stop offset="62%" stop-color="#A7BCC2"></stop>
<stop offset="100%" stop-color="#7A8F95"></stop>
</radialGradient>
</defs>
<g id="wedge_5_4_5_1489" class="wedgeGroup" onclick="onClickTimer(evt, wedge_5_4_5_1489, 'svg5_4')" opacity="1" stroke-width="1"><path id="wedgePath_5_4_5_1489" class="wedgePath" d="M124.5207 358.5835 A297 297 0 0 1 120.3757 344.2733 L11.63025 371.0767 A297 297 0 0 0 18.28464 394.0503 Z" stroke="#98ADB3" fill="url(#grad_5_4_5_1489)"></path>
<
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px
Two CSS properties walk into a bar. A barstool in a completely different bar falls over.

Console