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

              
                
              
            
!

CSS

              
                
              
            
!

JS

              
                'use strict';

console.clear();

// CUSTOM SHAPES BOOTSTRAP START

// create big cog shape
class BigCog extends mojs.CustomShape {
  // get shape should return svg elements of custom shape
  getShape () {
    return '<path d="M94.721318,45.5547203 L85.8661456,43.2221533 C85.5994789,41.9746437 85.2684444,40.7516552 84.8761073,39.5531877 L91.3741916,33.1041456 C93.4768736,30.8849885 94.7856858,28.3960996 93.3236169,25.8612337 C91.8554176,23.3233027 88.8730421,23.2098927 86.0745747,23.9179387 L77.2071418,26.3332644 C76.367295,25.4014636 75.4814713,24.5156398 74.5496705,23.6757931 L76.9649962,14.7991648 C77.6607816,11.8413103 77.5535019,9.0152567 75.018636,7.56238314 C72.4837701,6.09111877 69.8446897,7.49188506 67.772659,9.50567816 L61.3236169,16.0006973 C60.1282146,15.6175556 58.9082912,15.2803908 57.6607816,15.0229195 L55.3220843,6.15855172 C54.4454559,3.24667433 52.9496705,0.862 50.0224674,0.862 C47.0983295,0.862 45.5044598,3.3876705 44.7197854,6.15855172 L42.3872184,15.0229195 C41.1397088,15.2803908 39.9197854,15.6175556 38.7182529,16.0006973 L32.2722759,9.50567816 C30.0469885,7.4152567 27.5611648,6.09111877 25.0232337,7.56238314 C22.4853027,9.0152567 22.3718927,12.0098927 23.0830038,14.7991648 L25.5044598,23.6757931 C24.5695939,24.5156398 23.680705,25.3983985 22.8408582,26.3332644 L13.967295,23.9179387 C11.0033103,23.216023 8.18338697,23.3233027 6.72131801,25.8612337 C5.25311877,28.3960996 6.65388506,31.0413103 8.66461303,33.1041456 L15.1626973,39.5531877 C14.7764904,40.7547203 14.4393257,41.9746437 14.1787893,43.2221533 L5.32668199,45.5547203 C2.40867433,46.4313487 0.024,47.9271341 0.024,50.8635326 C0.024,53.7876705 2.55273563,55.3815402 5.32668199,56.1631494 L14.1787893,58.5018467 C14.4393257,59.7462912 14.7764904,60.9692797 15.1626973,62.1616169 L8.66461303,68.610659 C6.5680613,70.8328812 5.25311877,73.3309655 6.72131801,75.8627663 C8.18338697,78.4006973 11.1718927,78.5110421 13.967295,77.799931 L22.8408582,75.3907356 C23.680705,76.3225364 24.5665287,77.2114253 25.5044598,78.0420766 L23.0830038,86.918705 C22.3841533,89.8857548 22.4853027,92.702613 25.0232337,94.1616169 C27.5611648,95.6298161 30.2002452,94.2290498 32.2692107,92.2183218 L38.7182529,85.7141073 C39.9197854,86.1033793 41.1397088,86.4344138 42.3872184,86.7010805 L44.7197854,95.5501226 C45.5964138,98.4742605 47.0983295,100.858935 50.0224674,100.858935 C52.9496705,100.858935 54.5435402,98.3271341 55.3220843,95.5501226 L57.6607816,86.7010805 C58.9082912,86.4344138 60.1343448,86.1033793 61.3297471,85.7141073 L67.7757241,92.2121916 C69.9918161,94.3148736 72.4868352,95.626751 75.0278314,94.1616169 C77.5626973,92.6995479 77.669977,89.7141073 76.9680613,86.918705 L74.5527356,78.0359464 C75.4814713,77.2083602 76.367295,76.313341 77.2102069,75.3907356 L86.0776398,77.799931 C89.0477548,78.5018467 91.8584828,78.394567 93.326682,75.8627663 C94.7918161,73.3309655 93.3971801,70.6796245 91.3772567,68.610659 L84.8791724,62.1616169 C85.2715096,60.9662146 85.6025441,59.7462912 85.8692107,58.5018467 L94.7243831,56.1631494 C97.6393257,55.2895862 100.024,53.7907356 100.024,50.8635326 C100.01787,47.9301992 97.4952644,46.3455249 94.721318,45.5547203 L94.721318,45.5547203 Z M50.0194023,66.0083602 C41.6546513,66.0083602 34.8745747,59.2282835 34.8745747,50.8665977 C34.8745747,42.4957165 41.6577165,35.718705 50.0194023,35.718705 C58.3841533,35.718705 65.1703602,42.4957165 65.1703602,50.8665977 C65.1703602,59.2282835 58.3841533,66.0083602 50.0194023,66.0083602 L50.0194023,66.0083602 Z"></path>';
  }
}

// create small cog shape
class SmallCog extends mojs.CustomShape {
  // get shape should return svg elements of custom shape
  getShape () {
    return '<path d="M83.5952019,44.5983207 L74.7254698,42.2561375 C74.2576569,40.7809676 73.652619,39.3619352 72.9353059,38.0083966 L77.5728908,30.0462215 C79.044942,27.3204318 79.6811675,24.5260296 77.5728908,22.4208717 C75.4646142,20.312595 72.4955618,20.9862455 69.9444222,22.4271092 L61.8637345,27.1270692 C60.5663335,26.4596561 59.2003199,25.8920432 57.7844062,25.4585366 L55.3923231,16.3923231 C54.5003599,13.4201519 52.9752899,11 50,11 C47.0122351,11 45.3967213,13.5729708 44.5952019,16.3923231 L42.1594562,25.6518992 C40.8402239,26.0885246 39.5802479,26.62495 38.3608157,27.2611755 L30.0555778,22.4271092 C27.3235506,20.9488205 24.5322671,20.312595 22.4271092,22.4271092 C20.312595,24.5260296 20.9956018,27.4919632 22.4271092,30.052459 L27.3360256,38.4793283 C26.7497001,39.6488605 26.2319872,40.8495802 25.8296681,42.1157937 L16.4016793,44.5983207 C13.4326269,45.4871651 11,47.0122351 11,50 C11,52.9815274 13.5792083,54.6032787 16.4016793,55.3954418 L25.8296681,57.8810876 C26.235106,59.1317073 26.7465814,60.344902 27.3360256,61.517553 L22.4271092,69.9319472 C20.9519392,72.6702119 20.312595,75.4646142 22.4271092,77.5728908 C24.5322671,79.6780488 27.4982007,79.0012795 30.0555778,77.5728908 L38.3608157,72.732587 C39.5740104,73.3719312 40.8402239,73.9052379 42.1594562,74.344982 L44.5983207,83.5983207 C45.4902839,86.5736106 47.0153539,89 50.0031188,89 C52.9752899,89 54.6001599,86.4207917 55.3954418,83.5983207 L57.787525,74.5383447 C59.2096761,74.0923631 60.5694522,73.5341064 61.8668533,72.8635746 L69.947541,77.5728908 C72.6733307,79.0418233 75.4708517,79.6780488 77.5760096,77.5728908 C79.6842863,75.4646142 79.0137545,72.492443 77.5760096,69.9381847 L72.9384246,61.9884846 C73.6557377,60.634946 74.2670132,59.2127949 74.7285886,57.7313874 L83.5983207,55.3892043 C86.5673731,54.5003599 89,52.9815274 89,49.9937625 C88.9968812,47.0122351 86.4207917,45.3904838 83.5952019,44.5983207 L83.5952019,44.5983207 Z M50.2557377,60.6037585 C44.3956018,60.6037585 39.6457417,55.8570172 39.6457417,50 C39.6457417,44.1398641 44.3956018,39.3837665 50.2557377,39.3837665 C56.1096361,39.3837665 60.8594962,44.1398641 60.8594962,50 C60.8594962,55.8570172 56.1065174,60.6037585 50.2557377,60.6037585 L50.2557377,60.6037585 Z"></path>';
  }
}

// tell mojs about custom shapes
//   - 1st param - name that you will use afterwards
//   - 2nd param - class we have created
mojs.addShape('big-cog', BigCog);
mojs.addShape('small-cog', SmallCog);

// CUSTOM SHAPES BOOTSTRAP END




// now we can work with these custom shapes as we do usually

const DURATION = 2000;
const FILL = 'black';
const bigCog = new mojs.Shape({
  // name that we have defined in addShape call
  shape: 'big-cog',
  // rotate it from 0 to 360 degrees
  angle: { 0: 360 },
  // with linear easing
  easing: 'linear.none',
  // fill color
  fill: FILL,
  opacity:    .75,
  // during 
  duration: DURATION
});

const smallCog = new mojs.Shape({
  // name that we have defined in addShape call
  shape: 'small-cog',
  // rotate it from 0 to -360 degrees
  angle: { 0: -540 },
  // with linear easing
  easing: 'linear.none',
  // fill color
  fill: FILL,
  // during 
  duration: DURATION,
  // shift for the small cog
  x: 57, y: -57
});

// create main timeline
const timeline = new mojs.Timeline;

timeline.add( bigCog, smallCog );
// add main timeline to player
new MojsPlayer({ add: timeline, isPlaying: true, isRepeat: true });

              
            
!
999px

Console