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.

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.

HTML

              
                <div class="container">
  <svg id="artboard" onclick="miniAni.toggleAnimation()" viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient x1="50%" y1="0%" x2="50%" y2="26.344401%" id="linearGradient-1">
        <stop stop-color="#2A32FC" offset="0%"></stop>
        <stop stop-color="#131155" offset="100%"></stop>
      </linearGradient>
      <linearGradient x1="50%" y1="7.01078797%" x2="50%" y2="80.7901257%" id="linearGradient-2">
        <stop stop-color="#242843" offset="0%"></stop>
        <stop stop-color="#5369A6" offset="100%"></stop>
      </linearGradient>
      <linearGradient x1="92.739743%" y1="58.4863717%" x2="50%" y2="50%" id="linearGradient-3">
        <stop stop-color="#696587" offset="0%"></stop>
        <stop stop-color="#181427" offset="100%"></stop>
      </linearGradient>
      <linearGradient x1="93.6206819%" y1="39.0387265%" x2="13.3587452%" y2="50%" id="linearGradient-4">
        <stop stop-color="#7AA8F0" offset="0%"></stop>
        <stop stop-color="#5982DA" offset="23.4282393%"></stop>
        <stop stop-color="#5982DA" offset="76.3757191%"></stop>
        <stop stop-color="#7AA8F0" offset="100%"></stop>
      </linearGradient>
      <linearGradient x1="8.55086323%" y1="45.4025035%" x2="100%" y2="53.9789141%" id="linearGradient-5">
        <stop stop-color="#5882D9" offset="0%"></stop>
        <stop stop-color="#5170BB" offset="100%"></stop>
      </linearGradient>
      <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-6">
        <stop stop-color="#526496" offset="0%"></stop>
        <stop stop-color="#1D2D56" offset="100%"></stop>
      </linearGradient>
      <linearGradient x1="60.7774973%" y1="50%" x2="38.6484731%" y2="54.6511628%" id="linearGradient-7">
        <stop stop-color="#41498B" offset="0%"></stop>
        <stop stop-color="#212648" offset="100%"></stop>
      </linearGradient>
      <linearGradient x1="81.5013324%" y1="50%" x2="39.7650194%" y2="50%" id="linearGradient-8">
        <stop stop-color="#41498B" offset="0%"></stop>
        <stop stop-color="#313757" offset="50.910542%"></stop>
        <stop stop-color="#0A0A13" offset="100%"></stop>
      </linearGradient>
      <linearGradient x1="65.7166133%" y1="29.8232514%" x2="34.9003061%" y2="69.5702478%" id="linearGradient-9">
        <stop stop-color="#404889" offset="0%"></stop>
        <stop stop-color="#101028" offset="100%"></stop>
      </linearGradient>
    </defs>
    <rect id="background" fill="url(#linearGradient-1)" x="0" y="0" width="1280" height="720"></rect>
    <path d="M0,-1.42108547e-14 C13.078125,1.40625 41.578125,10.140625 85.5,26.203125 C126.322917,11.6302083 147.315104,7.26302083 148.476562,13.1015625 C190.408854,22.6484375 233.210937,31.9479167 276.882812,41 C322.773437,35.4765625 333.945312,26.203125 367.96875,26.203125 C390.651042,26.203125 419.070312,31.1354167 453.226562,41 C477.158854,22.4010417 505.028646,13.1015625 536.835937,13.1015625 C568.643229,13.1015625 602.864583,17.46875 639.5,26.203125 C663.5625,17.46875 690.361979,13.1015625 719.898437,13.1015625 C749.434896,13.1015625 803.036458,17.46875 880.703125,26.203125 C1003.24479,16.3385417 1082.79687,16.3385417 1119.35937,26.203125 C1155.92187,36.0677083 1209.13542,55.8255208 1279,85.4765625 L1279,162.929688 C1220.43359,155.179688 1152.64779,155.179688 1075.64258,162.929688 C960.134766,174.554688 965.503906,192.796875 869.296875,206.625 C773.089844,220.453125 680.664062,218.859375 662.492187,206.625 C644.320312,194.390625 663.637723,192.796875 640.710938,192.796875 C625.426414,192.796875 607.770164,197.40625 587.742187,206.625 L453.226562,182.390625 C389.106771,187.604167 357.046875,195.682292 357.046875,206.625 C357.046875,217.567708 238.03125,217.598958 0,206.71875 L0,-1.42108547e-14 Z" id="iceberg" fill="url(#linearGradient-2)"></path>
    <g id="narwhal">
        <polygon fill="#5F5962" points="88.0604823 269 109.060482 269 92.2695644 -5.97299987e-14"></polygon>
        <path d="M98.5324887,259.375955 C63.3742673,257.607065 44.0475637,284.349641 40.5523778,339.603683 L40.5523778,565.763555 L231.683604,565.763555 L226.718803,543.764886 L226.718803,543.764886 L221.978156,522.838874 L221.978156,522.838874 L218.347028,506.870376 L218.347028,506.870376 L214.859358,491.588378 L214.859358,491.588378 L211.515146,476.99288 L211.515146,476.99288 L209.101131,466.496771 L209.101131,466.496771 L205.257095,449.861382 L205.257095,449.861382 L202.343256,437.325382 L202.343256,437.325382 L200.252021,428.373898 L200.252021,428.373898 L197.589234,417.039273 L197.589234,417.039273 L195.686288,408.98882 L195.686288,408.98882 L193.864036,401.324522 L193.864036,401.324522 L192.694033,396.429522 L192.694033,396.429522 L191.006273,389.408818 L191.006273,389.408818 L189.399209,382.77427 L189.399209,382.77427 L188.372663,378.565769 L188.372663,378.565769 L186.90009,372.574815 L186.90009,372.574815 L185.963205,368.795376 L185.963205,368.795376 L185.062185,365.187563 L185.062185,365.187563 L184.19703,361.751374 L184.19703,361.751374 L183.367738,358.486811 L183.367738,358.486811 L182.574312,355.393872 C182.445063,354.892684 182.317308,354.398647 182.191047,353.911762 L181.451417,351.07626 C181.331134,350.617979 181.212346,350.166848 181.095051,349.722869 L180.409218,347.144805 L180.409218,347.144805 L179.759249,344.738366 L179.759249,344.738366 L179.145145,342.503551 C179.045783,342.145385 178.947915,341.794369 178.851542,341.450504 L178.291234,339.473127 C178.200838,339.157866 178.111936,338.849756 178.024529,338.548798 L177.518018,336.828858 C176.378001,333.015895 175.530877,330.604536 174.976646,329.59478 L174.921625,329.476139 L174.921625,329.476139 L174.771584,329.119798 L174.771584,329.119798 L173.430323,325.722591 L173.430323,325.722591 L172.738429,324.010422 C172.65469,323.805802 172.568659,323.596533 172.48033,323.382759 L171.922742,322.047198 C171.825201,321.815978 171.725353,321.580539 171.623192,321.341027 L170.982425,319.856215 C162.179117,299.692809 138.875572,255.898831 98.5324887,259.375955 Z" fill="#243670"></path>
        <path d="M137.523669,394.118389 C144.465682,395.340645 151.085595,390.712178 152.30966,383.780419 C153.533723,376.84866 148.89841,370.238524 141.956397,369.016267 C135.014385,367.794012 128.394471,372.422478 127.170407,379.354238 C125.946343,386.285997 130.581656,392.896133 137.523669,394.118389 Z" fill="#010002"></path>
        <path d="M137.069825,380.746583 C137.937577,380.899365 138.765066,380.320807 138.918074,379.454337 C139.071082,378.587867 138.491668,377.7616 137.623916,377.608818 C136.756165,377.456036 135.928675,378.034594 135.775667,378.901064 C135.622659,379.767534 136.202074,380.593801 137.069825,380.746583 Z" fill="#3C3950"></path>
        <path d="M75.0291175,452.126549 L75.3479504,452.460427 L75.3479504,452.460427 L75.9777645,453.105157 C81.0784978,458.245098 85.1318953,460.313809 88.1379569,459.311288 C89.9902766,458.69354 91.6964605,456.091962 93.2960852,452.927302 L93.6937943,452.125229 C93.7597168,451.989869 93.82546,451.853737 93.8910268,451.716936 L94.2823336,450.88892 L94.2823336,450.88892 L94.669544,450.049774 L94.669544,450.049774 L95.4322251,448.357831 L95.4322251,448.357831 L96.5489593,445.859778 L96.5489593,445.859778 L96.9144769,445.057457 L96.9144769,445.057457 L97.2768601,444.278538 C97.3370037,444.150943 97.3970225,444.024528 97.4569192,443.899397 L97.8148583,443.164834 C97.8742784,443.045248 97.9335823,442.92715 97.9927727,442.810645 L98.3465769,442.131536 C98.9928066,440.924536 99.6260045,439.935014 100.249981,439.299762 L100.525358,439.02388 L100.525358,439.02388 L100.768973,438.793876 L100.768973,438.793876 L100.863799,438.71789 C100.889841,438.701588 100.894779,438.708054 100.880068,438.735198 L100.843449,438.791161 L100.843449,438.791161 L100.686168,438.989861 L100.686168,438.989861 L100.424118,439.293801 L100.424118,439.293801 L100.066044,439.690433 L100.066044,439.690433 L99.3680155,440.431725 L99.3680155,440.431725 L98.8081389,441.005182 L98.8081389,441.005182 L98.0173253,441.789111 L98.0173253,441.789111 L97.3225578,442.454648 L97.3225578,442.454648 L96.5820492,443.140717 L96.5820492,443.140717 L96.0019108,443.661192 L96.0019108,443.661192 L95.6054125,444.008056 L95.6054125,444.008056 L94.9987887,444.52425 L94.9987887,444.52425 L94.5880493,444.863358 L94.5880493,444.863358 L94.1735265,445.196617 L94.1735265,445.196617 L93.7563134,445.522459 C93.6866144,445.576061 93.6168489,445.629289 93.5470396,445.682109 L93.1278405,445.993886 C93.0579472,446.044947 92.9880557,446.095536 92.9181886,446.14562 L92.4994632,446.439801 L92.4994632,446.439801 L92.0824199,446.72029 L92.0824199,446.72029 L91.6681519,446.98552 C91.5993992,447.028366 91.5308077,447.07051 91.4624002,447.111921 L91.0543446,447.351319 C90.9191833,447.428009 90.7849401,447.501502 90.651797,447.571536 L90.2558506,447.771001 C89.0790063,448.336704 88.0060346,448.601099 87.1697492,448.373589 C84.7643352,451.514149 82.4742861,453.074455 80.2996019,453.054505 L75.0291175,452.126549 Z" fill="#090F2F"></path>
        <path d="M168.033712,468.748529 C176.702661,442.97745 201.098256,433.624002 241.220497,440.688186 C246.872948,444.25704 246.852325,448.909079 241.158626,454.644305 L239.922398,455.506619 L239.922398,455.506619 L238.100736,456.765437 L238.100736,456.765437 L236.908081,457.581548 L236.908081,457.581548 L235.151779,458.771061 L235.151779,458.771061 L232.871046,460.292394 L232.871046,460.292394 L231.756824,461.025338 L231.756824,461.025338 L230.118171,462.090103 L230.118171,462.090103 L228.518735,463.113284 L228.518735,463.113284 L227.47423,463.772303 L227.47423,463.772303 L225.940154,464.726179 L225.940154,464.726179 L224.445294,465.638472 L224.445294,465.638472 L223.470508,466.223566 L223.470508,466.223566 L222.513151,466.790178 L222.513151,466.790178 L221.573223,467.338309 L221.573223,467.338309 L220.196012,468.125853 L220.196012,468.125853 L219.299658,468.62778 L219.299658,468.62778 L218.420734,469.111226 L218.420734,469.111226 L217.559239,469.576191 L217.559239,469.576191 L216.715174,470.022675 L216.715174,470.022675 L215.888538,470.450677 L215.888538,470.450677 L215.079331,470.860198 L215.079331,470.860198 L214.287554,471.251237 L214.287554,471.251237 L213.513206,471.623795 C213.385601,471.684348 213.258722,471.744131 213.132569,471.803144 L212.384365,472.14798 L212.384365,472.14798 L211.653591,472.474335 L211.653591,472.474335 L210.940247,472.782208 C210.822808,472.83198 210.706096,472.880982 210.590111,472.929214 L209.90291,473.209366 L209.90291,473.209366 L209.233139,473.471036 L209.233139,473.471036 L208.580798,473.714224 L208.580798,473.714224 L207.945886,473.938932 C207.632788,474.046665 207.326225,474.147468 207.026199,474.24134 L206.43486,474.419844 C206.337756,474.448055 206.241379,474.475495 206.145727,474.502166 L205.580533,474.652948 C204.931307,474.818079 204.317667,474.945478 203.739611,475.035144 C194.639516,480.663233 186.743439,481.500708 179.710552,480.71825 L178.946736,480.626617 C178.566523,480.57774 178.188842,480.524387 177.813637,480.467071 L177.066512,480.34731 L177.066512,480.34731 L176.325891,480.217897 L176.325891,480.217897 L175.591676,480.079749 L175.591676,480.079749 L174.863768,479.93378 C174.742971,479.90885 174.622432,479.883633 174.502149,479.858148 L173.783519,479.702162 L173.783519,479.702162 L172.716909,479.458092 L172.716909,479.458092 L171.663606,479.204657 L171.663606,479.204657 L170.968633,479.032022 C170.853279,479.003068 170.738162,478.974036 170.623278,478.944944 C167.800955,475.787139 166.937766,472.388334 168.033712,468.748529 Z" id="narwhal-flipper" fill="#060527"></path>
    </g>
    <path d="M357.046875,8.85049283 C357.046875,25.2645553 367.96875,73.6708053 428.046875,98.0848678 C434.318633,101.77086 445.645398,111.26287 459.247973,122.785499 C471.575068,133.227679 431.025729,133.826745 453.226562,141.99893 C485.507813,153.881743 562.132979,141.99893 575,141.99893 C604.671875,141.99893 670.101563,141.99893 695,141.99893 C719.898437,141.99893 831.539062,122.785499 869.296875,122.785499 C907.054688,122.785499 952.726562,122.785499 991.585938,122.785499 C1030.44531,122.785499 1025.625,107.715187 1119.35938,122.785499 C1181.84896,132.832374 1235.0625,143.197789 1279,153.881743 L1279,345.116118 L0,345.116118 L0,6.46377408 C238.03125,-2.88778842 357.046875,-2.0922155 357.046875,8.85049283 Z" id="snow" fill="#5369A6"></path>
    <g id="buddy">
        <path d="M247.039647,63.7509766 C248.903133,65.9316406 250.450702,66.6585286 251.682354,65.9316406 C253.529832,64.8413086 255.812472,57.4931641 255.812472,55.5595703 C255.812472,54.2705078 256.968656,53.1699219 259.281026,52.2578125 C258.949754,50.6848958 258.288844,48.9420573 257.298295,47.0292969 C256.307746,45.1165365 256.968656,43.0849609 259.281026,40.9345703 L259.281026,30.6757813 L226.433163,39.5810547 L226.433163,50.5957031 L247.039647,63.7509766 Z" fill="url(#linearGradient-3)"></path>
        <path d="M0,346.794922 L148.974344,388.326172 L554.992159,367.560547 C552.79734,360.003208 547.951754,355.414666 540.4554,353.794922 C519.599778,349.288628 479.705238,351.261642 461.31866,346.794922 C440.420434,324.878255 389.748248,309.95638 309.302102,302.029297 C285.110759,290.852214 264.562754,285.263672 247.658087,285.263672 C230.753419,285.263672 187.992555,295.766276 119.375494,316.771484 L0,316.771484 L0,346.794922 Z" fill="#5369A6"></path>
        <path d="M239.826152,342.03418 L252.599722,343.741211 C255.845795,315.960612 257.468831,298.654948 257.468831,291.824219 C257.468831,281.578125 259.482925,223.105469 257.468831,217.37207 C256.126102,213.549805 239.615432,214.727214 207.936822,220.904297 L212.07184,249.294922 C212.638988,255.087891 211.778138,259.126628 209.489291,261.411133 C206.056021,264.837891 204.288911,268.578222 202.654113,274.019531 C201.019316,279.460841 198.221146,325.626953 198.221146,326.896484 C198.221146,327.742839 202.838044,330.67806 212.07184,335.702148 C210.450111,314.248372 211.379893,301.007812 214.861189,295.980469 C218.342484,290.953125 220.998213,283.632812 222.828376,274.019531 C231.299658,256.301432 234.598656,243.893229 232.725369,236.794922 C235.400373,239.630208 237.198193,252.038411 238.118828,274.019531 C238.195929,289.929687 238.765037,299.894857 239.826152,303.915039 C240.887268,307.935221 240.887268,320.165039 239.826152,340.604492 L239.826152,342.03418 Z" fill="#504242"></path>
        <path d="M226.778699,54.6757812 C233.828845,57.1263021 239.461593,59.3860677 243.676943,61.4550781 C252.247379,73.6152619 256.904134,80.991564 257.647208,83.5839844 C259.523762,90.1308594 260.462039,100.695964 260.462039,115.279297 L277.298101,171.361328 L260.462039,181.224609 L249.267402,156.916016 L243.676943,143.283203 L243.676943,156.916016 C248.478099,161.695964 253.134854,169.798828 257.647208,181.224609 C264.41574,198.363281 260.462039,208.263672 260.462039,222.029297 C247.614962,237.896484 213.544922,253.494141 198.278972,248.460938 C190.745313,241.324219 187.220894,232.513672 187.705714,222.029297 C190.969068,199.982971 193.172144,184.638204 194.314941,175.994995 C198.364186,145.369737 199.68553,128.0244 198.278972,123.958984 C196.276966,118.172526 194.715349,114.434245 193.594121,112.744141 L194.314941,143.283203 L193.594121,175.994995 L177.07365,171.361328 C174.495349,121.132161 178.03937,90.7688802 187.705714,80.2714844 C202.20523,64.5253906 212.110607,58.0214844 226.778699,54.6757812 Z" fill="#1C271F"></path>
        <polygon fill="#080B0D" points="198.721204 139.884766 243.676943 143.283203 243.676943 156.916016 197.353763 152.794922"></polygon>
        <path d="M285.273375,190.936292 L269.670396,197.858152 C268.158755,198.528752 266.389518,197.849609 265.714864,196.339773 L257.957461,178.979146 C257.305665,177.520466 257.913136,175.818595 259.313707,175.092824 L259.479919,175.012988 L259.479919,175.012988 L275.082898,168.091128 C276.594539,167.420527 278.363777,168.09967 279.03843,169.609507 L286.795834,186.970133 C287.447629,188.428813 286.840159,190.130684 285.439587,190.856456 L285.273375,190.936292 L285.273375,190.936292 Z" fill="#6B7A8D"></path>
        <path d="M194.465404,170.139393 L192.224929,188.30957 L192.224929,188.30957 L180.911836,190.576195 L180.911836,190.576195 C179.82879,190.793188 178.774901,190.091114 178.557908,189.008068 L178.538539,188.894501 L178.538539,188.894501 L176.180575,172.177177 C176.031435,171.133414 176.718586,170.164139 177.732636,169.944003 L177.879669,169.917724 C177.880326,169.917631 177.880983,169.917539 177.881916,169.919417 L192.203074,167.913962 C193.29697,167.760779 194.307928,168.523378 194.461111,169.617274 C194.485352,169.790378 194.486795,169.965914 194.465404,170.139393 Z" fill="#6B7A8D"></path>
        <path d="M211.697444,60.4023438 C209.828731,59.4160156 209.828731,58.1708984 211.697444,56.6669922 C214.500514,54.4111328 217.508424,49.1962891 226.986916,49.1962891 C236.465409,49.1962891 245.897837,57.2089844 247.864886,60.4023438 C249.176253,62.53125 249.176253,65.1171875 247.864886,68.1601563 C245.742002,64.2936198 243.176768,61.7076823 240.169185,60.4023438 C238.97767,59.8852071 231.672433,58.6782227 223.648715,58.6782227 C221.346592,58.6782227 217.362835,59.2529297 211.697444,60.4023438 Z" fill="#6B7A8D"></path>
        <path d="M239.9075,332.130859 L237.006421,353.015625 L266.151487,354.429688 C270.559952,351.577799 272.764184,349.032878 272.764184,346.794922 C272.764184,344.556966 270.981066,341.055339 267.414829,336.290039 C267.527866,344.336263 266.433428,347.837891 264.131513,346.794922 C262.756767,346.573568 260.95568,346.573568 258.728253,346.794922 C258.800779,344.752604 258.800779,342.683594 258.728253,340.587891 C252.207358,339.712891 245.933774,336.89388 239.9075,332.130859 Z" fill="#0F0D1D"></path>
        <path d="M197.755602,321.130859 L194.854522,342.015625 L223.999589,343.429688 C228.408053,340.577799 230.612285,338.032878 230.612285,335.794922 C230.612285,333.556966 228.829167,330.055339 225.26293,325.290039 C225.375968,333.336263 224.281529,336.837891 221.979614,335.794922 C220.604868,335.573568 218.803782,335.573568 216.576354,335.794922 C216.648881,333.752604 216.648881,331.683594 216.576354,329.587891 C210.055459,328.712891 203.781875,325.89388 197.755602,321.130859 Z" fill="#0F0D1D"></path>
        <path d="M212.772608,16.2949219 C217.20002,16.6458333 220.560437,16.6458333 222.853858,16.2949219 C226.293989,15.7685547 231.994511,17.5263672 226.007802,19.1523437 C222.016662,20.2363281 217.604931,19.2838542 212.772608,16.2949219 Z" fill="#130D6A"></path>
        <path d="M225.942136,0 C223.46119,25.484375 221.72479,39.1363932 220.732934,40.9560547 C220.672168,41.7041016 217.690721,51.6083984 228.982388,48.6494141 C240.274056,45.6904297 257.536458,35.4482422 259.512328,31.8222656 C261.488198,28.1962891 259.01346,30.0947266 255.135227,25.9980469 C250.255663,23.3209635 240.524633,14.6549479 225.942136,0 Z" fill="#1C271F"></path>
        <path d="M224.281856,23.2060547 L221.282767,36.5087891 C234.74322,29.8538411 243.193512,24.3785807 246.633643,20.0830078 C246.528773,19.7841797 242.752714,16.9013672 242.163678,15.9677734 C236.89763,17.9886068 230.937023,20.4013672 224.281856,23.2060547 Z" fill="#504242"></path>
    </g>
    <g id="bear">
        <path d="M24.2636719,47.5607729 C12.218099,25.3582989 13.4619141,10.4325177 27.9951172,2.78342914 C36.194987,-2.57464377 43.3011068,-0.197039607 49.3134766,9.91624164 C52.2073568,20.8361266 52.2073568,29.2682462 49.3134766,35.2126006 C46.4195964,41.1569551 38.0696615,45.2730125 24.2636719,47.5607729 Z" fill="#5170BB"></path>
        <path d="M66.6201172,24.2126006 C60.9511719,24.2126006 36.0078125,24.9240541 23.9853516,45.5324526 C11.9628906,66.140851 -2.84217094e-14,120.450421 -2.84217094e-14,151.519757 C-2.84217094e-14,182.589093 7.66796875,192.467023 19.7919922,197.350812 C31.9160156,202.234601 109.008789,206.831281 116.879883,202.091046 C122.127279,198.93089 132.791992,198.164289 148.874023,199.791242 C159.256836,201.216372 165.431315,198.698468 167.397461,192.237531 C169.363607,185.776593 166.538086,177.513898 158.920898,167.449445 C150.194987,162.980695 142.075846,161.342023 134.563477,162.533429 C132.079102,156.163637 129.910807,140.034992 128.058594,114.147491 C150.664063,90.3116843 160.020508,74.0972312 156.12793,65.5041323 C154.365062,61.6124953 154.677547,54.1179019 148.874023,51.9269838 C131.935547,45.5324526 116.3725,37.7067561 109.035156,34.7795229 C98.5244141,30.5862623 95.09375,29.0438135 88.4919157,29.0438135 C76.095594,29.0438135 73.8466797,25.2648745 66.6201172,24.2126006 Z" fill="url(#linearGradient-4)"></path>
        <path d="M156.927734,67.2619448 C155.058594,61.1734031 153.242188,57.2053041 151.478516,55.3576479 C149.714844,53.5099916 145.604167,51.562075 139.146484,49.5138979 C145.298177,45.6180646 150.574544,45.6180646 154.975586,49.5138979 C159.376628,53.4097312 160.027344,59.3257469 156.927734,67.2619448 Z" fill="#02082E"></path>
        <path d="M94.3867188,30.3635073 L120.000977,67.3644838 C128.849284,66.2017234 137.146484,60.034894 144.892578,48.8639955 C147.65332,36.109601 137.887695,17.9943666 131.287109,14.6515932 C123.90625,11.6262026 124.726563,10.9865541 113.797852,14.6515932 C107.105794,16.8918276 100.635417,21.7040021 94.3867188,29.0881166" fill="#5170BB"></path>
        <path d="M22.3154297,198.307843 L50.9824219,202.509992 C49.3808594,192.099835 45.2679036,186.459536 38.6435547,185.589093 C32.0192057,184.71865 26.5764974,188.958234 22.3154297,198.307843 Z" fill="#5170BB"></path>
        <g id="bear-arm">
            <path d="M0.235227617,11.8554688 C1.39668595,4.42578125 7.22188126,0.473958333 17.7108136,0 L51.6844464,4.39257813 C56.2684307,8.91601563 58.0324281,14.8170573 56.9764386,22.0957031 C55.920449,29.374349 52.1541729,34.5107422 45.6776104,37.5048828 L9.65417293,34.3017578 C2.21341772,26.7672526 -0.926230717,19.2851563 0.235227617,11.8554688 Z" id="Path-20" fill="url(#linearGradient-5)"></path>
            <circle id="Oval" fill="#020F2E" cx="50.0584698" cy="7.8046875" r="1.5"></circle>
            <circle id="Oval" fill="#020F2E" cx="46.5584698" cy="13.3046875" r="2"></circle>
            <circle id="Oval" fill="#020F2E" cx="44.0584698" cy="22.8046875" r="2.5"></circle>
        </g>
    </g>
    <g id="bird">
        <path d="M66,55.9371029 C83.1208272,55.9371029 97,69.8162757 97,86.9371029 C97,97.6168675 91.5994568,107.035268 83.3803399,112.610334 C94.4938005,118.865999 102,130.774967 102,144.437103 C102,157.44816 95.1921796,168.869166 84.9443017,175.332357 L84.9433594,183.737884 L86.8856799,183.693803 L86.8856799,183.693803 L88.7299285,183.665948 L88.7299285,183.665948 L90.0487554,183.655706 L90.0487554,183.655706 L91.3124169,183.65459 L91.3124169,183.65459 L92.520913,183.662602 L92.520913,183.662602 L93.6742437,183.679741 L93.6742437,183.679741 L95.1262051,183.716792 L95.1262051,183.716792 L96.1508166,183.755228 L96.1508166,183.755228 L96.8032434,183.785922 L96.8032434,183.785922 L97.7359126,183.83957 L97.7359126,183.83957 L98.3270445,183.880407 L98.3270445,183.880407 L98.8936586,183.925299 L98.8936586,183.925299 L99.4357547,183.974249 L99.4357547,183.974249 L99.9533328,184.027254 L99.9533328,184.027254 L100.446393,184.084317 L100.446393,184.084317 L100.914935,184.145436 L100.914935,184.145436 L101.358959,184.210611 L101.358959,184.210611 L101.778466,184.279843 C101.84634,184.29172 101.913193,184.303766 101.979025,184.31598 L102.361754,184.391297 L102.361754,184.391297 L102.719966,184.470671 C102.777624,184.484238 102.834261,184.497974 102.889877,184.511879 L103.211312,184.597337 L103.211312,184.597337 L103.508228,184.686852 L103.508228,184.686852 L103.780627,184.780423 C103.823983,184.796357 103.866318,184.812459 103.907632,184.82873 L104.143253,184.928386 C105.297294,185.453756 105.469595,186.141558 104.660156,186.99179 C104.227022,187.446754 103.556857,187.852003 102.649661,188.20754 L102.274141,188.347103 L102.274141,188.347103 L101.873337,188.481363 L101.873337,188.481363 L101.44725,188.610321 L101.44725,188.610321 L100.99588,188.733976 L100.99588,188.733976 L100.519227,188.852328 L100.519227,188.852328 L100.01729,188.965377 L100.01729,188.965377 L99.4900706,189.073124 C99.4000936,189.09064 99.3090632,189.107934 99.2169793,189.125008 L98.6518345,189.224801 L98.6518345,189.224801 L98.0614063,189.31929 L98.0614063,189.31929 L97.4456947,189.408477 C97.3409692,189.4229 97.2351902,189.437103 97.1283578,189.451082 L96.4747213,189.532315 L96.4747213,189.532315 L95.7958015,189.608245 L95.7958015,189.608245 L94.7300157,189.712197 L94.7300157,189.712197 L93.6073424,189.804218 L93.6073424,189.804218 L92.4277817,189.884308 L92.4277817,189.884308 L91.6098037,189.931072 L91.6098037,189.931072 L90.3354306,189.991277 L90.3354306,189.991277 L89.0041701,190.03955 L89.0041701,190.03955 L88.0850589,190.065104 L88.0850589,190.065104 L87.1406645,190.085354 L87.1406645,190.085354 L86.1709867,190.100303 L86.1709867,190.100303 L84.6690639,190.11333 L84.6690639,190.11333 L83.1102536,190.11333 L83.1102536,190.11333 L82.0394426,190.107067 L82.0394426,190.107067 L80.3858199,190.08773 L80.3858199,190.08773 L79.2518007,190.06821 L79.2518007,190.06821 L78.0924981,190.043388 L78.0924981,190.043388 L76.3061381,189.996211 L76.3061381,189.996211 L74.4628906,189.937103 L74.4638386,179.828279 C71.5958986,180.552416 68.5928735,180.937103 65.5,180.937103 C62.8516777,180.937103 60.2692316,180.655054 57.7810613,180.119356 L55.5800781,183.737884 L28.6015625,183.737884 C22.2129536,183.737884 21.4784486,181.304651 22.561423,179.577841 L22.6756366,179.407631 L22.6756366,179.407631 L22.8011141,179.242828 C22.8229184,179.21585 22.8451564,179.189127 22.8678105,179.162673 L23.0085853,179.007289 L23.0085853,179.007289 L23.1584927,178.859056 C23.1841909,178.834986 23.2102342,178.811242 23.2366046,178.78784 L23.3986122,178.651643 C23.4262205,178.629665 23.4541206,178.608058 23.4822946,178.586837 L23.6544839,178.464245 C23.7128814,178.424999 23.7722326,178.38741 23.8323954,178.351595 L24.0151765,178.249585 L24.0151765,178.249585 L24.2019745,178.158913 L24.2019745,178.158913 L24.391937,178.080276 C24.4238137,178.068212 24.4557868,178.056678 24.4878385,178.045689 L24.6809489,177.986414 C24.874718,177.933912 25.0700365,177.902079 25.2630677,177.894056 L25.359375,177.892042 L45.921875,177.892042 L46.5667891,175.648844 C36.0347888,169.246378 29,157.663272 29,144.437103 C29,130.548174 36.7574764,118.4711 48.1759565,112.302354 C40.2065323,106.693409 35,97.4232812 35,86.9371029 C35,69.8162757 48.8791728,55.9371029 66,55.9371029 Z" fill="#000003"></path>
        <path d="M53.6972656,0.302337322 C53.8779297,6.03964201 54.3679577,-1.89102205 52.2029186,14.0913998 C51.0779186,17.1324154 52.2792969,21.8941342 54.9814453,63.4180458 C51.2333984,36.4444225 49.1761068,20.7632748 48.8095703,16.3746029 C48.4378255,3.97486336 50.0670573,-1.38255851 53.6972656,0.302337322 Z" fill="#243386"></path>
        <path d="M75.3287636,17.8214876 L75.0199651,18.7911556 L75.0199651,18.7911556 L74.8709438,19.2935965 L74.8709438,19.2935965 L74.6799904,20.0207827 L74.6799904,20.0207827 L74.6077382,20.3143025 L74.6077382,20.3143025 L74.5781806,20.4021149 L74.5781806,20.4021149 L74.5002631,20.5705568 L74.5002631,20.5705568 L73.5728028,22.1839797 L73.5728028,22.1839797 L72.6665948,23.8077903 L72.6665948,23.8077903 L71.6269067,25.7172996 L71.6269067,25.7172996 L70.0582605,28.6558084 L70.0582605,28.6558084 L69.2083996,30.2678711 L69.2083996,30.2678711 L69.0236166,30.4978228 L69.0236166,30.4978228 L68.9041998,30.6609734 L68.9041998,30.6609734 L68.7870859,30.8338318 L68.7870859,30.8338318 L68.6716623,31.0179649 L68.6716623,31.0179649 L68.5573166,31.2149397 L68.5573166,31.2149397 L68.4434362,31.4263233 L68.4434362,31.4263233 L68.3294086,31.6536826 L68.3294086,31.6536826 L68.2146213,31.8985847 L68.2146213,31.8985847 L68.0984618,32.1625966 L68.0984618,32.1625966 L67.9203097,32.5978729 L67.9203097,32.5978729 L67.7356248,33.0849606 L67.7356248,33.0849606 L67.6078513,33.4410814 L67.6078513,33.4410814 L67.4076844,34.0262738 L67.4076844,34.0262738 L67.1217005,34.9099778 L67.1217005,34.9099778 L66.7266418,36.1984914 L66.7266418,36.1984914 L66.1848228,38.0467231 L66.1848228,38.0467231 L65.0746759,41.9689579 L65.0746759,41.9689579 L61.8020689,53.6755104 L61.8020689,53.6755104 L60.4750213,58.3749568 L60.4750213,58.3749568 L58.6870737,64.6483768 L58.6870737,64.6483768 L56.9301569,70.7517458 L56.9301569,70.7517458 L55.2952026,76.3822363 C55.1807943,76.7746962 55.0652823,77.1706294 54.9486541,77.5700685 L58.0979447,62.9355424 L58.0979447,62.9355424 L60.9319602,49.9393566 L60.9319602,49.9393566 L62.7596319,41.7230949 L62.7596319,41.7230949 L63.6589719,37.7729032 L63.6589719,37.7729032 L64.4518273,34.3901126 L64.4518273,34.3901126 L64.9624915,32.3096425 L64.9624915,32.3096425 L65.2387937,31.2527867 L65.2387937,31.2527867 L65.5260967,30.393617 L65.5260967,30.393617 L65.8114671,29.5611577 L65.8114671,29.5611577 L66.094905,28.755409 L66.094905,28.755409 L66.3764103,27.9763708 L66.3764103,27.9763708 L66.6559831,27.2240431 L66.6559831,27.2240431 L66.9336233,26.4984259 L66.9336233,26.4984259 L67.209331,25.7995192 L67.209331,25.7995192 L67.4831061,25.1273231 L67.4831061,25.1273231 L67.7549486,24.4818375 L67.7549486,24.4818375 L68.0248586,23.8630624 L68.0248586,23.8630624 L68.2928361,23.2709978 L68.2928361,23.2709978 L68.5588809,22.7056437 L68.5588809,22.7056437 L68.8229933,22.1670002 L68.8229933,22.1670002 L69.0851731,21.6550671 C69.2593154,21.322682 69.4321694,21.0081038 69.603735,20.7113327 L69.8601171,20.2795312 C69.987825,20.0703081 70.1148083,19.8711014 70.2410668,19.6819112 L70.4926175,19.3168861 C70.6596738,19.0824394 70.8254418,18.8657999 70.9899214,18.6669673 L71.2356745,18.3820737 C72.7043953,16.7528436 74.0687584,16.5659816 75.3287636,17.8214876 Z" fill="#243386"></path>
        <path d="M43.5605469,80.9722592 C43.5605469,95.4449154 52.447201,102.937362 63.6933594,102.937362 C74.9395177,102.937362 85.7016602,97.4175717 86.5117188,95.3155209 C86.2060547,93.4239194 85.5289714,83.1246029 84.4804687,64.4175717 C82.1966146,61.438405 75.9036458,59.9488217 65.6015625,59.9488217 C50.1484375,59.9488217 43.5605469,66.4996029 43.5605469,80.9722592 Z" fill="url(#linearGradient-6)"></path>
        <circle fill="#020D38" cx="78.5" cy="67.4371029" r="4.5"></circle>
        <path d="M88.8730469,107.937349 C88.4667969,107.896087 93.1054687,67.5503842 85.8847656,63.4175717 C93.6061198,68.3733009 101.14388,75.7932227 108.498047,85.6773373 C106.680339,94.2932227 100.138672,101.713227 88.8730469,107.937349 Z" fill="#69674C"></path>
        <ellipse id="bird-wing-right" fill="#000003" cx="104.5" cy="124.437103" rx="24.5" ry="3.5"></ellipse>
        <ellipse id="bird-wing-left" fill="#000003" cx="24.5" cy="124.437103" rx="24.5" ry="3.5"></ellipse>
    </g>
    <g id="walrus">
        <path d="M112.426203,54.1671265 C120.124111,51.959787 123.711246,40.9173971 120.438295,29.5032583 C117.165343,18.0891196 108.271704,10.6255341 100.573797,12.8328735 C92.8758893,15.040213 89.2887538,26.0826029 92.5617054,37.4967417 C95.834657,48.9108804 104.728296,56.3744659 112.426203,54.1671265 Z" fill="url(#linearGradient-7)"></path>
        <path d="M65,0 C85.4345357,0 102,11.8644541 102,26.5 C102,32.3463072 99.3566843,37.7504373 94.8793324,42.1327712 C107.092788,48.6965837 115,59.1834336 115,71 C115,76.0551106 113.552888,80.8668676 110.940661,85.2322334 C122.122635,93.5925345 129,104.967254 129,117.5 C129,143.181241 100.122366,164 64.5,164 C28.8776336,164 0,143.181241 0,117.5 C0,104.708155 7.16466585,93.1227137 18.7587928,84.7155664 C16.3360022,80.4896688 15,75.8571688 15,71 C15,59.1834336 22.907212,48.6965837 35.119784,42.1327836 C30.6433157,37.7504373 28,32.3463072 28,26.5 C28,11.8644541 44.5654643,0 65,0 Z" fill="url(#linearGradient-8)"></path>
        <path d="M94.1942234,80 C123.093961,91.7135417 137.477137,100.641927 137.34375,106.785156 C143.776042,102.324219 132.332439,89.1171227 103.012943,67.1638681 L94.1942234,80 Z" id="walrus-arm" fill="url(#linearGradient-9)"></path>
    </g>
  </svg>
</div>
              
            
!

CSS

              
                body {
  margin: 0;
  padding: 0;
  background: black;
}

.container {
  width: 100vw; 
  height: 56.25vw;
  max-height: 100vh;
  max-width: 177.78vh;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
  display: none;
}

svg.ready {
  display: block;
}
              
            
!

JS

              
                const miniAni = (() => {
  let frame = 0,
      isAnimating = false,
      items = {},
      frames = [],
      lastFrame = 0;
  const artboard = document.getElementById('artboard');
  
  function calcTweenFrame(frame, a) {
    const tweenLength = a.tween.frame - a.frame + 1;
    const tweenFrame = frame - a.frame + 1;
    const tweenPercent = tweenFrame/tweenLength;
    const tweenVal = (from, to) => ((to-from)*tweenPercent) + from;
    const tf = {};
    if (a.pos && a.tween.pos) {
      const x = tweenVal(a.pos.x, a.tween.pos.x);
      const y = tweenVal(a.pos.y, a.tween.pos.y);
      tf.translate = `${x}, ${y}`;
    }
    if (a.scale != null && a.tween.scale != null) {
      tf.scale = tweenVal(a.scale, a.tween.scale);
    }
    if (a.rot && a.tween.rot) {
      const deg = tweenVal(a.rot.deg, a.tween.rot.deg);
      const x = tweenVal(a.rot.x, a.tween.rot.x);
      const y = tweenVal(a.rot.y, a.tween.rot.y);
      tf.rotate = `${deg}, ${x}, ${y}`;
    }
    return tf;
  }
  
  function drawFrame(frame) {
    const actions = frames.filter(f => (
      (f.frame === frame)
      || (f.tween && f.frame <= frame && f.tween.frame >= frame)
    ));
    actions.forEach(a => {
      let tf = {};
      const item = items[a.item];
      if (!item) return;
      
      if (a.pos) tf.translate = `${a.pos.x}, ${a.pos.y}`;
      if (a.scale != null) tf.scale = a.scale;
      if (a.rot) tf.rotate = `${a.rot.deg}, ${a.rot.x}, ${a.rot.y}`;
      
      if (a.tween) {
        tf = { ...tf, ...calcTweenFrame(frame, a) };
      }
      item.setAttribute(
        'transform',
        Object.keys(tf).map(p => `${p}(${tf[p]})`));
    })
  }
  
  function advanceFrame() {
    frame += 1;

    if (frame > lastFrame) {
      frame = 0;
    } else {
      drawFrame(frame);
    }

    if (isAnimating) {
      window.requestAnimationFrame(advanceFrame);
    }
  }

  function toggleAnimation() {
    isAnimating = !isAnimating;
    if (isAnimating) {
      window.requestAnimationFrame(advanceFrame);
    }
  }
  
  function setFrames(newFrames) {
    artboard.classList.remove('ready');
    isAnimating = false;
    frames = newFrames;
    items = {};
    lastFrame = 0;
    frames.forEach(f => {
      const tweenFrame = f.tween ? f.tween.frame : 0;
      lastFrame = Math.max(lastFrame, f.frame, tweenFrame);
      items[f.item] = items[f.item] || document.getElementById(f.item);
    });
    drawFrame(1);
    artboard.classList.add('ready');
  }
  
  return {
    toggleAnimation,
    setFrames,
  }; 
})();

miniAni.setFrames([
  {
    frame: 1,
    item: 'snow',
    pos: {x: 0, y: 374},
  },
  {
    frame: 1,
    item: 'iceberg',
    pos: {x: 0, y: 174},
  },
  {
    frame: 1,
    item: 'buddy',
    pos: {x: 342, y: 139},
  },
  {
    frame: 150,
    item: 'buddy',
    pos: {x: 342, y: 139},
    scale: 1,
    tween: {
      frame: 750,
      pos: {x: 1280, y: 220},
      scale: 0.5,
    }
  },
  {
    frame: 1,
    item: 'bear',
    pos: {x: 41, y: 482},
  },
  {
    frame: 1,
    item: 'bear-arm',
    pos: {x: 102, y: 117},
    rot: { deg: -40, x: 0, y: 20 },
    tween: {
      frame: 50,
      rot: { deg: 0, x: 0, y: 20 },
    }
  },
  {
    frame: 55,
    item: 'bear-arm',
    pos: {x: 102, y: 117},
    rot: { deg: 0, x: 0, y: 20 },
    tween: {
      frame: 95,
      rot: { deg: -40, x: 0, y: 20 },
    }
  },
  {
    frame: 100,
    item: 'bear-arm',
    pos: {x: 102, y: 117},
    rot: { deg: -40, x: 0, y: 20 },
    tween: {
      frame: 155,
      rot: { deg: 0, x: 0, y: 20 },
    }
  },
  {
    frame: 380,
    item: 'bear-arm',
    pos: {x: 102, y: 117},
    rot: { deg: 0, x: 0, y: 20 },
    tween: {
      frame: 400,
      rot: { deg: -40, x: 0, y: 20 },
    }
  },
  {
    frame: 400,
    item: 'bear-arm',
    pos: {x: 102, y: 117},
    rot: { deg: -40, x: 0, y: 20 },
    tween: {
      frame: 450,
      rot: { deg: 0, x: 0, y: 20 },
    }
  },
  {
    frame: 455,
    item: 'bear-arm',
    pos: {x: 102, y: 117},
    rot: { deg: 0, x: 0, y: 20 },
    tween: {
      frame: 495,
      rot: { deg: -40, x: 0, y: 20 },
    }
  },
  {
    frame: 500,
    item: 'bear-arm',
    pos: {x: 102, y: 117},
    rot: { deg: -40, x: 0, y: 20 },
    tween: {
      frame: 555,
      rot: { deg: 0, x: 0, y: 20 },
    }
  },
  {
    frame: 1,
    item: 'bird',
    pos: {x: 219, y: 496},
  },
  {
    frame: 1,
    item: 'bird-wing-left',
    rot: {deg: -40, x: 50, y: 124},
  },
  {
    frame: 250,
    item: 'bird-wing-left',
    rot: {deg: -40, x: 50, y: 124},
    tween: {
      frame: 300,
      rot: {deg: 40, x: 50, y: 124},
    },
  },
  {
    frame: 300,
    item: 'bird-wing-left',
    rot: {deg: 40, x: 50, y: 124},
    tween: {
      frame: 350,
      rot: {deg: -40, x: 50, y: 124},
    },
  },
  {
    frame: 1,
    item: 'bird-wing-right',
    rot: {deg: 40, x: 83, y: 124},
  },
  {
    frame: 250,
    item: 'bird-wing-right',
    rot: {deg: 40, x: 83, y: 124},
    tween: {
      frame: 300,
      rot: {deg: -40, x: 83, y: 124},
    },
  },
  {
    frame: 300,
    item: 'bird-wing-right',
    rot: {deg: -40, x: 83, y: 124},
    tween: {
      frame: 350,
      rot: {deg: 40, x: 83, y: 124},
    },
  },
  {
    frame: 1,
    item: 'walrus',
    pos: {x: 361, y: 523},
  },
  {
    frame: 1,
    item: 'walrus-arm',
    rot: {deg: 20, x: 94, y: 73},
  },
  {
    frame: 100,
    item: 'walrus-arm',
    rot: {deg: 20, x: 94, y: 73},
    tween: {
      frame: 150,
      rot: {deg: -90, x: 94, y: 73},
    }
  },
  {
    frame: 150,
    item: 'walrus-arm',
    rot: {deg: -90, x: 94, y: 73},
    tween: {
      frame: 170,
      rot: {deg: -70, x: 94, y: 73},
    }
  },
  {
    frame: 170,
    item: 'walrus-arm',
    rot: {deg: -70, x: 94, y: 73},
    tween: {
      frame: 190,
      rot: {deg: -90, x: 94, y: 73},
    }
  },
  {
    frame: 190,
    item: 'walrus-arm',
    rot: {deg: -90, x: 94, y: 73},
    tween: {
      frame: 210,
      rot: {deg: -70, x: 94, y: 73},
    }
  },
  {
    frame: 210,
    item: 'walrus-arm',
    rot: {deg: -70, x: 94, y: 73},
    tween: {
      frame: 230,
      rot: {deg: -90, x: 94, y: 73},
    }
  },
  {
    frame: 230,
    item: 'walrus-arm',
    rot: {deg: -90, x: 94, y: 73},
    tween: {
      frame: 280,
      rot: {deg: 0, x: 94, y: 73},
    }
  },
  {
    frame: 1,
    item: 'narwhal',
    pos: {x: 450, y: 527},
  },
  {
    frame: 250,
    item: 'narwhal',
    pos: {x: 450, y: 527},
    tween: {
      frame: 380,
      pos: {x: 450, y: -43},
    },
  },
  {
    frame: 1,
    item: 'narwhal-flipper',
    rot: {deg: 0, x: 165, y: 469},
  },
  {
    frame: 370,
    item: 'narwhal-flipper',
    rot: {deg: 0, x: 165, y: 469},
    tween: {
      frame: 430,
      rot: {deg: -40, x: 165, y: 469}
    },
  },
  {
    frame: 430,
    item: 'narwhal-flipper',
    rot: {deg: -40, x: 165, y: 469},
    tween: {
      frame: 530,
      rot: {deg: 40, x: 165, y: 469}
    },
  },
  {
    frame: 530,
    item: 'narwhal-flipper',
    rot: {deg: 40, x: 165, y: 469},
    tween: {
      frame: 630,
      rot: {deg: -40, x: 165, y: 469}
    },
  },
  {
    frame: 630,
    item: 'narwhal-flipper',
    rot: {deg: -40, x: 165, y: 469},
    tween: {
      frame: 730,
      rot: {deg: 40, x: 165, y: 469}
    },
  },
]);

miniAni.toggleAnimation();
              
            
!
999px

Console