Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

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

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

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

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

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

HTML Settings

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

            
              <div id="playground">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="706px" height="346px" viewBox="0 0 706 346" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <title>StrongVue</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-114.000000, -85.000000)">
            <g id="StrongVue" transform="translate(0.000000, 20.000000)">
                <g id="RightArm" transform="translate(514.000000, 0.000000)">
                    <g id="FlexArm">
                        <g id="Arm" transform="translate(190.971317, 223.849905) rotate(-308.000000) translate(-190.971317, -223.849905) translate(69.971317, 80.849905)">
                            <g id="Forearm" transform="translate(148.202190, 115.770536) rotate(8.000000) translate(-148.202190, -115.770536) translate(68.702190, 10.770536)">
                                <path d="M129.576387,174.253118 L129.696584,164.590305 C130.118799,130.432635 120.078835,97.2056776 111.582581,75.3475056 C101.575722,49.5994563 90.8548155,31.8072424 89.8005506,30.0816502 C89.576965,28.8551214 87.7709633,20.6608223 79.0465391,17.107511 C69.3040108,10.7338878 48.5955994,0 32.435297,0 C25.5469236,0 20.0102502,1.91928112 15.9770502,5.70300677 C2.33730685,18.4925126 0.0943200318,27.1370755 0.614831504,32.136262 C1.08135646,36.6368882 3.72414906,39.1623905 5.05140238,40.1630327 L4.83647494,41.0172763 C4.2120649,43.5387539 4.85226345,48.7291139 16.1349353,55.1666293 C21.2117047,58.0644168 26.1356822,59.4730635 31.1910607,59.4730635 C38.050913,59.4730635 43.7857067,56.7669526 48.4407701,54.570973 C49.189451,54.2173021 49.9177596,53.8746991 50.6251867,53.554735 C52.3303456,52.7819917 53.9428107,52.7125655 55.3734533,53.372114 C58.2011242,54.6746092 59.9898094,58.5609648 60.5958844,60.5934407 C59.9434625,64.209638 50.7280666,116.595699 58.0900953,145.09061 C61.2217626,158.187073 86.2169273,205.13574 100.79852,208.866083 C102.183325,209.149321 105.372604,209.699197 109.257595,209.699197 C120.726674,209.699197 128.75182,204.901748 131.855025,196.190778 C134.132645,189.796863 133.373099,182.48431 129.576387,174.253118 Z" id="SVGCleanerId_0_1_-Copy" fill="#F7D6A8" fill-rule="nonzero"></path>
                                <path d="M0.328666667,32.1807654 C0.794701754,36.7092 3.4347193,39.2503068 4.76057895,40.2571318 L4.54587719,41.1166536 C3.92212281,43.6537109 4.56164912,48.876141 15.8324737,55.3534325 C20.9039123,58.2691248 25.8227193,59.6864752 30.8727895,59.6864752 C37.7254386,59.6864752 43.4542105,56.9636438 48.104386,54.7540957 C48.8522807,54.3982395 49.5798246,54.0535197 50.2865088,53.7315786 C48.1761228,54.1886741 46.0458947,54.4367105 43.9517895,54.4367105 C38.6249474,54.4367105 30.7532281,53.8748323 25.1155263,50.6326432 C17.6162281,46.3223793 15.1176491,43.2163571 14.3499123,41.9716197 C15.1934561,40.0369363 15.4127368,37.9428011 14.9594211,35.9139652 C14.3127719,33.0357314 12.5854912,30.6986218 10.0797895,29.3020254 C9.67429825,28.9917269 8.32707018,27.797103 8.08031579,25.4088675 C7.85696491,23.2382966 10.8419298,14.7129338 23.4233509,1.09371474 C20.4277018,2.04890769 17.8339825,3.54421239 15.6757719,5.58317222 C2.04984211,18.4527141 -0.190789474,27.15069 0.328666667,32.1807654 Z" id="Shape" fill="#202121" fill-rule="nonzero" opacity="0.191236413"></path>
                                <path d="M68.5134976,62.5480502 C78.8032118,81.6369267 89.8708001,97.8071134 101.716263,111.05861 C113.561725,124.310107 127.468967,136.894329 143.437989,148.811275" id="Line" stroke="#979797" stroke-width="4" opacity="0.31176404" style="mix-blend-mode: multiply;" stroke-linecap="round" transform="translate(105.975744, 105.679663) rotate(205.000000) translate(-105.975744, -105.679663) "></path>
                            </g>
                            <g id="UpperArm" transform="translate(23.000000, 151.000000)">
                                <path d="M31.7675285,13.5740453 C27.1562654,11.3946676 21.810582,10.289383 15.8695191,10.289383 C12.5030017,10.289383 8.93734529,10.6460725 5.27186479,11.3493897 L0.505263158,12.2629977 L1.25139751,17.0046031 C4.20079275,35.6998601 13.9657306,82.2782724 40.8729141,110.953288 L43.1230312,113.35 L46.2425349,112.266348 C53.2409186,109.83442 59.569564,106.611638 65.0502136,102.686041 L73.3452923,96.7465832 C83.5691166,87.2127128 88.7651292,68.1676007 79.2066692,45.137978 C66.7751137,15.1860783 32.7825817,12.8418828 31.7675285,13.5740453 Z" id="shoulder" fill="#F7D6A8" fill-rule="nonzero"></path>
                                <g id="Bicep" transform="translate(27.000000, 0.000000)">
                                    <path d="M102.321551,20.2287292 C87.1521059,5.60254719 69.8779158,-0.785936703 42.974191,1.17543889 C37.9738413,1.53998188 32.7564795,1.84907387 27.5584951,3.17722647 C15.3514315,6.29687581 6.73090593,12.1578522 4.76752851,13.5740453 C2.20851285,15.8893515 -5.13453317,41.5884184 9.04780902,68.6933976 C13.2147516,76.6571662 25.647246,86.0082281 46.3452923,96.7465832 C47.3007517,96.790855 48.6882608,97.0640721 50.3963179,96.8351268 C62.9108417,95.1576991 86.5231787,94.4341901 108.79852,69.8660827 C110.183325,70.1493213 124.694845,41.8007698 102.321551,20.2287292 Z" id="BicepMuscle" fill="#F7D6A8" fill-rule="nonzero"></path>
                                    <path d="M63.4760757,47.5114744 C63.2472929,55.0286718 61.3275721,56.782424 68.3488497,73.2080423 C73.0297014,84.1584545 79.300452,92.4949661 87.1611015,98.2175771" id="BicepShadow" stroke="#979797" stroke-width="4" opacity="0.31176404" style="mix-blend-mode: multiply;" stroke-linecap="round" transform="translate(75.113550, 72.864526) rotate(271.000000) translate(-75.113550, -72.864526) "></path>
                                </g>
                            </g>
                            <path d="M55.8800937,271.980505 C57.8433142,271.740752 60.3845243,271.044771 63.503724,269.89256 C65.2891439,269.89256 66.9060315,268.847806 67.6205059,267.230984 C68.3365123,265.613153 68.0152798,263.731989 66.8013373,262.438027 L65.0547309,260.57452 C63.500241,258.915993 61.9822926,257.175415 60.5013591,255.353686 L59.9992539,253.818713 L59.4244653,254.006374 C48.7182736,240.384346 40.0009212,222.427249 33.458009,200.487261 C28.4949912,183.84585 26.2407455,169.706099 25.3388429,162.761079 L25.2121884,161.792499 C24.9246623,159.576873 23.0161629,157.916667 20.7557887,157.916667 L9.53103391,157.916667 C7.04901435,157.916667 5.03684211,159.904273 5.03684211,162.355991 C-0.613307821,179.593692 -1.47766015,193.428824 2.44378512,203.861387 C10.2283252,224.571277 11.9336099,235.500257 19.1532657,244.82017 C23.9750745,251.044683 30.4637349,256.835643 36.580723,261.464546 L10.5971908,269.947804 L15.5187191,285.094711 L55.8800937,271.980505 Z" id="Sleeve" fill="#34495E" fill-rule="nonzero"></path>
                        </g>
                    </g>
                </g>
                <g id="LeftArm">
                    <g id="FlexArm" transform="translate(210.000000, 205.500000) scale(-1, 1) translate(-210.000000, -205.500000) ">
                        <g id="Arm" transform="translate(190.971317, 223.849905) rotate(-308.000000) translate(-190.971317, -223.849905) translate(69.971317, 80.849905)">
                            <g id="Forearm" transform="translate(148.202190, 115.770536) rotate(8.000000) translate(-148.202190, -115.770536) translate(68.702190, 10.770536)">
                                <path d="M129.576387,174.253118 L129.696584,164.590305 C130.118799,130.432635 120.078835,97.2056776 111.582581,75.3475056 C101.575722,49.5994563 90.8548155,31.8072424 89.8005506,30.0816502 C89.576965,28.8551214 87.7709633,20.6608223 79.0465391,17.107511 C69.3040108,10.7338878 48.5955994,0 32.435297,0 C25.5469236,0 20.0102502,1.91928112 15.9770502,5.70300677 C2.33730685,18.4925126 0.0943200318,27.1370755 0.614831504,32.136262 C1.08135646,36.6368882 3.72414906,39.1623905 5.05140238,40.1630327 L4.83647494,41.0172763 C4.2120649,43.5387539 4.85226345,48.7291139 16.1349353,55.1666293 C21.2117047,58.0644168 26.1356822,59.4730635 31.1910607,59.4730635 C38.050913,59.4730635 43.7857067,56.7669526 48.4407701,54.570973 C49.189451,54.2173021 49.9177596,53.8746991 50.6251867,53.554735 C52.3303456,52.7819917 53.9428107,52.7125655 55.3734533,53.372114 C58.2011242,54.6746092 59.9898094,58.5609648 60.5958844,60.5934407 C59.9434625,64.209638 50.7280666,116.595699 58.0900953,145.09061 C61.2217626,158.187073 86.2169273,205.13574 100.79852,208.866083 C102.183325,209.149321 105.372604,209.699197 109.257595,209.699197 C120.726674,209.699197 128.75182,204.901748 131.855025,196.190778 C134.132645,189.796863 133.373099,182.48431 129.576387,174.253118 Z" id="SVGCleanerId_0_1_-Copy" fill="#F7D6A8" fill-rule="nonzero"></path>
                                <path d="M0.328666667,32.1807654 C0.794701754,36.7092 3.4347193,39.2503068 4.76057895,40.2571318 L4.54587719,41.1166536 C3.92212281,43.6537109 4.56164912,48.876141 15.8324737,55.3534325 C20.9039123,58.2691248 25.8227193,59.6864752 30.8727895,59.6864752 C37.7254386,59.6864752 43.4542105,56.9636438 48.104386,54.7540957 C48.8522807,54.3982395 49.5798246,54.0535197 50.2865088,53.7315786 C48.1761228,54.1886741 46.0458947,54.4367105 43.9517895,54.4367105 C38.6249474,54.4367105 30.7532281,53.8748323 25.1155263,50.6326432 C17.6162281,46.3223793 15.1176491,43.2163571 14.3499123,41.9716197 C15.1934561,40.0369363 15.4127368,37.9428011 14.9594211,35.9139652 C14.3127719,33.0357314 12.5854912,30.6986218 10.0797895,29.3020254 C9.67429825,28.9917269 8.32707018,27.797103 8.08031579,25.4088675 C7.85696491,23.2382966 10.8419298,14.7129338 23.4233509,1.09371474 C20.4277018,2.04890769 17.8339825,3.54421239 15.6757719,5.58317222 C2.04984211,18.4527141 -0.190789474,27.15069 0.328666667,32.1807654 Z" id="Shape" fill="#202121" fill-rule="nonzero" opacity="0.191236413"></path>
                                <path d="M68.5134976,62.5480502 C78.8032118,81.6369267 89.8708001,97.8071134 101.716263,111.05861 C113.561725,124.310107 127.468967,136.894329 143.437989,148.811275" id="Line" stroke="#979797" stroke-width="4" opacity="0.31176404" style="mix-blend-mode: multiply;" stroke-linecap="round" transform="translate(105.975744, 105.679663) rotate(205.000000) translate(-105.975744, -105.679663) "></path>
                            </g>
                            <g id="UpperArm" transform="translate(23.000000, 151.000000)">
                                <path d="M31.7675285,13.5740453 C27.1562654,11.3946676 21.810582,10.289383 15.8695191,10.289383 C12.5030017,10.289383 8.93734529,10.6460725 5.27186479,11.3493897 L0.505263158,12.2629977 L1.25139751,17.0046031 C4.20079275,35.6998601 13.9657306,82.2782724 40.8729141,110.953288 L43.1230312,113.35 L46.2425349,112.266348 C53.2409186,109.83442 59.569564,106.611638 65.0502136,102.686041 L73.3452923,96.7465832 C83.5691166,87.2127128 88.7651292,68.1676007 79.2066692,45.137978 C66.7751137,15.1860783 32.7825817,12.8418828 31.7675285,13.5740453 Z" id="shoulder" fill="#F7D6A8" fill-rule="nonzero"></path>
                                <g id="Bicep" transform="translate(27.000000, 0.000000)">
                                    <path d="M102.321551,20.2287292 C87.1521059,5.60254719 69.8779158,-0.785936703 42.974191,1.17543889 C37.9738413,1.53998188 32.7564795,1.84907387 27.5584951,3.17722647 C15.3514315,6.29687581 6.73090593,12.1578522 4.76752851,13.5740453 C2.20851285,15.8893515 -5.13453317,41.5884184 9.04780902,68.6933976 C13.2147516,76.6571662 25.647246,86.0082281 46.3452923,96.7465832 C47.3007517,96.790855 48.6882608,97.0640721 50.3963179,96.8351268 C62.9108417,95.1576991 86.5231787,94.4341901 108.79852,69.8660827 C110.183325,70.1493213 124.694845,41.8007698 102.321551,20.2287292 Z" id="BicepMuscle" fill="#F7D6A8" fill-rule="nonzero"></path>
                                    <path d="M63.4760757,47.5114744 C63.2472929,55.0286718 61.3275721,56.782424 68.3488497,73.2080423 C73.0297014,84.1584545 79.300452,92.4949661 87.1611015,98.2175771" id="BicepShadow" stroke="#979797" stroke-width="4" opacity="0.31176404" style="mix-blend-mode: multiply;" stroke-linecap="round" transform="translate(75.113550, 72.864526) rotate(271.000000) translate(-75.113550, -72.864526) "></path>
                                </g>
                            </g>
                            <path d="M55.8800937,271.980505 C57.8433142,271.740752 60.3845243,271.044771 63.503724,269.89256 C65.2891439,269.89256 66.9060315,268.847806 67.6205059,267.230984 C68.3365123,265.613153 68.0152798,263.731989 66.8013373,262.438027 L65.0547309,260.57452 C63.500241,258.915993 61.9822926,257.175415 60.5013591,255.353686 L59.9992539,253.818713 L59.4244653,254.006374 C48.7182736,240.384346 40.0009212,222.427249 33.458009,200.487261 C28.4949912,183.84585 26.2407455,169.706099 25.3388429,162.761079 L25.2121884,161.792499 C24.9246623,159.576873 23.0161629,157.916667 20.7557887,157.916667 L9.53103391,157.916667 C7.04901435,157.916667 5.03684211,159.904273 5.03684211,162.355991 C-0.613307821,179.593692 -1.47766015,193.428824 2.44378512,203.861387 C10.2283252,224.571277 11.9336099,235.500257 19.1532657,244.82017 C23.9750745,251.044683 30.4637349,256.835643 36.580723,261.464546 L10.5971908,269.947804 L15.5187191,285.094711 L55.8800937,271.980505 Z" id="Sleeve" fill="#34495E" fill-rule="nonzero"></path>
                        </g>
                    </g>
                </g>
                <g id="VueLogo" transform="translate(267.000000, 65.000000)">
                    <path d="M199.740816,207.419477 L79.5,0.5 L0.5,0.5 L199.5,344.476993 L199.5,345.309505 L199.740816,344.893249 L199.981631,345.309505 L199.981631,344.476993 L398.981631,0.5 L319.981631,0.5 L199.740816,207.419477 Z" id="Combined-Shape" fill="#40B883"></path>
                    <path d="M199.744652,79.0203957 L154.288782,0.501602173 L79.4971466,0.501602173 L199.503336,207.021452 L199.502853,207.844513 L199.742235,207.432576 L199.981873,207.844971 L199.981419,207.020978 L319.992157,0.501602173 L245.200521,0.501602173 L199.744652,79.0203957 Z" id="Combined-Shape" fill="#34495E"></path>
                </g>
            </g>
        </g>
    </g>
</svg>
</div>
            
          
!
            
              html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

#playground {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #192a31;
  height: 100%;
}

svg {
  width: 800px;
}

:root {
  --bicepX: 20px;
  --bicepY: 0px;
  --bicepScale: 1deg;
  --forearmX: 45px;
  --forearmY: 10px;
}

@keyframes flex {
  0% {
    transform: translate(var(--bicepX), var(--bicepY)) skew(0deg);
  }
  50% {
    transform: translate(var(--bicepX), var(--bicepY)) scale(1, 1.1)
      skew(-4deg, -10deg);
  }
  100% {
    transform: translate(var(--bicepX), var(--bicepY)) skew(0deg);
  }
}

@keyframes forearm-up {
  0% {
    transform: translate(var(--forearmX), var(--forearmY)) rotate(20deg);
  }
  50% {
    transform: translate(
        calc(var(--forearmX) - 2px),
        calc(var(--forearmY) - 4px)
      )
      rotate(-10deg);
  }
  100% {
    transform: translate(var(--forearmX), var(--forearmY)) rotate(20deg);
  }
}


@media only screen and (min-device-width: 768px){
  #Bicep {
  animation: flex 3s infinite;
}

  #Forearm {
    transform-origin: bottom 0;
    animation: forearm-up 3s infinite;
  }
}



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

Console