Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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.

+ 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.

Behavior

Auto Save

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.

HTML

              
                <!-- Made by Dale de Silva -->
<!-- designdebt.club -->
<!-- twitter: @daledesilva -->

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400&family=Square+Peg&display=swap" rel="stylesheet">


<main id="container">


  <div id="tooth-selector_radio">
    <input type="radio" name="tooth" value="incisor" id="tooth-set_incisor">
    <label for="tooth-set_incisor">
      Incisor
    </label>
    <input type="radio" name="tooth" value="canine" id="tooth-set_canine">
    <label for="tooth-set_canine">
      Canine
    </label>
    <input type="radio" name="tooth" value="premolar" id="tooth-set_premolar">
    <label for="tooth-set_premolar">
      Premolar
    </label>
    <input type="radio" name="tooth" value="molar" id="tooth-set_molar">
    <label for="tooth-set_molar">
      Molar
    </label>
  </div>


  <h1 id="heading">pick a tooth</h1>
  <p id="description"><br/></p> <!-- There's a <br/> in this paragraph to ensure it has a line whem empty and therefore doesn't change size and affect layout later -->


<!-- SVG with included animation - made with SVGator.com -->
<svg id="mouth-anims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 150" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><defs><linearGradient id="mouth-anims-s-path2-fill" x1="0.498813" y1="0.031497" x2="0.528272" y2="0.619834" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="mouth-anims-s-path2-fill-0" offset="0%" stop-color="#fff"/><stop id="mouth-anims-s-path2-fill-1" offset="68.1718%" stop-color="#fff"/><stop id="mouth-anims-s-path2-fill-2" offset="100%" stop-color="#e1e1e1"/></linearGradient><linearGradient id="mouth-anims-s-path4-fill" x1="0.58546" y1="0.04025" x2="0.525508" y2="0.611042" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="mouth-anims-s-path4-fill-0" offset="0%" stop-color="#fff"/><stop id="mouth-anims-s-path4-fill-1" offset="65%" stop-color="#fff"/><stop id="mouth-anims-s-path4-fill-2" offset="100%" stop-color="#e1e1e1"/></linearGradient><linearGradient id="mouth-anims-s-path5-fill" x1="0.486084" y1="0.032764" x2="0.480156" y2="0.649552" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="mouth-anims-s-path5-fill-0" offset="0%" stop-color="#fff"/><stop id="mouth-anims-s-path5-fill-1" offset="68%" stop-color="#fff"/><stop id="mouth-anims-s-path5-fill-2" offset="100%" stop-color="#e1e1e1"/></linearGradient><linearGradient id="mouth-anims-s-path6-fill" x1="0.496312" y1="0.034859" x2="0.495929" y2="0.723121" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="mouth-anims-s-path6-fill-0" offset="0%" stop-color="#fff"/><stop id="mouth-anims-s-path6-fill-1" offset="68.903%" stop-color="#fff"/><stop id="mouth-anims-s-path6-fill-2" offset="100%" stop-color="#e1e1e1"/></linearGradient><linearGradient id="mouth-anims-s-path7-fill" x1="0.503967" y1="0.01201" x2="0.479993" y2="0.600753" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="mouth-anims-s-path7-fill-0" offset="0%" stop-color="#fff"/><stop id="mouth-anims-s-path7-fill-1" offset="68%" stop-color="#fff"/><stop id="mouth-anims-s-path7-fill-2" offset="100%" stop-color="#e1e1e1"/></linearGradient><linearGradient id="mouth-anims-s-path8-fill" x1="0.528477" y1="0.021931" x2="0.474265" y2="0.572967" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="mouth-anims-s-path8-fill-0" offset="0%" stop-color="#fff"/><stop id="mouth-anims-s-path8-fill-1" offset="69.2319%" stop-color="#fff"/><stop id="mouth-anims-s-path8-fill-2" offset="100%" stop-color="#e1e1e1"/></linearGradient><linearGradient id="mouth-anims-s-path9-fill" x1="0.507809" y1="0.009186" x2="0.484098" y2="0.402981" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="mouth-anims-s-path9-fill-0" offset="0%" stop-color="#fff"/><stop id="mouth-anims-s-path9-fill-1" offset="73.8337%" stop-color="#fff"/><stop id="mouth-anims-s-path9-fill-2" offset="100%" stop-color="#e1e1e1"/></linearGradient><linearGradient id="mouth-anims-s-path10-fill" x1="0.51801" y1="0.021575" x2="0.510284" y2="0.40836" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="mouth-anims-s-path10-fill-0" offset="0%" stop-color="#fff"/><stop id="mouth-anims-s-path10-fill-1" offset="62.8902%" stop-color="#fff"/><stop id="mouth-anims-s-path10-fill-2" offset="100%" stop-color="#e1e1e1"/></linearGradient></defs><g id="mouth-anims-u-clip-group" transform="translate(-26.932095-59.87811)" clip-path="url(#mouth-anims-u-clipping-paths)"><rect id="mouth-anims-u-mouth-colour" width="276.11707" height="214.991918" rx="0" ry="0" transform="translate(13.943605 39.117928)" fill="#584e4e" stroke-width="0"/><path id="mouth-anims-u-tonsils" d="M94.698,56.114814c0-.204054-12.663691,11.336737-5.72586,26.028615s18.785306,17.638914,30.620431,17.43486s23.058087-13.059448,22.037818-27.139165-9.590531-23.058087-15.099986-20.405387-9.590533,9.386476-3.877024,16.528362-2.040538,13.263502-6.937831,13.059448-7.958101-5.509455-6.121616-12.447287s4.897293-10.814855-.408108-13.467556-10.814854-2.44864-14.487824.40811Z" transform="matrix(1.852346 0 0 1.603234-62.203435 19.050889)" opacity="0" fill="#554b4b" stroke-width="0.5"/><path id="mouth-anims-u-tongue" d="M53.482519,205.686301Q91.436539,153.44851,150,155.080941t97.741803,48.156713q-94.272887,58.453211-194.259284,2.448647Z" transform="translate(-.301543-19.999992)" fill="#ff7491" stroke="#3f5787" stroke-width="0.6"/><g id="mouth-anims-u-teeth" transform="translate(0-17.999999)"><g id="mouth-anims-u-molar-l" transform="matrix(-.413981 0.143123-.143124-.413984 526.304456 56.01798)"><path id="mouth-anims-s-path1" d="M660.872855,155.376282q3.110764,23.7882,4.940626,30.741674c1.829862,6.953474,2.876049,11.139501,4.929193,10.981567s3.711451-4.027319,4.580089-7.501871s1.974178-13.977172,2.605914-20.452472s4.81699-20.847308,1.816242-26.532937-14.608908-6.949103-17.688624-1.105539q-3.079716,5.843564-1.18344,13.869578Z" transform="translate(.000001 0)" fill="#ededed" stroke-width="0.6"/><path id="mouth-anims-s-path2" d="M640.10308,122.459014c-1.423845-4.857826-3.517736-8.459317-4.104025-13.317143s-.837555-10.553207.58629-14.992255s3.266469-8.626829,6.030404-9.966919s5.444115-2.093891,8.040539-1.088823s2.84769,1.675113,3.601491,1.842624-.167511-1.758868,3.769003-2.010135s7.873029,1.256335,11.223253,1.591357s10.971986.58629,12.144564.921312s1.591356-.586291,3.350224-1.507602s4.606559-1.256335,7.286739-.418778s4.606558,4.355293,5.779137,7.789273s2.428913,8.124294,1.842624,12.98212-1.5076,11.390763-3.182713,14.992255-4.60656,7.705517-5.192849,9.883163-1.005068,3.936513,1.34009,7.538005s5.862893,9.715652,6.365427,16.164834-.418778,15.82981-1.088823,22.111482-3.098957,17.337414-4.941581,20.436371-4.020269,4.77407-6.281671,3.601491-2.512669-3.60149-3.601492-8.375561-2.596423-13.233388-3.182713-17.58868-2.09389-18.34248-4.522803-24.205373-3.015202-5.611626-5.444115-5.611626-5.192848,12.563343-6.11416,17.337413-2.428913,14.908498-2.512669,19.431302-.670045,14.32221-1.926379,16.834879-3.350225,3.852758-5.276604,1.758868-5.109092-8.961851-6.86796-14.573477-4.690315-13.735921-5.946649-19.598814-.586288-13.903432.753801-19.180036s2.680179-5.779138,3.601491-9.380629.586288-3.685246-.753801-5.360359-2.931447-2.931446-4.77407-8.040539Z" fill="url(#mouth-anims-s-path2-fill)" stroke-width="0.6"/></g><g id="mouth-anims-u-molar-r" transform="matrix(-.436334-.131022 0.131022-.436336 335.377885 250.525455)"><path id="mouth-anims-s-path3" d="M660.872855,155.376282q3.110764,23.7882,4.940626,30.741674c1.829862,6.953474,2.876049,11.139501,4.929193,10.981567s3.711451-4.027319,4.580089-7.501871s1.974178-13.977172,2.605914-20.452472s4.81699-20.847308,1.816242-26.532937-14.608908-6.949103-17.688624-1.105539q-3.079716,5.843564-1.18344,13.869578Z" transform="translate(.000001 0)" fill="#ededed" stroke-width="0.6"/><path id="mouth-anims-s-path4" d="M640.10308,122.459014c-1.423845-4.857826-3.517736-8.459317-4.104025-13.317143s-.837555-10.553207.58629-14.992255s3.266469-8.626829,6.030404-9.966919s5.444115-2.093891,8.040539-1.088823s2.84769,1.675113,3.601491,1.842624-.167511-1.758868,3.769003-2.010135s7.873029,1.256335,11.223253,1.591357s10.971986.58629,12.144564.921312s1.591356-.586291,3.350224-1.507602s4.606559-1.256335,7.286739-.418778s4.606558,4.355293,5.779137,7.789273s2.428913,8.124294,1.842624,12.98212-1.5076,11.390763-3.182713,14.992255-4.60656,7.705517-5.192849,9.883163-1.005068,3.936513,1.34009,7.538005s5.862893,9.715652,6.365427,16.164834-.418778,15.82981-1.088823,22.111482-3.098957,17.337414-4.941581,20.436371-4.020269,4.77407-6.281671,3.601491-2.512669-3.60149-3.601492-8.375561-2.596423-13.233388-3.182713-17.58868-2.09389-18.34248-4.522803-24.205373-3.015202-5.611626-5.444115-5.611626-5.192848,12.563343-6.11416,17.337413-2.428913,14.908498-2.512669,19.431302-.670045,14.32221-1.926379,16.834879-3.350225,3.852758-5.276604,1.758868-5.109092-8.961851-6.86796-14.573477-4.690315-13.735921-5.946649-19.598814-.586288-13.903432.753801-19.180036s2.680179-5.779138,3.601491-9.380629.586288-3.685246-.753801-5.360359-2.931447-2.931446-4.77407-8.040539Z" fill="url(#mouth-anims-s-path4-fill)" stroke-width="0.6"/></g><g id="mouth-anims-u-premolar-l" transform="matrix(-.454859 0.153249-.153249-.454858 485.488752 77.01759)"><path id="mouth-anims-s-path5" d="M536.245449,93.686776c.656567-3.470422,2.626267-5.440121,4.689761-7.03464s4.314577-2.34488,7.503615-2.15729s4.033194.656565,6.284279,1.500722s2.344879,1.031746,4.87735-.937953s3.189035-2.626266,6.002892-2.907652s5.909098.937951,7.691207,2.251084s3.282832,2.438673,5.064941.75036s2.251084-3.095243,4.971145-3.751809s5.252531-.468977,7.785002,1.031747s6.284279,5.533917,6.753255,10.223677-.281386,15.194822-2.251085,21.385306-3.001446,9.942293-3.376627,12.849944-2.813856,29.264106-3.564218,35.923565-2.15729,25.418502-3.001447,29.3579-1.219338,7.222231-3.564218,7.222231-3.9394-3.282833-4.783556-6.47187-6.378073-24.85573-7.128435-28.607538-2.907652-6.190485-3.470423-4.31458-1.875904,10.880244-2.251085,14.725848-1.9697,15.007233-3.564218,18.946632-3.189036,5.721508-5.158736,5.346327-4.314579-1.688315-5.815303-8.347774-3.751808-22.510849-4.595965-29.54549-3.658014-24.011574-4.220785-28.607539-1.031747-6.378073-1.406928-8.066387-3.001447-9.285726-3.658013-15.101029-.468967-13.318904.187595-15.663792Z" transform="translate(.000005 1.046996)" fill="url(#mouth-anims-s-path5-fill)" stroke-width="0.6"/></g><g id="mouth-anims-u-premolar-r" transform="matrix(-.444443-.122898 0.122899-.444448 319.480691 240.144414)"><path id="mouth-anims-s-path6" d="M536.245449,93.686776c.656567-3.470422,2.626267-5.440121,4.689761-7.03464s4.314577-2.34488,7.503615-2.15729s4.033194.656565,6.284279,1.500722s2.344879,1.031746,4.87735-.937953s3.189035-2.626266,6.002892-2.907652s5.909098.937951,7.691207,2.251084s3.282832,2.438673,5.064941.75036s2.251084-3.095243,4.971145-3.751809s5.252531-.468977,7.785002,1.031747s6.284279,5.533917,6.753255,10.223677-.281386,15.194822-2.251085,21.385306-3.001446,9.942293-3.376627,12.849944-2.813856,29.264106-3.564218,35.923565-2.15729,25.418502-3.001447,29.3579-1.219338,7.222231-3.564218,7.222231-3.9394-3.282833-4.783556-6.47187-6.378073-24.85573-7.128435-28.607538-2.907652-6.190485-3.470423-4.31458-1.875904,10.880244-2.251085,14.725848-1.9697,15.007233-3.564218,18.946632-3.189036,5.721508-5.158736,5.346327-4.314579-1.688315-5.815303-8.347774-3.751808-22.510849-4.595965-29.54549-3.658014-24.011574-4.220785-28.607539-1.031747-6.378073-1.406928-8.066387-3.001447-9.285726-3.658013-15.101029-.468967-13.318904.187595-15.663792Z" transform="translate(.000005 1.046996)" fill="url(#mouth-anims-s-path6-fill)" stroke-width="0.6"/></g><g id="mouth-anims-u-canine-l" transform="matrix(-.603821 0.123197-.123197-.603821 491.654234 127.72923)"><path id="mouth-anims-s-path7" d="M471.696518,89.639834c3.898281-3.282762,5.962481-7.217423,10.921653-5.278259s8.159404,6.919642,11.031822,8.971368s7.141754,5.350825,7.067988,8.744035-.221296,12.023764-1.401543,16.302158-3.420024,10.268084-4.231444,11.964689-1.208687,3.693207-.805791,6.244878s1.36447,12.561622-.047195,19.94572-1.891218,14.053242-2.667534,17.213955-1.330828,8.705823-2.273496,10.757514-2.755251,9.685259-5.064402,12.507556-4.105159,2.565724-5.259735-1.539435-6.414311-20.397509-7.825459-25.657244-2.180865-13.470052-2.565724-19.627791-.513145-15.779205-2.180866-20.525795-4.602904-13.47439-5.272922-16.638367-1.218218-4.978285-1.121396-8.173411s2.526548-6.044236,4.754946-8.615464s4.602626-4.878279,6.941098-6.596107Z" transform="translate(.000002 0)" fill="url(#mouth-anims-s-path7-fill)" stroke-width="0.6"/></g><g id="mouth-anims-u-canine-r" transform="matrix(-.64052-.090356 0.090357-.640527 402.860288 236.946904)"><path id="mouth-anims-s-path8" d="M471.696518,89.639834c3.898281-3.282762,5.962481-7.217423,10.921653-5.278259s8.159404,6.919642,11.031822,8.971368s7.141754,5.350825,7.067988,8.744035-.221296,12.023764-1.401543,16.302158-3.420024,10.268084-4.231444,11.964689-1.208687,3.693207-.805791,6.244878s1.36447,12.561622-.047195,19.94572-1.891218,14.053242-2.667534,17.213955-1.330828,8.705823-2.273496,10.757514-2.755251,9.685259-5.064402,12.507556-4.105159,2.565724-5.259735-1.539435-6.414311-20.397509-7.825459-25.657244-2.180865-13.470052-2.565724-19.627791-.513145-15.779205-2.180866-20.525795-4.602904-13.47439-5.272922-16.638367-1.218218-4.978285-1.121396-8.173411s2.526548-6.044236,4.754946-8.615464s4.602626-4.878279,6.941098-6.596107Z" transform="translate(.000002 0)" fill="url(#mouth-anims-s-path8-fill)" stroke-width="0.6"/></g><g id="mouth-anims-u-incisor-l" transform="matrix(-.83459 0.095181-.09472-.830543 351.207129 242.409895)"><path id="mouth-anims-s-path9" d="M385.378256,123.500145q-3.025101-17.243073-3.630121-22.385744c-.60502-5.142671.605019-11.797893,5.14267-13.612953s14.822991-.907531,19.663152-1.512551s14.520482.30251,14.520482,4.840161s0,17.243073-1.815061,24.200804-3.932631,13.612953-5.142672,14.822993-2.722591,18.453113-3.630121,31.461045-6.352711,26.923393-7.260241,31.763554-5.142671-3.025101-6.050201-9.680322-2.11757-20.873194-5.142671-31.763556-2.585401-17.971092-3.956927-21.850358c-.671987-1.900669-2.093264-1.140399-2.698289-6.283073Z" transform="translate(-194.28049 60.337521)" fill="url(#mouth-anims-s-path9-fill)" stroke-width="0.6"/></g><g id="mouth-anims-u-incisor-r" transform="matrix(-.83587-.009242 0.009242-.835876 302.946579 266.865383)"><path id="mouth-anims-s-path10" d="M385.378256,123.500145q-3.025101-17.243073-3.630121-22.385744c-.60502-5.142671.605019-11.797893,5.14267-13.612953s14.822991-.907531,19.663152-1.512551s14.520482.30251,14.520482,4.840161s0,17.243073-1.815061,24.200804-3.932631,13.612953-5.142672,14.822993-2.722591,18.453113-3.630121,31.461045-6.352711,26.923393-7.260241,31.763554-5.142671-3.025101-6.050201-9.680322-2.11757-20.873194-5.142671-31.763556-2.585401-17.971092-3.956927-21.850358c-.671987-1.900669-2.093264-1.140399-2.698289-6.283073Z" transform="translate(-194.28049 60.337521)" fill="url(#mouth-anims-s-path10-fill)" stroke-width="0.6"/></g></g><clipPath id="mouth-anims-u-clipping-paths"><path id="mouth-anims-u-mouth-shape" d="M69.666449,140.910982c-6.384416.249168-5.941231,6.18028-.843106,5.901739c14.31486-.782106,82.015773.843105,106.465834-.421553s42.895942-.193544,55.458014-.842142c5.798356-.299378,6.628079-6.198414.403101-5.920639-17.902524.798857-36.846771-.915298-58.320587.426815-20.234534,1.264658-50.364191,1.280445-64.145867.85578-17.893873-.551377-22.557929-.642372-39.017389,0Z" transform="translate(1.632435-15.591878)" fill="#584e4e" stroke="#3f5787" stroke-width="0.6"/></clipPath></g><path id="mouth-anims-u-cheek-r" d="M38.583186,62.032377q-.612162,6.733777-.204054,9.998639c.408108,3.264862-1.224323,6.121617,2.040539,5.509455s3.468915-6.733778,3.060807-9.590532-.408106-7.754046-4.897292-5.917562Z" transform="translate(.000001-.816216)" fill="#584e4e" stroke-width="0.5"/><path id="mouth-anims-u-cheek-l" d="M38.583186,62.032377q-.612162,6.733777-.204054,9.998639c.408108,3.264862-1.224323,6.121617,2.040539,5.509455s3.468915-6.733778,3.060807-9.590532-.408106-7.754046-4.897292-5.917562Z" transform="matrix(-1 0 0-1 250.406853 136.619612)" fill="#584e4e" stroke-width="0.5"/>
<script><![CDATA[
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof __SVGATOR_DEFINE__&&__SVGATOR_DEFINE__.amd?__SVGATOR_DEFINE__(e):((t="undefined"!=typeof globalThis?globalThis:t||self).__SVGATOR_PLAYER__=t.__SVGATOR_PLAYER__||{},t.__SVGATOR_PLAYER__["91c80d77"]=e())}(this,(function(){"use strict";function t(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function e(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?t(Object(r),!0).forEach((function(t){u(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):t(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function o(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function u(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function a(t){return(a=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function l(t,e){return(l=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function s(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}function f(t,e,n){return(f=s()?Reflect.construct:function(t,e,n){var r=[null];r.push.apply(r,e);var i=new(Function.bind.apply(t,r));return n&&l(i,n.prototype),i}).apply(null,arguments)}function c(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}function h(t,e,n){return(h="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,n){var r=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=a(t)););return t}(t,e);if(r){var i=Object.getOwnPropertyDescriptor(r,e);return i.get?i.get.call(n):i.value}})(t,e,n||t)}function v(t){return function(t){if(Array.isArray(t))return d(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(!t)return;if("string"==typeof t)return d(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return d(t,e)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}Number.isInteger||(Number.isInteger=function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t}),Number.EPSILON||(Number.EPSILON=2220446049250313e-31);var y=g(Math.pow(10,-6));function g(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:6;if(Number.isInteger(t))return t;var n=Math.pow(10,e);return Math.round((+t+Number.EPSILON)*n)/n}function p(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:y;return Math.abs(t-e)<n}var m=Math.PI/180;function b(t){return t}function w(t,e,n){var r=1-n;return 3*n*r*(t*r+e*n)+n*n*n}function k(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1;return t<0||t>1||n<0||n>1?null:p(t,e)&&p(n,r)?b:function(i){if(i<=0)return t>0?i*e/t:0===e&&n>0?i*r/n:0;if(i>=1)return n<1?1+(i-1)*(r-1)/(n-1):1===n&&t<1?1+(i-1)*(e-1)/(t-1):1;for(var o,u=0,a=1;u<a;){var l=w(t,n,o=(u+a)/2);if(p(i,l))break;l<i?u=o:a=o}return w(e,r,o)}}function _(){return 1}function A(t){return 1===t?1:0}function x(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;if(1===t){if(0===e)return A;if(1===e)return _}var n=1/t;return function(t){return t>=1?1:(t+=e*n)-t%n}}var O=Math.sin,S=Math.cos,E=Math.acos,P=Math.asin,j=Math.tan,M=Math.atan2,B=Math.PI/180,I=180/Math.PI,T=Math.sqrt,N=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,u=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,a=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;r(this,t),this.m=[e,n,i,o,u,a],this.i=null,this.w=null,this.s=null}return o(t,[{key:"determinant",get:function(){var t=this.m;return t[0]*t[3]-t[1]*t[2]}},{key:"isIdentity",get:function(){if(null===this.i){var t=this.m;this.i=1===t[0]&&0===t[1]&&0===t[2]&&1===t[3]&&0===t[4]&&0===t[5]}return this.i}},{key:"point",value:function(t,e){var n=this.m;return{x:n[0]*t+n[2]*e+n[4],y:n[1]*t+n[3]*e+n[5]}}},{key:"translateSelf",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;if(!t&&!e)return this;var n=this.m;return n[4]+=n[0]*t+n[2]*e,n[5]+=n[1]*t+n[3]*e,this.w=this.s=this.i=null,this}},{key:"rotateSelf",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;if(t%=360){var e=O(t*=B),n=S(t),r=this.m,i=r[0],o=r[1];r[0]=i*n+r[2]*e,r[1]=o*n+r[3]*e,r[2]=r[2]*n-i*e,r[3]=r[3]*n-o*e,this.w=this.s=this.i=null}return this}},{key:"scaleSelf",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;if(1!==t||1!==e){var n=this.m;n[0]*=t,n[1]*=t,n[2]*=e,n[3]*=e,this.w=this.s=this.i=null}return this}},{key:"skewSelf",value:function(t,e){if(e%=360,(t%=360)||e){var n=this.m,r=n[0],i=n[1],o=n[2],u=n[3];t&&(t=j(t*B),n[2]+=r*t,n[3]+=i*t),e&&(e=j(e*B),n[0]+=o*e,n[1]+=u*e),this.w=this.s=this.i=null}return this}},{key:"resetSelf",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,u=this.m;return u[0]=t,u[1]=e,u[2]=n,u[3]=r,u[4]=i,u[5]=o,this.w=this.s=this.i=null,this}},{key:"recomposeSelf",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:null;return this.isIdentity||this.resetSelf(),t&&(t.x||t.y)&&this.translateSelf(t.x,t.y),e&&this.rotateSelf(e),n&&(n.x&&this.skewSelf(n.x,0),n.y&&this.skewSelf(0,n.y)),!r||1===r.x&&1===r.y||this.scaleSelf(r.x,r.y),i&&(i.x||i.y)&&this.translateSelf(i.x,i.y),this}},{key:"decompose",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=this.m,r=n[0]*n[0]+n[1]*n[1],i=[[n[0],n[1]],[n[2],n[3]]],o=T(r);if(0===o)return{origin:{x:g(n[4]),y:g(n[5])},translate:{x:g(t),y:g(e)},scale:{x:0,y:0},skew:{x:0,y:0},rotate:0};i[0][0]/=o,i[0][1]/=o;var u=n[0]*n[3]-n[1]*n[2]<0;u&&(o=-o);var a=i[0][0]*i[1][0]+i[0][1]*i[1][1];i[1][0]-=i[0][0]*a,i[1][1]-=i[0][1]*a;var l=T(i[1][0]*i[1][0]+i[1][1]*i[1][1]);if(0===l)return{origin:{x:g(n[4]),y:g(n[5])},translate:{x:g(t),y:g(e)},scale:{x:g(o),y:0},skew:{x:0,y:0},rotate:0};i[1][0]/=l,i[1][1]/=l,a/=l;var s=0;return i[1][1]<0?(s=E(i[1][1])*I,i[0][1]<0&&(s=360-s)):s=P(i[0][1])*I,u&&(s=-s),a=M(a,T(i[0][0]*i[0][0]+i[0][1]*i[0][1]))*I,u&&(a=-a),{origin:{x:g(n[4]),y:g(n[5])},translate:{x:g(t),y:g(e)},scale:{x:g(o),y:g(l)},skew:{x:g(a),y:0},rotate:g(s)}}},{key:"clone",value:function(){var t=this.m;return new this.constructor(t[0],t[1],t[2],t[3],t[4],t[5])}},{key:"toString",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:" ";if(null===this.s){var e=this.m.map((function(t){return g(t)}));1===e[0]&&0===e[1]&&0===e[2]&&1===e[3]?this.s="translate("+e[4]+t+e[5]+")":this.s="matrix("+e.join(t)+")"}return this.s}}],[{key:"create",value:function(t){return t?Array.isArray(t)?f(this,v(t)):t instanceof this?t.clone():(new this).recomposeSelf(t.origin,t.rotate,t.skew,t.scale,t.translate):new this}}]),t}();function R(t,e,n){return t>=.5?n:e}function F(t,e,n){return 0===t||e===n?e:t*(n-e)+e}function C(t,e,n){var r=F(t,e,n);return r<=0?0:r}function D(t,e,n){var r=F(t,e,n);return r<=0?0:r>=1?1:r}function L(t,e,n){return 0===t?e:1===t?n:{x:F(t,e.x,n.x),y:F(t,e.y,n.y)}}function V(t,e,n){return 0===t?e:1===t?n:{x:C(t,e.x,n.x),y:C(t,e.y,n.y)}}function q(t,e,n){var r=function(t,e,n){return Math.round(F(t,e,n))}(t,e,n);return r<=0?0:r>=255?255:r}function G(t,e,n){return 0===t?e:1===t?n:{r:q(t,e.r,n.r),g:q(t,e.g,n.g),b:q(t,e.b,n.b),a:F(t,null==e.a?1:e.a,null==n.a?1:n.a)}}function z(t,e,n){var r=e.length;if(r!==n.length)return R(t,e,n);for(var i=new Array(r),o=0;o<r;o++)i[o]=F(t,e[o],n[o]);return i}function Y(t,e){for(var n=[],r=0;r<t;r++)n.push(e);return n}function U(t,e){if(--e<=0)return t;var n=(t=Object.assign([],t)).length;do{for(var r=0;r<n;r++)t.push(t[r])}while(--e>0);return t}var W,$=function(){function t(e){r(this,t),this.list=e,this.length=e.length}return o(t,[{key:"setAttribute",value:function(t,e){for(var n=this.list,r=0;r<this.length;r++)n[r].setAttribute(t,e)}},{key:"removeAttribute",value:function(t){for(var e=this.list,n=0;n<this.length;n++)e[n].removeAttribute(t)}},{key:"style",value:function(t,e){for(var n=this.list,r=0;r<this.length;r++)n[r].style[t]=e}}]),t}(),H=/-./g,Q=function(t,e){return e.toUpperCase()};function X(t){return"function"==typeof t?t:R}function J(t){return t?"function"==typeof t?t:Array.isArray(t)?function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:b;if(!Array.isArray(t))return e;switch(t.length){case 1:return x(t[0])||e;case 2:return x(t[0],t[1])||e;case 4:return k(t[0],t[1],t[2],t[3])||e}return e}(t,null):function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:b;switch(t){case"linear":return b;case"steps":return x(e.steps||1,e.jump||0)||n;case"bezier":case"cubic-bezier":return k(e.x1||0,e.y1||0,e.x2||0,e.y2||0)||n}return n}(t.type,t.value,null):null}function K(t,e,n){var r=arguments.length>3&&void 0!==arguments[3]&&arguments[3],i=e.length-1;if(t<=e[0].t)return r?[0,0,e[0].v]:e[0].v;if(t>=e[i].t)return r?[i,1,e[i].v]:e[i].v;var o,u=e[0],a=null;for(o=1;o<=i;o++){if(!(t>e[o].t)){a=e[o];break}u=e[o]}return null==a?r?[i,1,e[i].v]:e[i].v:u.t===a.t?r?[o,1,a.v]:a.v:(t=(t-u.t)/(a.t-u.t),u.e&&(t=u.e(t)),r?[o,t,n(t,u.v,a.v)]:n(t,u.v,a.v))}function Z(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;return t&&t.length?"function"!=typeof e?null:("function"!=typeof n&&(n=null),function(r){var i=K(r,t,e);return null!=i&&n&&(i=n(i)),i}):null}function tt(t,e){return t.t-e.t}function et(t,e,r,i,o){var u,a="@"===r[0],l="#"===r[0],s=W[r],f=R;switch(a?(u=r.substr(1),r=u.replace(H,Q)):l&&(r=r.substr(1)),n(s)){case"function":if(f=s(i,o,K,J,r,a,e,t),l)return f;break;case"string":f=Z(i,X(s));break;case"object":if((f=Z(i,X(s.i),s.f))&&"function"==typeof s.u)return s.u(e,f,r,a,t)}return f?function(t,e,n){if(arguments.length>3&&void 0!==arguments[3]&&arguments[3])return t instanceof $?function(r){return t.style(e,n(r))}:function(r){return t.style[e]=n(r)};if(Array.isArray(e)){var r=e.length;return function(i){var o=n(i);if(null==o)for(var u=0;u<r;u++)t[u].removeAttribute(e);else for(var a=0;a<r;a++)t[a].setAttribute(e,o)}}return function(r){var i=n(r);null==i?t.removeAttribute(e):t.setAttribute(e,i)}}(e,r,f,a):null}function nt(t,e,r,i){if(!i||"object"!==n(i))return null;var o=null,u=null;return Array.isArray(i)?u=function(t){if(!t||!t.length)return null;for(var e=0;e<t.length;e++)t[e].e&&(t[e].e=J(t[e].e));return t.sort(tt)}(i):(u=i.keys,o=i.data||null),u?et(t,e,r,u,o):null}function rt(t,e,n){if(!n)return null;var r=[];for(var i in n)if(n.hasOwnProperty(i)){var o=nt(t,e,i,n[i]);o&&r.push(o)}return r.length?r:null}function it(t,e){if(!e.settings.duration||e.settings.duration<0)return null;var n,r,i,o,u,a=function(t,e){if(!e)return null;var n=[];if(Array.isArray(e))for(var r=e.length,i=0;i<r;i++){var o=e[i];if(2===o.length){var u=null;if("string"==typeof o[0])u=t.getElementById(o[0]);else if(Array.isArray(o[0])){u=[];for(var a=0;a<o[0].length;a++)if("string"==typeof o[0][a]){var l=t.getElementById(o[0][a]);l&&u.push(l)}u=u.length?1===u.length?u[0]:new $(u):null}if(u){var s=rt(t,u,o[1]);s&&(n=n.concat(s))}}}else for(var f in e)if(e.hasOwnProperty(f)){var c=t.getElementById(f);if(c){var h=rt(t,c,e[f]);h&&(n=n.concat(h))}}return n.length?n:null}(t,e.elements);return a?(n=a,r=e.settings,i=r.duration,o=n.length,u=null,function(t,e){var a=r.iterations||1/0,l=(r.alternate&&a%2==0)^r.direction>0?i:0,s=t%i,f=1+(t-s)/i;e*=r.direction,r.alternate&&f%2==0&&(e=-e);var c=!1;if(f>a)s=l,c=!0,-1===r.fill&&(s=r.direction>0?0:i);else if(e<0&&(s=i-s),s===u)return!1;u=s;for(var h=0;h<o;h++)n[h](s);return c}):null}function ot(t,e){if(W=e,!t||!t.root||!Array.isArray(t.animations))return null;var n=function(t){for(var e=document.getElementsByTagName("svg"),n=0;n<e.length;n++)if(e[n].id===t.root&&!e[n].svgatorAnimation)return e[n].svgatorAnimation=!0,e[n];return null}(t);if(!n)return null;var r=t.animations.map((function(t){return it(n,t)})).filter((function(t){return!!t}));return r.length?{svg:n,animations:r,animationSettings:t.animationSettings,options:t.options||void 0}:null}function ut(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Number,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"undefined"!=typeof BigInt&&BigInt,i="0x"+(t.replace(/[^0-9a-fA-F]+/g,"")||27);return e&&r&&n.isSafeInteger&&!n.isSafeInteger(+i)?n(r(i))%e+e:+i}function at(t,e,n){return!t||!n||e>t.length?t:t.substring(0,e)+at(t.substring(e+1),n,n)}function lt(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:27;return!t||t%e?t%e:[0,1].includes(e)?e:lt(t/e,e)}function st(t,e,n){if(t&&t.length){var r=ut(n),i=lt(r)+5,o=at(t,lt(r,5),i);return o=o.replace(/\x7c$/g,"==").replace(/\x2f$/g,"="),o=function(t,e,n){var r=+("0x"+t.substring(0,4));t=t.substring(4);for(var i=ut(e,r)%r+n%27,o=[],u=0;u<t.length;u+=2)if("|"!==t[u]){var a=+("0x"+t[u]+t[u+1])-i;o.push(a)}else{var l=+("0x"+t.substring(u+1,u+1+4))-i;u+=3,o.push(l)}return String.fromCharCode.apply(String,o)}(o=(o=atob(o)).replace(/[\x41-\x5A]/g,""),e,r),o=JSON.parse(o)}}var ft=[{key:"alternate",def:!1},{key:"fill",def:1},{key:"iterations",def:0},{key:"direction",def:1},{key:"speed",def:1},{key:"fps",def:100}],ct=function(){function t(e,n){var i=this,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;r(this,t),this._id=0,this._running=!1,this._rollingBack=!1,this._animations=e,this._settings=n,(!o||o<"2022-05-02")&&delete this._settings.speed,ft.forEach((function(t){i._settings[t.key]=i._settings[t.key]||t.def})),this.duration=n.duration,this.offset=n.offset||0,this.rollbackStartOffset=0}return o(t,[{key:"alternate",get:function(){return this._settings.alternate}},{key:"fill",get:function(){return this._settings.fill}},{key:"iterations",get:function(){return this._settings.iterations}},{key:"direction",get:function(){return this._settings.direction}},{key:"speed",get:function(){return this._settings.speed}},{key:"fps",get:function(){return this._settings.fps}},{key:"maxFiniteDuration",get:function(){return this.iterations>0?this.iterations*this.duration:this.duration}},{key:"_apply",value:function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=this._animations,r=n.length,i=0,o=0;o<r;o++)e[o]?i++:(e[o]=n[o](t,1),e[o]&&i++);return i}},{key:"_rollback",value:function(t){var e=this,n=1/0,r=null;this.rollbackStartOffset=t,this._rollingBack=!0,this._running=!0;this._id=window.requestAnimationFrame((function i(o){if(e._rollingBack){null==r&&(r=o);var u=Math.round(t-(o-r)*e.speed);if(u>e.duration&&n!==1/0){var a=!!e.alternate&&u/e.duration%2>1,l=u%e.duration;u=(l+=a?e.duration:0)||e.duration}var s=(e.fps?1e3/e.fps:0)*e.speed,f=Math.max(0,u);f<=n-s&&(e.offset=f,n=f,e._apply(f));var c=e.iterations>0&&-1===e.fill&&u>=e.maxFiniteDuration;(u<=0||e.offset<u||c)&&e.stop(),e._id=window.requestAnimationFrame(i)}}))}},{key:"_start",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,n=-1/0,r=null,i={};this._running=!0;var o=function o(u){null==r&&(r=u);var a=Math.round((u-r)*t.speed+e),l=(t.fps?1e3/t.fps:0)*t.speed;if(a>=n+l&&!t._rollingBack&&(t.offset=a,n=a,t._apply(a,i)===t._animations.length))return void t.pause(!0);t._id=window.requestAnimationFrame(o)};this._id=window.requestAnimationFrame(o)}},{key:"_pause",value:function(){this._id&&window.cancelAnimationFrame(this._id),this._running=!1}},{key:"play",value:function(){if(!this._running)return this._rollingBack?this._rollback(this.offset):this._start(this.offset)}},{key:"stop",value:function(){this._pause(),this.offset=0,this.rollbackStartOffset=0,this._rollingBack=!1,this._apply(0)}},{key:"reachedToEnd",value:function(){return this.iterations>0&&this.offset>=this.iterations*this.duration}},{key:"restart",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.stop(t),this.play(t)}},{key:"pause",value:function(){this._pause()}},{key:"reverse",value:function(){this.direction=-this.direction}}],[{key:"build",value:function(t,e){delete t.animationSettings,t.options=st(t.options,t.root,"91c80d77"),t.animations.map((function(e){e.settings=st(e.s,t.root,"91c80d77"),delete e.s,t.animationSettings||(t.animationSettings=e.settings)}));var n=t.version;if(!(t=ot(t,e)))return null;var r=t.options||{},i=new this(t.animations,t.animationSettings,n);return{el:t.svg,options:r,player:i}}},{key:"push",value:function(t){return this.build(t)}},{key:"init",value:function(){var t=this,e=window.__SVGATOR_PLAYER__&&window.__SVGATOR_PLAYER__["91c80d77"];Array.isArray(e)&&e.splice(0).forEach((function(e){return t.build(e)}))}}]),t}();!function(){for(var t=0,e=["ms","moz","webkit","o"],n=0;n<e.length&&!window.requestAnimationFrame;++n)window.requestAnimationFrame=window[e[n]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e[n]+"CancelAnimationFrame"]||window[e[n]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(e){var n=Date.now(),r=Math.max(0,16-(n-t)),i=window.setTimeout((function(){e(n+r)}),r);return t=n+r,i},window.cancelAnimationFrame=window.clearTimeout)}();var ht=function(){function t(e,n,i){r(this,t);var o=function(t){var e,n,r,i=t&&1===(null===(e=t.ownerDocument)||void 0===e||null===(n=e.childNodes)||void 0===n?void 0:n.length)&&window.parent!==window,o={el:t,window:window};if(!i)return o;try{r=window.parent.document}catch(t){return o}return o.window=window.parent,o.el=Array.from(r.querySelectorAll("iframe,object")).filter((function(t){return t.contentWindow===window}))[0]||o.el,o}(e);n=Math.max(1,n||1),n=Math.min(n,100),this.el=o.el,this._handlers=[],this.onThresholdChange=i&&i.call?i:function(){},this.thresholdPercent=n||1,this.currentVisibility=null,this.visibilityCalculator=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:n,r=!1,i=null,o=function(){for(var o=0,u=n.innerHeight,a=0,l=n.innerWidth,s=t.parentNode;s instanceof Element;){var f=n.getComputedStyle(s);if("visible"!==f.overflowY||"visible"!==f.overflowX){var c=s.getBoundingClientRect();"visible"!==f.overflowY&&(o=Math.max(o,c.top),u=Math.min(u,c.bottom)),"visible"!==f.overflowX&&(a=Math.max(a,c.left),l=Math.min(l,c.right))}if(s===s.parentNode)break;s=s.parentNode}r=!1;var h=t.getBoundingClientRect(),v=Math.min(h.height,Math.max(0,o-h.top)),d=Math.min(h.height,Math.max(0,h.bottom-u)),y=Math.min(h.width,Math.max(0,a-h.left)),g=Math.min(h.width,Math.max(0,h.right-l)),p=(h.height-v-d)/h.height,m=(h.width-y-g)/h.width,b=Math.round(p*m*100);null!==i&&i===b||(i=b,e(b))};return function(t){r&&clearTimeout(r),r=setTimeout((function(){return o()}),100)}}(this.el,this.onVisibilityUpdate.bind(this),o.window),this.bindScrollWatchers(),this.visibilityCalculator()}return o(t,[{key:"bindScrollWatchers",value:function(){for(var t=this.el.parentNode;t&&(this._handlers.push({element:t,event:"scroll",handler:this.visibilityCalculator}),t.addEventListener("scroll",this.visibilityCalculator),t!==t.parentNode&&t!==document);)t=t.parentNode}},{key:"onVisibilityUpdate",value:function(t){var e=this.currentVisibility>=this.thresholdPercent,n=t>=this.thresholdPercent;if(null===this.currentVisibility||e!==n)return this.currentVisibility=t,void this.onThresholdChange(n);this.currentVisibility=t}},{key:"destruct",value:function(){this._handlers.forEach((function(t){t.element.removeEventListener(t.event,t.handler)}))}}]),t}();function vt(t){return g(t)+""}function dt(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:" ";return t&&t.length?t.map(vt).join(e):""}function yt(t){return vt(t.x)+","+vt(t.y)}function gt(t){if(!t)return"transparent";if(null==t.a||t.a>=1){var e=function(t){return 1===(t=parseInt(t).toString(16)).length?"0"+t:t},n=function(t){return t.charAt(0)===t.charAt(1)},r=e(t.r),i=e(t.g),o=e(t.b);return n(r)&&n(i)&&n(o)&&(r=r.charAt(0),i=i.charAt(0),o=o.charAt(0)),"#"+r+i+o}return"rgba("+t.r+","+t.g+","+t.b+","+t.a+")"}function pt(t){return t?"url(#"+t+")":"none"}var mt={f:null,i:V,u:function(t,e){return function(n){var r=e(n);t.setAttribute("rx",vt(r.x)),t.setAttribute("ry",vt(r.y))}}},bt={f:null,i:function(t,e,n){return 0===t?e:1===t?n:{width:C(t,e.width,n.width),height:C(t,e.height,n.height)}},u:function(t,e){return function(n){var r=e(n);t.setAttribute("width",vt(r.width)),t.setAttribute("height",vt(r.height))}}};Object.freeze({M:2,L:2,Z:0,H:1,V:1,C:6,Q:4,T:2,S:4,A:7});var wt={},kt=null;function _t(t){var e=function(){if(kt)return kt;if("object"!==("undefined"==typeof document?"undefined":n(document))||!document.createElementNS)return{};var t=document.createElementNS("http://www.w3.org/2000/svg","svg");return t&&t.style?(t.style.position="absolute",t.style.opacity="0.01",t.style.zIndex="-9999",t.style.left="-9999px",t.style.width="1px",t.style.height="1px",kt={svg:t}):{}}().svg;if(!e)return function(t){return null};var r=document.createElementNS(e.namespaceURI,"path");r.setAttributeNS(null,"d",t),r.setAttributeNS(null,"fill","none"),r.setAttributeNS(null,"stroke","none"),e.appendChild(r);var i=r.getTotalLength();return function(t){var e=r.getPointAtLength(i*t);return{x:e.x,y:e.y}}}function At(t){return wt[t]?wt[t]:wt[t]=_t(t)}function xt(t,e,n,r){if(!t||!r)return!1;var i=["M",t.x,t.y];if(e&&n&&(i.push("C"),i.push(e.x),i.push(e.y),i.push(n.x),i.push(n.y)),e?!n:n){var o=e||n;i.push("Q"),i.push(o.x),i.push(o.y)}return e||n||i.push("L"),i.push(r.x),i.push(r.y),i.join(" ")}function Ot(t,e,n,r){var i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,o=xt(t,e,n,r),u=At(o);try{return u(i)}catch(t){return null}}function St(t,e,n){return t+(e-t)*n}function Et(t,e,n){var r=arguments.length>3&&void 0!==arguments[3]&&arguments[3],i={x:St(t.x,e.x,n),y:St(t.y,e.y,n)};return r&&(i.a=Pt(t,e)),i}function Pt(t,e){return Math.atan2(e.y-t.y,e.x-t.x)}function jt(t,e,n,r){var i=1-r;return i*i*t+2*i*r*e+r*r*n}function Mt(t,e,n,r){return 2*(1-r)*(e-t)+2*r*(n-e)}function Bt(t,e,n,r){var i=arguments.length>4&&void 0!==arguments[4]&&arguments[4],o=Ot(t,e,null,n,r);return o||(o={x:jt(t.x,e.x,n.x,r),y:jt(t.y,e.y,n.y,r)}),i&&(o.a=It(t,e,n,r)),o}function It(t,e,n,r){return Math.atan2(Mt(t.y,e.y,n.y,r),Mt(t.x,e.x,n.x,r))}function Tt(t,e,n,r,i){var o=i*i;return i*o*(r-t+3*(e-n))+3*o*(t+n-2*e)+3*i*(e-t)+t}function Nt(t,e,n,r,i){var o=1-i;return 3*(o*o*(e-t)+2*o*i*(n-e)+i*i*(r-n))}function Rt(t,e,n,r,i){var o=arguments.length>5&&void 0!==arguments[5]&&arguments[5],u=Ot(t,e,n,r,i);return u||(u={x:Tt(t.x,e.x,n.x,r.x,i),y:Tt(t.y,e.y,n.y,r.y,i)}),o&&(u.a=Ft(t,e,n,r,i)),u}function Ft(t,e,n,r,i){return Math.atan2(Nt(t.y,e.y,n.y,r.y,i),Nt(t.x,e.x,n.x,r.x,i))}function Ct(t,e,n){var r=arguments.length>3&&void 0!==arguments[3]&&arguments[3];if(Lt(e)){if(Vt(n))return Bt(e,n.start,n,t,r)}else if(Lt(n)){if(qt(e))return Bt(e,e.end,n,t,r)}else{if(qt(e))return Vt(n)?Rt(e,e.end,n.start,n,t,r):Bt(e,e.end,n,t,r);if(Vt(n))return Bt(e,n.start,n,t,r)}return Et(e,n,t,r)}function Dt(t,e,n){var r=Ct(t,e,n,!0);return r.a=function(t){return arguments.length>1&&void 0!==arguments[1]&&arguments[1]?t+Math.PI:t}(r.a)/m,r}function Lt(t){return!t.type||"corner"===t.type}function Vt(t){return null!=t.start&&!Lt(t)}function qt(t){return null!=t.end&&!Lt(t)}var Gt=new N;var zt={f:function(t){return t?t.join(" "):""},i:function(t,e,r){if(0===t)return e;if(1===t)return r;var i=e.length;if(i!==r.length)return R(t,e,r);for(var o,u=new Array(i),a=0;a<i;a++){if((o=n(e[a]))!==n(r[a]))return R(t,e,r);if("number"===o)u[a]=F(t,e[a],r[a]);else{if(e[a]!==r[a])return R(t,e,r);u[a]=e[a]}}return u}},Yt={f:null,i:z,u:function(t,e){return function(n){var r=e(n);t.setAttribute("x1",vt(r[0])),t.setAttribute("y1",vt(r[1])),t.setAttribute("x2",vt(r[2])),t.setAttribute("y2",vt(r[3]))}}},Ut={f:vt,i:F},Wt={f:vt,i:D},$t={f:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:" ";return t&&t.length>0&&(t=t.map((function(t){return g(t,4)}))),dt(t,e)},i:function(t,e,n){var r,i,o,u=e.length,a=n.length;if(u!==a)if(0===u)e=Y(u=a,0);else if(0===a)a=u,n=Y(u,0);else{var l=(o=(r=u)*(i=a)/function(t,e){for(var n;e;)n=e,e=t%e,t=n;return t||1}(r,i))<0?-o:o;e=U(e,Math.floor(l/u)),n=U(n,Math.floor(l/a)),u=a=l}for(var s=[],f=0;f<u;f++)s.push(g(C(t,e[f],n[f])));return s}};function Ht(t,e,n){return t.map((function(t){return function(t,e,n){var r=t.v;if(!r||"g"!==r.t||r.s||!r.v||!r.r)return t;var i=n.getElementById(r.r),o=i&&i.querySelectorAll("stop")||[];return r.s=r.v.map((function(t,e){var n=o[e]&&o[e].getAttribute("offset");return{c:t,o:n=g(parseInt(n)/100)}})),delete r.v,t}(t,0,n)}))}var Qt={gt:"gradientTransform",c:{x:"cx",y:"cy"},rd:"r",f:{x:"x1",y:"y1"},to:{x:"x2",y:"y2"}};function Xt(t,e,r,i,o,u,a,l){return Ht(t,0,l),e=function(t,e,n){for(var r,i,o,u=t.length-1,a={},l=0;l<=u;l++)(r=t[l]).e&&(r.e=e(r.e)),r.v&&"g"===(i=r.v).t&&i.r&&(o=n.getElementById(i.r))&&(a[i.r]={e:o,s:o.querySelectorAll("stop")});return a}(t,i,l),function(i){var o=r(i,t,Jt);if(!o)return"none";if("c"===o.t)return gt(o.v);if("g"===o.t){if(!e[o.r])return pt(o.r);var u=e[o.r];return function(t,e){for(var n=t.s,r=n.length;r<e.length;r++){var i=n[n.length-1].cloneNode();i.id=te(i.id),t.e.appendChild(i),n=t.s=t.e.querySelectorAll("stop")}for(var o=0,u=n.length,a=e.length-1;o<u;o++)n[o].setAttribute("stop-color",gt(e[Math.min(o,a)].c)),n[o].setAttribute("offset",e[Math.min(o,a)].o)}(u,o.s),Object.keys(Qt).forEach((function(t){if(void 0!==o[t])if("object"!==n(Qt[t])){var e,r="gt"===t?(e=o[t],Array.isArray(e)?"matrix("+e.join(" ")+")":""):o[t],i=Qt[t];u.e.setAttribute(i,r)}else Object.keys(Qt[t]).forEach((function(e){if(void 0!==o[t][e]){var n=o[t][e],r=Qt[t][e];u.e.setAttribute(r,n)}}))})),pt(o.r)}return"none"}}function Jt(t,n,r){if(0===t)return n;if(1===t)return r;if(n&&r){var i=n.t;if(i===r.t)switch(n.t){case"c":return{t:i,v:G(t,n.v,r.v)};case"g":if(n.r===r.r){var o={t:i,s:Kt(t,n.s,r.s),r:n.r};return n.gt&&r.gt&&(o.gt=z(t,n.gt,r.gt)),n.c?(o.c=L(t,n.c,r.c),o.rd=C(t,n.rd,r.rd)):n.f&&(o.f=L(t,n.f,r.f),o.to=L(t,n.to,r.to)),o}}if("c"===n.t&&"g"===r.t||"c"===r.t&&"g"===n.t){var u="c"===n.t?n:r,a="g"===n.t?e({},n):e({},r),l=a.s.map((function(t){return{c:u.v,o:t.o}}));return a.s="c"===n.t?Kt(t,l,a.s):Kt(t,a.s,l),a}}return R(t,n,r)}function Kt(t,e,n){if(e.length===n.length)return e.map((function(e,r){return Zt(t,e,n[r])}));for(var r=Math.max(e.length,n.length),i=[],o=0;o<r;o++){var u=Zt(t,e[Math.min(o,e.length-1)],n[Math.min(o,n.length-1)]);i.push(u)}return i}function Zt(t,e,n){return{o:D(t,e.o,n.o||0),c:G(t,e.c,n.c||{})}}function te(t){return t.replace(/-fill-([0-9]+)$/,(function(t,e){return"-fill-"+(+e+1)}))}var ee={blur:V,brightness:C,contrast:C,"drop-shadow":function(t,e,n){return 0===t?e:1===t?n:{blur:V(t,e.blur,n.blur),offset:L(t,e.offset,n.offset),color:G(t,e.color,n.color)}},grayscale:C,"hue-rotate":F,invert:C,opacity:C,saturate:C,sepia:C};function ne(t,e,n){if(0===t)return e;if(1===t)return n;var r=e.length;if(r!==n.length)return R(t,e,n);for(var i,o=[],u=0;u<r;u++){if(e[u].type!==n[u].type)return e;if(!(i=ee[e[u].type]))return R(t,e,n);o.push({type:e.type,value:i(t,e[u].value,n[u].value)})}return o}var re={blur:function(t){return t?function(e){t.setAttribute("stdDeviation",yt(e))}:null},brightness:function(t,e,n){return(t=oe(n,e))?function(e){e=vt(e),t.map((function(t){return t.setAttribute("slope",e)}))}:null},contrast:function(t,e,n){return(t=oe(n,e))?function(e){var n=vt((1-e)/2);e=vt(e),t.map((function(t){t.setAttribute("slope",e),t.setAttribute("intercept",n)}))}:null},"drop-shadow":function(t,e,n){var r=n.getElementById(e+"-blur");if(!r)return null;var i=n.getElementById(e+"-offset");if(!i)return null;var o=n.getElementById(e+"-flood");return o?function(t){r.setAttribute("stdDeviation",yt(t.blur)),i.setAttribute("dx",vt(t.offset.x)),i.setAttribute("dy",vt(t.offset.y)),o.setAttribute("flood-color",gt(t.color))}:null},grayscale:function(t){return t?function(e){t.setAttribute("values",dt(function(t){return[.2126+.7874*(t=1-t),.7152-.7152*t,.0722-.0722*t,0,0,.2126-.2126*t,.7152+.2848*t,.0722-.0722*t,0,0,.2126-.2126*t,.7152-.7152*t,.0722+.9278*t,0,0,0,0,0,1,0]}(e)))}:null},"hue-rotate":function(t){return t?function(e){return t.setAttribute("values",vt(e))}:null},invert:function(t,e,n){return(t=oe(n,e))?function(e){e=vt(e)+" "+vt(1-e),t.map((function(t){return t.setAttribute("tableValues",e)}))}:null},opacity:function(t,e,n){return(t=n.getElementById(e+"-A"))?function(e){return t.setAttribute("tableValues","0 "+vt(e))}:null},saturate:function(t){return t?function(e){return t.setAttribute("values",vt(e))}:null},sepia:function(t){return t?function(e){return t.setAttribute("values",dt(function(t){return[.393+.607*(t=1-t),.769-.769*t,.189-.189*t,0,0,.349-.349*t,.686+.314*t,.168-.168*t,0,0,.272-.272*t,.534-.534*t,.131+.869*t,0,0,0,0,0,1,0]}(e)))}:null}};var ie=["R","G","B"];function oe(t,e){var n=ie.map((function(n){return t.getElementById(e+"-"+n)||null}));return-1!==n.indexOf(null)?null:n}var ue={fill:Xt,"fill-opacity":Wt,stroke:Xt,"stroke-opacity":Wt,"stroke-width":Ut,"stroke-dashoffset":{f:vt,i:F},"stroke-dasharray":$t,opacity:Wt,transform:function(t,e,r,i){if(!(t=function(t,e){if(!t||"object"!==n(t))return null;var r=!1;for(var i in t)t.hasOwnProperty(i)&&(t[i]&&t[i].length?(t[i].forEach((function(t){t.e&&(t.e=e(t.e))})),r=!0):delete t[i]);return r?t:null}(t,i)))return null;var o=function(n,i,o){var u=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;return t[n]?r(i,t[n],o):e&&e[n]?e[n]:u};return e&&e.a&&t.o?function(e){var n=r(e,t.o,Dt);return Gt.recomposeSelf(n,o("r",e,F,0)+n.a,o("k",e,L),o("s",e,L),o("t",e,L)).toString()}:function(t){return Gt.recomposeSelf(o("o",t,Ct,null),o("r",t,F,0),o("k",t,L),o("s",t,L),o("t",t,L)).toString()}},"#filter":function(t,e,n,r,i,o,u,a){if(!e.items||!t||!t.length)return null;var l=function(t,e){var n=(t=t.map((function(t){return t&&re[t[0]]?(e.getElementById(t[1]),re[t[0]](e.getElementById(t[1]),t[1],e)):null}))).length;return function(e){for(var r=0;r<n;r++)t[r]&&t[r](e[r].value)}}(e.items,a);return l?(t=function(t,e){return t.map((function(t){return t.e=e(t.e),t}))}(t,r),function(e){l(n(e,t,ne))}):null},"#line":Yt,points:{f:dt,i:z},d:zt,r:Ut,"#size":bt,"#radius":mt,_:function(t,e){if(Array.isArray(t))for(var n=0;n<t.length;n++)this[t[n]]=e;else this[t]=e}},ae={currentTime:"offset",duration:"duration",hasEnded:function(){return this.reachedToEnd()},isAlternate:"alternate",isPlaying:"_running",isRollingBack:"_rollingBack",state:function(t,e){return e.isPlaying?e.isRollingBack?"rollback":"playing":e.hasEnded?"ended":"paused"},totalTime:"maxFiniteDuration",iterations:"iterations",direction:"direction",fill:"fill",isReversed:function(t,e){return-1===e.direction},isBackwards:function(t,e){return-1===e.fill},isInfinite:function(t,e){return 0===e.iterations},speed:"speed",fps:"fps"},le={destruct:"destruct",pause:"pause",play:function(t,e){return se(t,e.hasEnded?"restart":"play",e)},restart:"restart",reverse:function(t,e){return se(t,"reverse",e,[!0])},seek:"seek",seekBy:"seekBy",seekTo:"seekTo",stop:"stop",toggle:"toggle",togglePlay:"toggle",set:"set"};function se(t,e,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:[];return function(){var i,o=Array.prototype.slice.call(arguments);return o.unshift.apply(o,v(r)),(i=t[e]).call.apply(i,[t].concat(v(o))),n}}var fe=function t(e){r(this,t);var n={},i=["on","off"],o={get:function(t,e,r){return ae[e]?"function"==typeof ae[e]?ae[e].call(t,t,r):t[ae[e]]:le[e]?"function"==typeof le[e]?le[e].call(t,t,r):se(t,le[e],r):-1!==i.indexOf(e)?n[e]:"ready"===e?function(t){return t&&t.call(r,r),r}:void 0},set:function(t,e,r){return-1!==i.indexOf(e)&&(n[e]=r)},ownKeys:function(t){return Object.keys(ae)},has:function(t,e){return void 0!==ae[e]}};if("function"==typeof Proxy)return new Proxy(e,o);var u=Object.keys(ae).concat(Object.keys(le)).concat(i),a={};return u.forEach((function(t){var n={enumerable:!1,configurable:!1,get:function(){return o.get(e,t,a)}};-1!==i.indexOf(t)&&(n.set=function(n){return o.set(e,t,n)}),Object.defineProperty(a,t,n)})),a};function ce(t){t||(t=this);var e={};this.on=function(t,n){var r=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return"function"==typeof n&&(t.split(/[, ]+/g).forEach((function(t){return e[t]=e[t]||[],r?e[t].unshift(n):e[t].push(n)})),!0)},this.off=function(t,n){for(var r in e)if(e.hasOwnProperty(r)&&r.substr(0,t.length)===t)if(n)for(var i=0;i<e[r].length;i++)e[r][i]===n&&(e[r][i]=null);else e[r]=null},this.trigger=function(){var n,r=Array.prototype.slice.call(arguments),i=r[0],o=r.slice(1);t:for(var u in e)if(e.hasOwnProperty(u)&&e[u]&&(u===i||u.substr(0,i.length+1)===i+"."))for(var a=0;a<(e[u]||[]).length;a++)if(e[u][a]&&!1===(n=e[u][a].apply(t,o)))break t;return n}}var he=!0,ve=["iterations","speed","fps","direction","fill","alternate"],de=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&l(t,e)}(u,t);var e,n,i=(e=u,n=s(),function(){var t,r=a(e);if(n){var i=a(this).constructor;t=Reflect.construct(r,arguments,i)}else t=r.apply(this,arguments);return c(this,t)});function u(t,e){var n,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;return r(this,u),(n=i.call(this,t,e,o))._handlers=[],n}return o(u,[{key:"_adjustOffset",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.alternate?2*this.duration:this.duration;if(t){if(!this._rollingBack&&0===this.offset)return void(this.offset=e);this._rollingBack&&(this.offset,this.maxFiniteDuration)}!this._rollingBack||this.rollbackStartOffset<=this.duration?0!==this.iterations&&(this.offset=Math.min(this.offset,this.maxFiniteDuration)):(this.offset=this.rollbackStartOffset-(this.rollbackStartOffset-this.offset)%e,this.rollbackStartOffset=0)}},{key:"reverse",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(!this._running)return this._adjustOffset(t),this._rollingBack=!this._rollingBack,t&&this.play(!1),void this.trigger("reverse",this.offset);this.pause(!1,!1),this._adjustOffset(),this._rollingBack=!this._rollingBack,this.play(!1),this.trigger("reverse",this.offset)}},{key:"play",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:he,e=h(a(u.prototype),"play",this).call(this);return t===he&&this.trigger("play",this.offset),e}},{key:"pause",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:he,n=h(a(u.prototype),"pause",this).call(this);return e===he&&this.trigger(t?"end":"pause",this.offset),n}},{key:"restart",value:function(){var t=h(a(u.prototype),"restart",this).call(this,!1);return this.trigger("restart",this.offset),t}},{key:"stop",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:he,e=h(a(u.prototype),"stop",this).call(this);return t===he&&this.trigger("stop",this.offset),e}},{key:"_apply",value:function(t){var e=this,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:he,r=h(a(u.prototype),"_apply",this).call(this,t);if(n===he){var i=function(){return e.trigger("keyframe",t)};window.requestAnimationFrame(i)}return r}},{key:"seekTo",value:function(t){var e,n,r,i=this._running;i&&this.pause(!1,!1),this.offset=this.iterations>0?(e=t,n=0,r=this.maxFiniteDuration,e<n?n:e>r?r:e):Math.max(t,0),this._apply(this.offset),i&&this.play(!1)}},{key:"seek",value:function(t){return this.seekTo(Math.round(t/100*this.maxFiniteDuration))}},{key:"seekBy",value:function(t){return this.seekTo(this.offset+t)}},{key:"toggle",value:function(){return this._running?this.pause():this.reachedToEnd()?this.restart():this.play()}},{key:"set",value:function(t,e){if(ve.includes(t)){var n=this._running;n&&this.pause(!1,!1),this._settings[t]=e,n?this.play(!1):this._apply(this.offset,{},!1)}}},{key:"destruct",value:function(){var t=this;this.stop(),this._handlers.forEach((function(t){t.element?t.element.removeEventListener(t.event,t.handler):t.callback&&t.callback.call&&t.callback.call()}));var e=function(){},n=Object.getOwnPropertyNames(Object.getPrototypeOf(this));n.push.apply(n,v(Object.getOwnPropertyNames(this))),n.forEach((function(n){"function"==typeof t[n]?t[n]=e:delete t[n]}))}}],[{key:"build",value:function(t){var e=h(a(u),"build",this).call(this,t,ue);if(!e)return null;var n=e.el,r=e.options,i=e.player,o=new fe(i),l=new ce(o);o.on=l.on,o.off=l.off,i.trigger=l.trigger;var s=n.svgatorPlayer&&n.svgatorPlayer.ready&&n.svgatorPlayer.ready.call&&n.svgatorPlayer.ready.call();n.svgatorPlayer=o,function(t){var e,n,r=t&&1===(null===(e=t.ownerDocument)||void 0===e||null===(n=e.childNodes)||void 0===n?void 0:n.length)&&window.parent!==window,i=null==t?void 0:t.firstElementChild;if(!r||!i||"a"!==i.tagName||i.getAttribute("target"))return;i.setAttributeNS(null,"target","_parent")}(n),function(t,e,n){if("click"===n.start){var r=function(){switch(n.click){case"freeze":return!t._running&&t.reachedToEnd()?t.restart():t.toggle();case"restart":return t.offset>0?t.restart():t.play();case"reverse":return t._running?t.reverse():t.reachedToEnd()?1===t.fill?t.reverse(!0):t.restart():t.play();case"none":default:if(t._running)return;return t.reachedToEnd()?t.restart():t.play()}};return t._handlers.push({element:e,event:"click",handler:r}),void e.addEventListener("click",r)}if("hover"===n.start){var i=function(){return t.reachedToEnd()?t.restart():t._rollingBack?t.reverse():t.play()};t._handlers.push({element:e,event:"mouseenter",handler:i}),e.addEventListener("mouseenter",i);var o=function(){switch(n.hover){case"freeze":return t.pause();case"reset":return t.stop();case"reverse":if(t.reverse(),t._running)return;return t.play();case"none":default:return}};return t._handlers.push({element:e,event:"mouseleave",handler:o}),void e.addEventListener("mouseleave",o)}if("scroll"===n.start){var u=new ht(e,n.scroll||25,(function(e){e?t.reachedToEnd()?t.restart():t.play():t.pause()}));return void t._handlers.push({callback:function(){return u.destruct()}})}if("programmatic"===n.start)return;t.play()}(i,n,r),function(t,e,n){var r;"function"==typeof Event?r=new Event("ready"):(r=document.createEvent("Event")).initEvent("ready",!0,!0);if(t.dispatchEvent(r),!n||!n.length)return;n.forEach((function(t){return e.ready(t)}))}(n,n.svgatorPlayer,s)}}]),u}(ct);return de.init(),de}));
(function(s,i,o,w,d,a,b){(a=Array.from(d.querySelectorAll('svg#' + i.root)).filter(n=> !n.svgatorPlayer)[0]||{}).svgatorPlayer={ready:(function(a){b=[];return function(c){return c?(b.push(c),a.svgatorPlayer):b}})(a)};w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);})('91c80d77',{"root":"mouth-anims","version":"2022-05-04","animations":[{"elements":{"mouth-anims-u-tonsils":{"d":[{"t":320,"v":["M",94.698,56.114814,"C",94.698,55.91076,82.034309,67.451551,88.97214,82.143429,"C",95.909971,96.835307,107.757446,99.782343,119.592571,99.578289,"C",131.427696,99.374235,142.650658,86.518841,141.630389,72.439124,"C",140.61012,58.359407,132.039858,49.381037,126.530403,52.033737,"C",121.020948,54.686437,116.93987,61.420213,122.653379,68.562099,"C",128.366888,75.703985,120.612841,81.825601,115.715548,81.621547,"C",110.818255,81.417493,107.757447,76.112092,109.593932,69.17426,"C",111.430417,62.236428,114.491225,58.359405,109.185824,55.706704,"C",103.880423,53.054003,98.37097,53.258064,94.698,56.114814,"Z"],"e":[0.445,0.05,0.55,0.95]},{"t":390,"v":["M",95.788489,56.526488,"C",95.788489,56.322434,82.184121,67.970813,89.121952,82.662691,"C",96.059783,97.354569,107.248797,97.579176,119.083922,97.375122,"C",130.919047,97.171068,143.203305,87.595686,141.180874,73.835233,"C",139.158443,60.07478,132.042473,51.766583,125.301031,52.545476,"C",118.559589,53.324369,116.761868,58.690075,119.158828,67.77717,"C",121.555788,76.864265,116.715438,82.174397,111.818145,81.970343,"C",106.920852,81.766289,103.803319,73.056337,107.997995,69.161871,"C",112.192671,65.267405,111.967955,61.026764,108.297613,56.266856,"C",104.627271,51.506948,99.461459,53.669738,95.788489,56.526488,"Z"]},{"t":470,"v":["M",94.698,56.114814,"C",94.698,55.91076,82.034309,67.451551,88.97214,82.143429,"C",95.909971,96.835307,107.757446,99.782343,119.592571,99.578289,"C",131.427696,99.374235,142.650658,86.518841,141.630389,72.439124,"C",140.61012,58.359407,132.039858,49.381037,126.530403,52.033737,"C",121.020948,54.686437,116.93987,61.420213,122.653379,68.562099,"C",128.366888,75.703985,120.612841,81.825601,115.715548,81.621547,"C",110.818255,81.417493,107.757447,76.112092,109.593932,69.17426,"C",111.430417,62.236428,114.491225,58.359405,109.185824,55.706704,"C",103.880423,53.054003,98.37097,53.258064,94.698,56.114814,"Z"],"e":[0.445,0.05,0.55,0.95]}],"opacity":[{"t":190,"v":0},{"t":320,"v":1},{"t":470,"v":1},{"t":600,"v":0}]},"mouth-anims-u-tongue":{"transform":{"data":{"t":{"x":-150.612161,"y":-194.05864}},"keys":{"o":[{"t":0,"v":{"x":150.310618,"y":174.058648,"type":"corner"},"e":[0.235,0.015,0.175,1]},{"t":130,"v":{"x":150.310618,"y":170.058648,"type":"corner"},"e":[0.445,0,0.37,0.995]},{"t":320,"v":{"x":150.310618,"y":194.058648,"type":"corner"},"e":[0.579424,0.048508,0.823497,0.488664]},{"t":390,"v":{"x":150.310618,"y":193.069714,"type":"corner"},"e":[0.212459,0.452601,0.30254,1]},{"t":470,"v":{"x":150.310618,"y":194.058648,"type":"corner"},"e":[0.77,0,0.175,1]},{"t":800,"v":{"x":150.310618,"y":174.058648,"type":"corner"},"e":[0.235,0.015,0.175,1]}]}}},"mouth-anims-u-teeth":{"transform":{"data":{"t":{"x":-144.799465,"y":-93.147632}},"keys":{"o":[{"t":0,"v":{"x":144.799465,"y":75.147633,"type":"corner"},"e":[0.3122,0.01,0.215,1.0026]},{"t":110,"v":{"x":144.799465,"y":75.147633,"type":"corner"},"e":[0.3122,0.01,0,0.9976]},{"t":320,"v":{"x":144.799465,"y":67.147633,"type":"corner"},"e":[0.445,0.05,0.55,0.95]},{"t":470,"v":{"x":144.799465,"y":67.147633,"type":"corner"},"e":[0.641,0.0122,0.500344,1]},{"t":800,"v":{"x":144.799465,"y":75.147633,"type":"corner"},"e":[0.3122,0.01,0.215,1.0026]}]}}},"mouth-anims-u-mouth-shape":{"d":[{"t":0,"v":["M",69.666449,140.910982,"C",63.282033,141.16015,63.725218,147.091262,68.823343,146.812721,"C",83.138203,146.030615,150.839116,147.655826,175.289177,146.391168,"C",199.739238,145.12651,218.185119,146.197624,230.747191,145.549026,"C",236.545547,145.249648,237.37527,139.350612,231.150292,139.628387,"C",213.247768,140.427244,194.303521,138.713089,172.829705,140.055202,"C",152.595171,141.31986,122.465514,141.335647,108.683838,140.910982,"C",90.789965,140.359605,86.125909,140.26861,69.666449,140.910982,"Z"],"e":[0.455,0.03,0.195,0.98]},{"t":110,"v":["M",79.666449,140.910982,"C",73.279495,140.738672,73.725218,147.091262,78.823343,146.812721,"C",93.138203,146.030615,139.674467,143.578951,165.289177,144.391168,"C",190.903887,145.203385,208.185119,146.197624,220.747191,145.549026,"C",226.545547,145.249648,227.37527,139.350612,221.150292,139.628387,"C",203.247768,140.427244,184.48176,141.617555,162.966043,141.617555,"C",142.861735,141.617555,133.842829,141.70475,120.060508,142.107904,"C",102.521443,142.620948,97.013894,142.107265,79.666449,140.910982,"Z"],"e":[0.455,0.03,0.515,0.955]},{"t":320,"v":["M",40.831179,109.780982,"C",32.260917,122.432322,37.289776,155.489043,64.501428,179.975514,"C",91.71308,204.461985,124.085158,214.664672,165.712148,212.624133,"C",207.339138,210.583594,231.825602,188.545775,242.436403,177.118759,"C",253.047204,165.691743,272.636375,131.410692,248.966126,101.618827,"C",225.295877,71.826962,189.382396,90.87775,165.712148,101.618827,"C",154.433016,106.737068,135.811912,112.611811,107.760848,101.618827,"C",77.560875,89.783703,51.940456,88.965921,40.831179,109.780982,"Z"],"e":[0.435957,0.053304,0.726881,0.501169]},{"t":390,"v":["M",46.053656,112.469852,"C",38.680572,125.361376,38.552503,154.342341,65.764155,178.828812,"C",92.975807,203.315283,122.162523,211.39865,163.789513,209.358111,"C",205.416503,207.317572,229.708972,187.965023,240.319773,176.538007,"C",250.930574,165.110991,265.695543,132.475218,245.884909,105.137929,"C",226.074275,77.80064,190.437451,93.464769,165.992462,101.733373,"C",153.311905,105.862699,135.987578,110.940228,108.378371,101.332837,"C",77.761745,90.737969,54.928771,94.748829,46.053656,112.469852,"Z"],"e":[0.283317,0.44656,0.542684,0.952281]},{"t":470,"v":["M",40.831179,109.780982,"C",32.260917,122.432322,37.289776,155.489043,64.501428,179.975514,"C",91.71308,204.461985,124.085158,214.664672,165.712148,212.624133,"C",207.339138,210.583594,231.825602,188.545775,242.436403,177.118759,"C",253.047204,165.691743,272.636375,131.410692,248.966126,101.618827,"C",225.295877,71.826962,189.382396,90.87775,165.712148,101.618827,"C",154.433016,106.737068,135.811912,112.611811,107.760848,101.618827,"C",77.560875,89.783703,51.940456,88.965921,40.831179,109.780982,"Z"],"e":[0.645,0.045,0.355,1]},{"t":710,"v":["M",72.685288,140.910982,"C",66.300106,141.032913,66.744057,147.091262,71.842182,146.812721,"C",86.157042,146.030615,147.468688,146.425083,172.270338,145.7874,"C",197.071988,145.149717,215.16628,146.197624,227.728352,145.549026,"C",233.526708,145.249648,234.356431,139.350612,228.131453,139.628387,"C",210.228929,140.427244,191.33849,139.5899,169.852024,140.526851,"C",149.656803,141.409729,125.900142,141.447073,112.118271,141.272313,"C",94.331509,141.042268,89.412816,140.82367,72.685288,140.910982,"Z"],"e":[0.645,0.045,0.355,1]},{"t":800,"v":["M",69.666449,140.910982,"C",63.282033,141.16015,63.725218,147.091262,68.823343,146.812721,"C",83.138203,146.030615,150.839116,147.655826,175.289177,146.391168,"C",199.739238,145.12651,218.185119,146.197624,230.747191,145.549026,"C",236.545547,145.249648,237.37527,139.350612,231.150292,139.628387,"C",213.247768,140.427244,194.303521,138.713089,172.829705,140.055202,"C",152.595171,141.31986,122.465514,141.335647,108.683838,140.910982,"C",90.789965,140.359605,86.125909,140.26861,69.666449,140.910982,"Z"],"e":[0.455,0.03,0.195,0.98]}]},"mouth-anims-u-cheek-r":{"transform":{"data":{"t":{"x":-40.929178,"y":-69.636156}},"keys":{"o":[{"t":0,"v":{"x":40.929179,"y":68.81994,"type":"corner"}},{"t":110,"v":{"x":53.172411,"y":68.81994,"type":"corner"}},{"t":610,"v":{"x":38.172411,"y":68.81994,"type":"corner"},"e":[0.455,0.03,0.515,0.955]},{"t":710,"v":{"x":44.754396,"y":68.81994,"type":"corner"}},{"t":800,"v":{"x":40.929179,"y":68.81994,"type":"corner"}}],"s":[{"t":0,"v":{"x":1,"y":1}},{"t":110,"v":{"x":0.94298,"y":0.338956}},{"t":610,"v":{"x":0.94298,"y":0.338956}},{"t":710,"v":{"x":1,"y":1}}]}},"opacity":[{"t":0,"v":1,"e":[1,0]},{"t":110,"v":0},{"t":610,"v":0,"e":[1,1]},{"t":710,"v":1,"e":[1,1]}]},"mouth-anims-u-cheek-l":{"transform":{"data":{"r":-179.999999,"t":{"x":-40.929178,"y":-69.636156}},"keys":{"o":[{"t":0,"v":{"x":209.477676,"y":66.983455,"type":"corner"}},{"t":110,"v":{"x":196.826336,"y":66.983455,"type":"corner"}},{"t":610,"v":{"x":211.826336,"y":66.983455,"type":"corner"},"e":[0.455,0.03,0.515,0.955]},{"t":710,"v":{"x":204.444496,"y":66.983455,"type":"corner"}},{"t":800,"v":{"x":209.477676,"y":66.983455,"type":"corner"}}],"s":[{"t":0,"v":{"x":1,"y":1}},{"t":110,"v":{"x":0.867552,"y":0.313396}},{"t":610,"v":{"x":0.867552,"y":0.313396}},{"t":710,"v":{"x":1,"y":1}}]}},"opacity":[{"t":0,"v":1,"e":[1,0]},{"t":110,"v":0},{"t":610,"v":0,"e":[1,1]},{"t":710,"v":1,"e":[1,1]}]}},"s":"MDNA1Y0g4YjMyNQzQ4NTgyNzE4NNDc5N2Y3ZTMEyNGE0ODQwNDPAzYzMyNzQ3OXTgyNzU3Mzg0PNzk3ZjdlMzIN0YU80MTNjWTUMyNzk4NDc1WNDgyNzE4NDc5PN2Y3ZUk4MzMKyNGE0MTNjMzPI3Njc5N2M3YEzMyNGE0MUEzYYzMyVDcxN2MG4NDc1ODI3ZTXcxODQ3NTMyNUGE3NjcxN2M4VMzc1M2NJMzIC4MzgwNzU3NTDc0MzJUNGE0MBVEzYzMyTDc2KODA4MzMyNGEU0MTQwNDA4ZAE|"}],"options":"MDFAxODhiMzI4MXzg0NzE4Mjg0XMzJCNGFGMzIP4MDgyN2Y3NzAgyNzFEN2Q3ZADcxODQ3OTczRMzI4ZA|"},'__SVGATOR_PLAYER__',window,document)
]]></script>
</svg>









<svg id="incisor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 33 90.92" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" width="33" height="90.92"><defs><linearGradient id="incisor-s-path1-fill" x1="0.51801" y1="0.021575" x2="0.510284" y2="0.40836" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="incisor-s-path1-fill-0" offset="0%" stop-color="#fff"/><stop id="incisor-s-path1-fill-1" offset="62.8902%" stop-color="#fff"/><stop id="incisor-s-path1-fill-2" offset="100%" stop-color="#e1e1e1"/></linearGradient></defs><g id="incisor-u-incisor" transform="matrix(-.835921 0 0-.835927 189.581821 213.088897)"><path id="incisor-s-path1" d="M385.378256,123.500145q-3.025101-17.243073-3.630121-22.385744c-.60502-5.142671.605019-11.797893,5.14267-13.612953s14.822991-.907531,19.663152-1.512551s14.520482.30251,14.520482,4.840161s0,17.243073-1.815061,24.200804-3.932631,13.612953-5.142672,14.822993-2.722591,18.453113-3.630121,31.461045-6.352711,26.923393-7.260241,31.763554-5.142671-3.025101-6.050201-9.680322-2.11757-20.873194-5.142671-31.763556-2.585401-17.971092-3.956927-21.850358c-.671987-1.900669-2.093264-1.140399-2.698289-6.283073Z" transform="translate(-194.28049 60.337521)" fill="url(#incisor-s-path1-fill)" stroke-width="0.6"/></g></svg>


<svg id="canine" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 25.1 70.9" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" width="25.1" height="70.9"><defs><linearGradient id="canine-s-path1-fill" x1="0.503967" y1="0.01201" x2="0.479993" y2="0.600753" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="canine-s-path1-fill-0" offset="0%" stop-color="#fff"/><stop id="canine-s-path1-fill-1" offset="68%" stop-color="#fff"/><stop id="canine-s-path1-fill-2" offset="100%" stop-color="#e1e1e1"/></linearGradient></defs><g id="canine-u-canine-l" transform="matrix(-.616261 0 0-.616261 308.57355 122.56531)"><path id="canine-s-path1" d="M471.696518,89.639834c3.898281-3.282762,5.962481-7.217423,10.921653-5.278259s8.159404,6.919642,11.031822,8.971368s7.141754,5.350825,7.067988,8.744035-.221296,12.023764-1.401543,16.302158-3.420024,10.268084-4.231444,11.964689-1.208687,3.693207-.805791,6.244878s1.36447,12.561622-.047195,19.94572-1.891218,14.053242-2.667534,17.213955-1.330828,8.705823-2.273496,10.757514-2.755251,9.685259-5.064402,12.507556-4.105159,2.565724-5.259735-1.539435-6.414311-20.397509-7.825459-25.657244-2.180865-13.470052-2.565724-19.627791-.513145-15.779205-2.180866-20.525795-4.602904-13.47439-5.272922-16.638367-1.218218-4.978285-1.121396-8.173411s2.526548-6.044236,4.754946-8.615464s4.602626-4.878279,6.941098-6.596107Z" transform="translate(.000002 0)" fill="url(#canine-s-path1-fill)" stroke-width="0.6"/></g></svg>



<svg id="premolar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 29.92 56.8" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" width="29.92" height="56.8"><defs><linearGradient id="premolar-s-path1-fill" x1="0.486084" y1="0.032764" x2="0.480156" y2="0.649552" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="premolar-s-path1-fill-0" offset="0%" stop-color="#fff"/><stop id="premolar-s-path1-fill-1" offset="68%" stop-color="#fff"/><stop id="premolar-s-path1-fill-2" offset="100%" stop-color="#e1e1e1"/></linearGradient></defs><g id="premolar-u-premolar-l" transform="matrix(-.479981 0 0-.47998 287.030659 96.207654)"><path id="premolar-s-path1" d="M536.245449,93.686776c.656567-3.470422,2.626267-5.440121,4.689761-7.03464s4.314577-2.34488,7.503615-2.15729s4.033194.656565,6.284279,1.500722s2.344879,1.031746,4.87735-.937953s3.189035-2.626266,6.002892-2.907652s5.909098.937951,7.691207,2.251084s3.282832,2.438673,5.064941.75036s2.251084-3.095243,4.971145-3.751809s5.252531-.468977,7.785002,1.031747s6.284279,5.533917,6.753255,10.223677-.281386,15.194822-2.251085,21.385306-3.001446,9.942293-3.376627,12.849944-2.813856,29.264106-3.564218,35.923565-2.15729,25.418502-3.001447,29.3579-1.219338,7.222231-3.564218,7.222231-3.9394-3.282833-4.783556-6.47187-6.378073-24.85573-7.128435-28.607538-2.907652-6.190485-3.470423-4.31458-1.875904,10.880244-2.251085,14.725848-1.9697,15.007233-3.564218,18.946632-3.189036,5.721508-5.158736,5.346327-4.314579-1.688315-5.815303-8.347774-3.751808-22.510849-4.595965-29.54549-3.658014-24.011574-4.220785-28.607539-1.031747-6.378073-1.406928-8.066387-3.001447-9.285726-3.658013-15.101029-.468967-13.318904.187595-15.663792Z" transform="translate(.000005 1.046996)" fill="url(#premolar-s-path1-fill)" stroke-width="0.6"/></g></svg>



<svg id="molar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28.16 53.04" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" width="28.16" height="53.04"><defs><linearGradient id="molar-s-path2-fill" x1="0.498813" y1="0.031497" x2="0.528272" y2="0.619834" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="molar-s-path2-fill-0" offset="0%" stop-color="#fff"/><stop id="molar-s-path2-fill-1" offset="68.1718%" stop-color="#fff"/><stop id="molar-s-path2-fill-2" offset="100%" stop-color="#e1e1e1"/></linearGradient></defs><g id="molar-u-molar-l" transform="matrix(-.438023 0 0-.438026 306.529452 87.441696)"><path id="molar-s-path1" d="M660.872855,155.376282q3.110764,23.7882,4.940626,30.741674c1.829862,6.953474,2.876049,11.139501,4.929193,10.981567s3.711451-4.027319,4.580089-7.501871s1.974178-13.977172,2.605914-20.452472s4.81699-20.847308,1.816242-26.532937-14.608908-6.949103-17.688624-1.105539q-3.079716,5.843564-1.18344,13.869578Z" transform="translate(.000001 0)" fill="#ededed" stroke-width="0.6"/><path id="molar-s-path2" d="M640.10308,122.459014c-1.423845-4.857826-3.517736-8.459317-4.104025-13.317143s-.837555-10.553207.58629-14.992255s3.266469-8.626829,6.030404-9.966919s5.444115-2.093891,8.040539-1.088823s2.84769,1.675113,3.601491,1.842624-.167511-1.758868,3.769003-2.010135s7.873029,1.256335,11.223253,1.591357s10.971986.58629,12.144564.921312s1.591356-.586291,3.350224-1.507602s4.606559-1.256335,7.286739-.418778s4.606558,4.355293,5.779137,7.789273s2.428913,8.124294,1.842624,12.98212-1.5076,11.390763-3.182713,14.992255-4.60656,7.705517-5.192849,9.883163-1.005068,3.936513,1.34009,7.538005s5.862893,9.715652,6.365427,16.164834-.418778,15.82981-1.088823,22.111482-3.098957,17.337414-4.941581,20.436371-4.020269,4.77407-6.281671,3.601491-2.512669-3.60149-3.601492-8.375561-2.596423-13.233388-3.182713-17.58868-2.09389-18.34248-4.522803-24.205373-3.015202-5.611626-5.444115-5.611626-5.192848,12.563343-6.11416,17.337413-2.428913,14.908498-2.512669,19.431302-.670045,14.32221-1.926379,16.834879-3.350225,3.852758-5.276604,1.758868-5.109092-8.961851-6.86796-14.573477-4.690315-13.735921-5.946649-19.598814-.586288-13.903432.753801-19.180036s2.680179-5.779138,3.601491-9.380629.586288-3.685246-.753801-5.360359-2.931447-2.931446-4.77407-8.040539Z" fill="url(#molar-s-path2-fill)" stroke-width="0.6"/></g></svg>




<div id="tooth-placement"></div>



</main>
              
            
!

CSS

              
                /*
Made by Dale de Silva
designdebt.club
twitter: @daledesilva
*/

html {
  overflow: hidden;
}

body {
  background-color: #837980;
  text-align: center;
  font-family: Lato, cursive;
  font-size: 16px;
  overflow: hidden;
}

main {
  margin-top: 50vh;
  translate: 0 -50%;
  display: inline-block;
  position: relative;
  overflow: visible;
}

#tooth-selector_radio {
  display: flex;
  gap: 10px;
  justify-content: center;
}

input[type="radio"] {
  /* Can't use display none as it causes the :focus to not apply */
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

input[type="radio"]:checked + label {
  background-color: #594f4e;
  color: #ff7592;
  box-shadow: none;
}

input[type="radio"]:focus + label {
  outline: 5px solid #ff7592;
}

label {
  background-color: white;
  padding: 1ch;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

h1 {
  margin-top: 10%;
  margin-bottom: 0;
  font-weight: 900;
  font-size: 3.5em;
  font-family: 'Square Peg', cursive;
  color: #d3cbd2;
}

p {
  color: #2f292a;
  font-size: 1.2em;
  font-weight: 400;
  margin-top: 0;
  z-index: 5;
}

#mouth-anims {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;  /* Place behind radio buttons so they're touchable */
}

#mouth-anims.active {
  z-index: 10;  /* Place above other elements */
}

#mouth-anims-u-incisor-r,
#mouth-anims-u-incisor-l,
#mouth-anims-u-canine-r,
#mouth-anims-u-canine-l,
#mouth-anims-u-premolar-r,
#mouth-anims-u-premolar-l,
#mouth-anims-u-molar-r,
#mouth-anims-u-molar-l {
  cursor: pointer;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, .1));
}

#incisor,
#canine,
#premolar,
#molar {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(-10px -10px 100px rgba(0, 0, 0, .1));
}


/* Transitions & anims */

label {
  animation-duration: 0.5s;
  animation-name: fade-on;
  animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
  animation-fill-mode: both;
}

label[for="tooth-set_incisor"] {
  animation-delay: 1600ms;
}
label[for="tooth-set_canine"] {
  animation-delay: 1100ms;
}
label[for="tooth-set_premolar"] {
  animation-delay: 1500ms;
}
label[for="tooth-set_molar"] {
  animation-delay: 1250ms;
} 

h1 {
  animation-duration: 1s;
  animation-name: slide-up-on;
  animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
  animation-fill-mode: both;
  animation-delay: 1700ms;
}


@keyframes fade-on {
  from {
    scale: 0.8;
    opacity: 0;
  }
  to {
    scale: 1;
    opacity: 1;
  }
}

@keyframes slide-up-on {
  from {
    translate: 0 20px;
    opacity: 0;
  }
  to {
    translate: 0;
    opacity: 1;
  }
}
              
            
!

JS

              
                import { gsap } from "https://cdn.skypack.dev/gsap@3.12.2";

/*
Made by Dale de Silva
designdebt.club
twitter: @daledesilva
*/

const OPEN_STATE = 'open';
const OPENING_STATE = 'opening';
const CLOSED_STATE = 'closed';
const CLOSING_STATE = 'closing';

const OPEN_START = 0;
const OPEN_LOOPSTART = 0.32 * 1000;
const OPEN_LOOPEND = 0.47 * 1000;

const CLOSE_START = 0.47 * 1000;
const CLOSE_END = 0.80 * 1000;

// These shift the teeth position at the start of the animation so it looks like they're coming out of the mouth. For some reason I couldn't get them perfect without fudging.
const MOUTH_POS_Y_FUDGE = 50;
const MOUTH_POS_X_FUDGE = -30;
const FEATURE_POS_X_FUDGE = -10;
const FEATURE_POS_Y_FUDGE = 15;

// References and state
let mouthState = CLOSED_STATE;
let curMouthToothEl;
let curFreeToothEl;
let destMouthState;


const data = {
	incisor: {
	  value: 'incisor',
    freeToothEl: document.getElementById('incisor'),
    radioBtnId: 'tooth-set_incisor',
    name: 'Incisor',
    description: 'The sharp one.'
	},
	canine: {
	  value: 'canine',
    freeToothEl: document.getElementById('canine'),
    radioBtnId: 'tooth-set_canine',
    name: 'Canine',
    description: 'The sturdy one.'
  },
	premolar: {
  	value: 'premolar',
    freeToothEl: document.getElementById('premolar'),
    radioBtnId: 'tooth-set_premolar',
    name: 'Premolar',
    description: 'The warm up.'
  },
  molar: {
  	value: 'molar',
    freeToothEl: document.getElementById('molar'),
    radioBtnId: 'tooth-set_molar',
    name: 'Molar',
    description: 'The strong one.'
  }
}


const selectorEl = document.getElementById('tooth-selector_radio');
const mouthEl = document.getElementById('mouth-anims');
const mouthCtrl = mouthEl ? mouthEl.svgatorPlayer : {};
const toothPlacementEl = document.getElementById('tooth-placement');


mouthCtrl.play();

// Handle changes via radio buttons (including tabbing)
///////////////////////////////////////////////////////

selectorEl.addEventListener('change', (event) => {
  let selectedBtnEl = event.target;
  
  if(curFreeToothEl) animateToothOff(curFreeToothEl);
  curFreeToothEl = showTooth( document.getElementById(selectedBtnEl.value) );
  
  updateTextContent(selectedBtnEl.value);
});


// Handle changes via SVG interaction
/////////////////////////////////////

mouthEl.addEventListener('mouseenter', openMouth );
mouthEl.addEventListener('mouseleave', closeMouth );

// Constantly key tabs on what frame the animation should be going to
mouthCtrl.on('keyframe', updateAnimState);


setToothActions({
	...data.incisor,
 	mouthToothEl: document.getElementById('mouth-anims-u-incisor-r'),
});
setToothActions({
	...data.incisor,
	mouthToothEl: document.getElementById('mouth-anims-u-incisor-l'),
});
setToothActions({
	...data.canine,
	mouthToothEl: document.getElementById('mouth-anims-u-canine-r'),
});
setToothActions({
	...data.canine,
	mouthToothEl: document.getElementById('mouth-anims-u-canine-l'),
});
setToothActions({
	...data.premolar,
	mouthToothEl: document.getElementById('mouth-anims-u-premolar-r'),
});
setToothActions({
	...data.premolar,
	mouthToothEl: document.getElementById('mouth-anims-u-premolar-l'),
});
setToothActions({
	...data.molar,
	mouthToothEl: document.getElementById('mouth-anims-u-molar-r'),
});
setToothActions({
	...data.molar,
	mouthToothEl: document.getElementById('mouth-anims-u-molar-l'),
});


function updateTextContent(value) {
	document.getElementById('heading').innerHTML = data[value].name;
  document.getElementById('description').innerHTML = data[value].description;
}

function setToothActions(options) {
	const toothEl = options.mouthToothEl;
	toothEl.addEventListener('mouseenter', () => highlight(toothEl) );
	toothEl.addEventListener('mousedown', () => selectTooth(options) );
}

function highlight(toothEl) {
	const curRot = gsap.getProperty(toothEl, 'rotation');
  // Note, the rotation can incrementally over successive highlights, but I like it
	gsap.set(toothEl, { transformOrigin: '50% 50%' });
	let tl = new gsap.timeline();
	tl.to(toothEl, { rotation: curRot + 5, duration: 0.1 });
  tl.to(toothEl, { rotation: curRot - 2, duration: 0.1 });
  tl.to(toothEl, { rotation: curRot, duration: 0.1 });
}

function selectTooth({value, mouthToothEl, freeToothEl, radioBtnId}) {

	// Check radio button
	document.getElementById(radioBtnId).checked = true;
  
  // Change text content
  updateTextContent(value);
  
  // Animate previously selected tooth
  if(curFreeToothEl) animateToothOff(curFreeToothEl, curMouthToothEl);
  
  // Animate newly selected tooth 
  curFreeToothEl = animatePullingTooth(mouthToothEl, freeToothEl);
  curMouthToothEl = mouthToothEl;
}


function openMouth() {
	if(mouthState == OPEN_STATE) return;
	destMouthState = OPEN_STATE;
  gsap.killTweensOf(mouthEl);
  gsap.to(mouthEl, {
  	scale: '2.1',
    duration: 1.5,
    ease: "elastic.out(1, 0.3)"
  })
  updateAnimState();
}

function closeMouth() {
	if(mouthState == CLOSED_STATE) return;
  destMouthState = CLOSED_STATE;
	gsap.killTweensOf(mouthEl);
  gsap.to(mouthEl, {
  	scale: '1'
  })
  updateAnimState();
}


// This still confuses me. What a mess.
function updateAnimState(currentTime) {
    
	if(destMouthState == OPEN_STATE) {
  
  	if(currentTime < OPEN_LOOPSTART) {
    	mouthCtrl.play(); // Just keep playing until it gets there
			mouthState = OPENING_STATE;
      mouthEl.classList.add('active');
    } else if(currentTime >= OPEN_LOOPEND) {
    	mouthCtrl.seekTo(OPEN_LOOPSTART);
      mouthCtrl.play();
			mouthState = OPEN_STATE;
    } else if(currentTime > CLOSE_START) {
    	mouthCtrl.play(); // Finish closing first
			mouthState = CLOSING_STATE;
    } else if(currentTime >= CLOSE_END) {
    	mouthCtrl.seekTo(OPEN_START);
			mouthCtrl.play();
			mouthState = CLOSED_STATE;
      mouthEl.classList.remove('active');

    } else {
    	mouthCtrl.play();
			mouthState = OPENING_STATE;
    }
  
  } else if(destMouthState == CLOSED_STATE & mouthState != CLOSED_STATE) {
        
  	if(currentTime < CLOSE_END) {
	    mouthState = CLOSING_STATE;
    	mouthCtrl.play();
    }
  
  } else {
  	// It's closed
		mouthEl.classList.remove('active');
  }

}


function animatePullingTooth(sourceEl, freeToothEl) {

	const	animEl = freeToothEl.cloneNode(true);
  document.body.append(animEl);

	// get tooth's position in mouth
  const posInMouth = getAbsPosition(sourceEl);
  const posAsFeature = getAbsPosition(toothPlacementEl);
  
  gsap.set(sourceEl, {
  	opacity: 0,
    pointerEvents: 'none'
  });
  gsap.set(animEl, { opacity: 1 });
    
  gsap.fromTo(animEl, {
  	x: posInMouth.x + MOUTH_POS_X_FUDGE,
  }, {
  	x: posAsFeature.x + FEATURE_POS_X_FUDGE,
    duration: 1.2,
    ease: "power2.inOut"
  })
  
  const sourceRot = gsap.getProperty(sourceEl, 'rotation') + 180;	// Note sure why it's 180
  gsap.fromTo(animEl, {
    y: posInMouth.y + MOUTH_POS_Y_FUDGE,
  }, {
    y: posAsFeature.y + FEATURE_POS_Y_FUDGE,
    duration: 2,
    ease: "elastic.out(2, 0.75)"
	})
      
	gsap.fromTo(animEl, {
    rotation: sourceRot,
    scale: 2,
  }, {
    rotation: 250 + Math.random()*20 ,
    scale: 3,
    duration: 2.5,
    ease: "elastic.out(1, 1)"
  })
  gsap.set(animEl, {
	  delay: 0.5,
    zIndex: -10,
  })
  
  return animEl;
}


function getAbsPosition(el) {
  let elRect = el.getBoundingClientRect();
  let x = elRect.left + (elRect.right-elRect.left)/2
  let y = elRect.top + (elRect.bottom-elRect.top)/2;
  
  return {x,y};
}


function showTooth(toothEl) {
  const	animEl = toothEl.cloneNode(true);
  document.body.append(animEl);

  const posAsFeature = getAbsPosition(toothPlacementEl);
  
  gsap.set(animEl, {
  	zIndex: -10,
    x: posAsFeature.x + FEATURE_POS_X_FUDGE
  })
  
  gsap.to(animEl, {
	  delay: 0.2,
    opacity: 1,
    duration: 0.5,
	})
  
  gsap.fromTo(animEl, {
    y: posAsFeature.y - 50,
  }, {
  	delay: 0.2,
    y: posAsFeature.y + FEATURE_POS_Y_FUDGE,
    duration: 1,
    ease: "elastic.out(2, 0.75)"
	})
      
	gsap.fromTo(animEl, {
    rotation: 230 + Math.random()*60,
    scale: 2,
  }, {
  	delay: 0.2,
    rotation: 250 + Math.random()*20 ,
    scale: 3,
    duration: 1,
    ease: "elastic.out(1, 1)"
  })
  
  return animEl;
}


function animateToothOff(freeToothEl, mouthToothEl) {
 
  gsap.to(freeToothEl, {
    y: '+=1000',
    duration: 0.5,
    ease: "power3.in",
  })
  gsap.to(freeToothEl, {
    rotation: 240 + Math.random()*40,
    scale: 2.5,
    duration: 0.5,
    ease: "power3.in",
    onComplete: () => {
      freeToothEl.parentNode.removeChild(freeToothEl);
      if(mouthToothEl) growNewTooth(mouthToothEl);
    },
  })
  
}

function growNewTooth(mouthToothEl) {
	const destScale = gsap.getProperty(mouthToothEl, 'scale');
  gsap.fromTo(mouthToothEl, {
    scale: 0
  }, {
    delay: 4,
    onStart: () => {
      gsap.set(mouthToothEl, {
        opacity: 1,
        pointerEvents: 'auto'
      });
    },
    duration: 1,
    scale: destScale,
    ease: "circ.inOut"
  });
}

              
            
!
999px

Console