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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <svg viewBox="0 0 1347 1367" fill="none" xmlns="http://www.w3.org/2000/svg" id="bike-pedal">
  <g id="bike-pedal-g" clip-path="url(#a)">
    <path id="sprocket" d="M415.5 11.4968C408.9 17.7968 403 22.8968 402.3 22.9968C401.7 22.9968 394.8 18.9968 386.9 14.0968L372.7 5.19676L364.1 15.3968C359.4 20.9968 354.3 26.9968 352.8 28.7968L350.2 31.8968L334.3 24.5968L318.5 17.2968L313.9 24.3968C311.4 28.2968 307.2 34.7968 304.7 38.6968C302.1 42.6968 299.4 45.9968 298.7 45.9968C298 45.9968 290.4 43.7968 282 41.0968C273.5 38.2968 266.4 36.1968 266.3 36.3968C266.2 36.4968 262.7 43.5968 258.6 52.0968L251.2 67.6968L234.1 64.4968C224.6 62.6968 216.8 61.5968 216.6 61.8968C216.4 62.1968 213.9 69.5968 211.1 78.1968L205.8 93.9968L198.7 93.8968C194.7 93.7968 186.9 93.4968 181.2 93.0968C171.5 92.4968 170.9 92.5968 170.5 94.4968C170.2 95.5968 168.7 103.197 167.1 111.297C165.5 119.497 164 126.297 163.8 126.497C163.7 126.597 155.9 127.297 146.5 127.997C137.2 128.697 129.4 129.297 129.4 129.297C129.3 129.397 128.7 137.097 128 146.497C127.3 155.797 126.7 163.597 126.6 163.797C126.4 163.897 118.9 165.497 109.9 167.297L93.5 170.597L93.8 188.197L94.1 205.797L78.3 210.997C69.6 213.897 62.2 216.397 61.9 216.597C61.6 216.797 62.7 224.597 64.5 233.997L67.7 251.097L56.1 256.697C49.7 259.697 42.6 263.097 40.3 264.097C38 265.197 36.3 266.597 36.5 267.297C41.8 283.697 46 297.397 46 298.497C46 299.197 39.5 303.997 31.6 309.097L17.3 318.397L21.8 327.897C24.2 333.197 27.5 340.297 29.1 343.697L31.9 349.997L18.7 361.097C11.4 367.297 5.59998 372.597 5.69998 372.997C5.79998 373.397 9.79998 379.797 14.5 387.297C19.2 394.797 23 401.397 23 401.997C23 402.597 17.9 408.497 11.6 415.297C1.79998 425.797 0.299978 427.697 1.29998 429.197C1.99998 430.097 6.89998 436.297 12.3 442.897L22.1 454.797L11.9 468.997L1.69998 483.197L14.4 495.297L27.1 507.497L19 522.197C14.6 530.197 11 537.197 11 537.697C11 538.197 17.1 542.997 24.5 548.397C31.9 553.797 38 558.597 38 558.997C38 559.497 35.3 566.897 32 575.597C28.7 584.197 26.1 591.397 26.2 591.497C26.4 591.597 32.8 595.197 40.5 599.497C48.2 603.697 54.9 607.597 55.4 607.997C55.9 608.497 54.6 615.797 52.2 625.197C49.9 634.197 48.4 641.797 48.8 642.197C49.2 642.497 55.8 645.397 63.5 648.397C71.2 651.497 78.1 654.397 78.9 654.897C80 655.597 79.9 658.497 78.3 672.597C77.2 681.897 76.4 689.597 76.5 689.797C76.7 689.997 84.1 691.997 93.1 694.397L109.5 698.697L109.8 716.197L110 733.797L113.8 734.297C115.8 734.597 123.6 735.597 131.1 736.597L144.8 738.297L145.3 741.897C145.6 743.897 146.7 751.697 147.7 759.197L149.5 772.997L166.9 773.197L184.4 773.497L188.8 789.997C191.2 799.097 193.3 806.597 193.5 806.797C193.6 806.897 201.3 806.097 210.5 804.997C219.7 803.797 227.6 803.297 228 803.697C228.4 804.097 231.3 810.997 234.5 818.997C237.7 826.997 240.6 833.897 241 834.297C241.4 834.697 249 833.297 257.9 830.997C266.8 828.797 274.5 827.197 275 827.497C275.4 827.797 279.3 834.297 283.5 841.997C287.7 849.697 291.5 856.197 292 856.497C292.5 856.797 299.1 854.597 306.7 851.597C314.3 848.697 321.5 845.997 322.7 845.597C324.5 844.997 326.1 846.697 335 858.697C340.6 866.297 345.7 872.397 346.2 872.197C346.8 872.097 353.7 868.397 361.6 864.097L376 856.197L387.8 868.597C394.4 875.397 400 880.997 400.3 880.997C400.9 880.997 423.2 865.297 427.5 861.897C428.1 861.497 432.1 864.097 437 868.097C441.7 871.897 447.9 876.897 450.7 879.097L456 883.197L468.1 871.897C474.7 865.597 480.5 860.397 481 860.197C481.8 859.897 486.2 862.497 502.7 872.797L510.9 877.997L522.1 864.697C528.2 857.497 533.6 851.597 534.1 851.697C534.5 851.897 541.7 855.097 550 858.897L565.1 865.897L572.3 854.697C576.3 848.497 580.5 841.997 581.5 840.197C582.6 838.497 583.9 836.997 584.5 836.997C585 836.997 592.7 839.297 601.4 841.997C610.1 844.797 617.4 846.897 617.5 846.797C617.6 846.597 621 839.597 625 831.197C629 822.897 632.9 815.997 633.5 815.997C634.6 815.997 660.4 820.497 664.7 821.497C666.7 821.997 667.2 820.797 671.9 806.797L677 791.497L652.8 767.297C639.4 753.897 628 742.997 627.3 742.997C626.7 742.997 622.7 744.997 618.5 747.497C577.7 771.697 529.7 787.197 477.5 793.197C463.4 794.797 420.7 794.797 406.5 793.197C360.9 787.997 322.2 776.697 283.5 757.297C200.3 715.597 136.8 642.797 107.5 555.497C96 521.497 90.8 493.897 89.1 458.497C83.1 333.897 142.5 216.497 246.6 147.197C332.5 89.9968 440.1 73.6968 540.9 102.597C584.9 115.197 626.5 136.997 664.5 167.397C677.8 177.997 706.5 206.797 717.4 220.497C759.6 273.597 784.8 333.997 793.2 402.497C794.9 417.097 795 466.897 793.2 480.997C786.6 533.197 770.7 580.197 745.2 622.997L743.1 626.597L767.9 651.397L792.8 676.197L807.1 671.497C815 668.897 821.7 666.597 821.9 666.397C822.1 666.297 820.8 658.597 819.1 649.397C817.4 640.197 816.3 632.297 816.7 631.997C817.2 631.697 824 628.297 832 624.497C840 620.697 846.7 617.397 846.9 617.197C847.2 617.097 845 609.497 842.1 600.397C839.2 591.197 837 583.697 837.2 583.497C837.4 583.397 843.7 579.297 851.3 574.497C858.8 569.697 865.3 565.397 865.5 564.997C865.8 564.597 862.8 557.397 859 549.097C855.1 540.797 852 533.597 852.1 533.197C852.1 532.797 857.9 527.797 865 521.997C872.1 516.197 877.9 511.197 877.9 510.697C878 510.297 873.9 503.497 868.9 495.497L859.8 480.997L871.2 468.897C877.4 462.297 882.5 456.197 882.5 455.497C882.5 454.697 877.9 448.497 872.3 441.597C866.6 434.697 862 428.797 862 428.397C862 427.997 866.5 421.497 872 413.897L881.9 400.097L869.5 388.197C862.6 381.697 857 376.097 857 375.697C857 375.397 860.6 368.497 865 360.397C869.4 352.297 873 345.497 873 345.397C873 345.297 867 340.797 859.8 335.397C852.5 330.097 846.2 325.397 845.8 325.097C845.4 324.797 847.8 317.497 851 309.097C854.3 300.597 857 293.197 857 292.597C857 291.997 850.3 287.797 842.1 283.197L827.2 274.997L831.5 258.097L835.7 241.197L819.3 234.397C806.5 229.197 803 227.397 803.4 226.097C804.2 223.097 807.3 193.997 806.8 193.497C806.6 193.197 799.1 191.097 790.3 188.797L774.2 184.497L773.5 166.897L772.8 149.197L763.6 148.097C740.4 145.197 739 144.897 738.5 142.597C738.3 141.497 737.4 135.097 736.5 128.497C735.7 121.897 734.8 114.997 734.5 113.197L733.9 109.997H716.6C699.4 109.997 699.2 109.997 698.6 107.697C698.3 106.497 696.4 99.1968 694.4 91.4968C692.4 83.7968 690.5 77.1968 690.1 76.8968C689.8 76.4968 682.8 77.0968 674.5 78.0968C666.3 79.0968 658.6 79.8968 657.5 79.9968C655.8 79.9968 654.4 77.3968 649.1 64.1968C645.6 55.5968 642.6 48.3968 642.5 48.1968C642.4 47.9968 635 49.6968 626.2 51.9968C617.3 54.1968 609.7 55.9968 609.2 55.9968C608.7 55.9968 604.9 49.7968 600.6 42.1968C596.4 34.6968 592.6 27.8968 592.2 27.1968C591.5 26.1968 587.8 27.2968 575.9 31.9968C567.5 35.2968 560.1 37.9968 559.5 37.9968C559 37.9968 554.1 31.8968 548.6 24.4968C543.2 17.0968 538.4 10.9968 537.9 10.9968C537.4 10.9968 530.4 14.5968 522.3 18.9968L507.5 26.9968L495.5 14.3968L483.5 1.69676L469.2 11.8968L455 22.0968L441.5 11.0968C434.1 4.99676 427.9 -0.00323582 427.8 -0.00323582C427.6 0.0967642 422.1 5.19676 415.5 11.4968Z" fill="gray" />

    <path class="sprocket-center" d="M433.8 370.1C404.2 373.4 379.3 395 372 423.6C369.6 433 369.4 448.7 371.5 457.8C377.6 483.7 397 503.9 422.5 511.2C431.6 513.7 450.1 514.3 458 512.1C483.5 505.3 502.8 487.5 510.7 463.5C513 456.5 513.3 453.8 513.4 442C513.4 426.9 511.9 419.9 505.8 408.3C491.9 381.9 463.3 366.7 433.8 370.1Z" fill="green" />

    <g id="sprocket-handle">
      <g id="sprocket-handle-extension">
        <path class="vertical hidden" d="M929 1020L673.303 763.5L768 676.297L929 837V1020Z" fill="gray" />
        <path class="horizontal" d="M833.5 923.997L673.303 763.5L768 676.297L1014.5 923.997H833.5Z" fill="gray" />
      </g>

      <path id="sprocket-handle-main" d="M248.4 172.697C219.4 193.397 189.6 223.497 170.6 251.297L166.6 257.097L186.2 276.797C251.7 342.697 287.7 401.097 288 441.597C288.1 466.997 271.1 504.397 241.3 543.997C224.8 566.097 188.9 605.997 173.7 619.397C170 622.597 167 625.597 167 626.097C167 627.097 175.3 638.897 180.9 645.997C193.7 662.097 206.9 676.097 222 689.397C232.1 698.397 253.1 714.697 255.8 715.797C256.6 715.997 264.5 708.897 274.8 698.797C324.7 649.697 365.2 619.797 402.5 604.497C432.3 592.197 454.4 592.797 486.7 606.797C511.1 617.397 546.5 641.697 577 668.797C581.7 672.997 617.803 708.4 686.303 776.5L781.1 689.397C686.8 594.997 669.2 576.897 665.4 572.497C634.6 537.297 610.8 499.997 601.6 472.697C597.1 459.097 595.7 449.797 596.3 437.597C598.2 397.197 633.6 340.997 698.2 275.597L717 256.697L712.3 250.097C692.6 222.297 661.6 191.297 633.7 171.597L627 166.797L608.1 185.197C576.2 216.497 551.9 236.797 525 254.797C500.1 271.397 474.5 283.097 455.2 286.497C445.1 288.397 439.2 288.297 428.4 286.497C388.5 279.497 337.1 245.597 277.9 187.297C266.6 176.097 257.1 166.997 256.8 166.997C256.5 166.997 252.7 169.497 248.4 172.697ZM461.3 355.697C476.6 359.097 490.1 366.297 501.7 377.397C519.3 394.097 528.5 413.797 529.7 437.497C531.5 472.697 512.5 504.797 480.7 520.497C459.1 531.097 436 532.697 413.3 524.997C369.3 509.997 345 464.397 356.6 418.497C358.7 410.097 367.1 393.697 373 386.297C383.2 373.597 400.9 361.697 416.7 357.097C430.8 352.897 446.6 352.397 461.3 355.697Z" fill="gray" />
    </g>

    <path id="pedal-center" d="M1022.4 994.312C1011.2 996.201 1002.3 1002.76 997.3 1013C994.4 1018.86 994 1020.55 994 1027.61C994.1 1033.57 994.6 1036.75 996.2 1040.23C1002.4 1053.84 1013.5 1061 1028.3 1061C1040.9 1061 1052.2 1054.04 1058.3 1042.51C1060.7 1038.14 1061 1036.45 1061 1027.61C1061 1018.76 1060.7 1017.07 1058.3 1012.7C1051.3 999.48 1036.6 992.026 1022.4 994.312Z" fill="green" />

    <path id="pedal" d="M787.3 947.39C773.3 950.769 759.3 961.503 753.2 973.33C747.1 985.355 747 986.548 747 1027C747 1067.45 747.1 1068.64 753.3 1080.67C759.6 1093.09 775 1104.32 789.4 1106.9C793.6 1107.7 866.3 1108 1027.9 1108C1282.1 1108 1266.2 1108.3 1278.8 1102.33C1286.5 1098.65 1298.8 1086.43 1302.3 1078.98C1307.7 1067.55 1308.1 1063.27 1307.8 1024.12C1307.5 989.53 1307.4 988.039 1305.2 981.778C1299.7 966.572 1287.8 954.546 1272.5 948.782L1266.5 946.496L1029.5 946.297C840.7 946.198 791.4 946.396 787.3 947.39ZM1035.6 959.913C1052.8 962.099 1067.8 970.249 1079.3 983.666C1096.8 1004.04 1100.1 1034.35 1087.4 1058.4C1080.5 1071.32 1070.3 1080.96 1056.5 1087.62C1045.6 1092.79 1038.4 1094.48 1026.5 1094.38C1000.3 1094.18 977.7 1079.77 966 1055.82C956.6 1036.54 956.8 1016.76 966.8 996.685C976.6 976.808 996.4 962.795 1018.9 959.913C1026.9 958.919 1027.7 958.919 1035.6 959.913ZM905.7 1003.44C922 1011.79 925.4 1032.96 912.5 1045.58C908.2 1049.86 899.8 1053.34 894 1053.34C888.1 1053.34 879.9 1049.86 875.8 1045.68C862.4 1031.97 867 1009.7 884.6 1002.65C890.8 1000.16 899.8 1000.46 905.7 1003.44ZM1171.5 1003.24C1181 1007.72 1186.4 1016.36 1186.5 1027C1186.5 1032.96 1186.1 1034.75 1183.4 1039.42C1178.2 1048.66 1167.7 1054.13 1157.7 1052.94C1135.5 1050.35 1126.2 1024.22 1142 1008.51C1144.5 1006.03 1148.6 1003.24 1151.1 1002.35C1156.6 1000.26 1166.2 1000.66 1171.5 1003.24ZM827.9 1011.39C829.8 1012.29 832.7 1014.77 834.4 1016.86C837.1 1020.24 837.5 1021.43 837.5 1027C837.5 1032.56 837.1 1033.76 834.5 1037.04C828.5 1044.39 820.5 1046.28 812.3 1042.3C803.5 1038.03 800.3 1026.7 805.5 1018.05C809.9 1010.6 820.3 1007.42 827.9 1011.39ZM1240.7 1010.7C1246.6 1012.89 1252 1020.64 1252 1027C1252 1031.57 1248.6 1037.83 1244.6 1040.91C1233.4 1049.36 1217 1041.11 1217 1027.1C1217 1014.77 1229.2 1006.33 1240.7 1010.7Z" fill="gray" />

    <g class="helper-lines hidden">
      <line x1="857.361" y1="764.64" x2="1271.35" y2="1179.65" stroke="blue" />
      <line x1="673.361" y1="764.64" x2="1087.35" y2="1179.65" stroke="blue" />
    </g>
  </g>

  <defs>
    <clipPath id="a">
      <rect width="1347" height="1367" fill="white" />
    </clipPath>
  </defs>
</svg>
              
            
!

CSS

              
                body {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
svg {
  position: relative;
  width: 240px;
}
#bike-pedal {
  overflow: visible;
}

              
            
!

JS

              
                const bikePedal = document.getElementById("bike-pedal");
let bbox = document.querySelector(".sprocket-center").getBBox();

gsap.to("#bike-pedal-g", { duration: 2, rotate: 90, svgOrigin: (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) });

bbox = document.querySelector("#pedal-center").getBBox();
gsap.to("#pedal", { duration: 2, rotate: -90, svgOrigin: (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) });
              
            
!
999px

Console