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 1373 808" preserveAspectRatio="xMinYMax meet" style="enable-background:new 0 0 1373 808;">

  <defs>

    <filter id="outline" x="-50%" y="-50%" width="200%" height="200%">      
      <feOffset result="offOut" in="SourceAlpha" dx="1.5" dy="1.5" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2"/>      
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>

    <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="4" dy="4" />
      <feColorMatrix result = "matrixOut" in ="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.8 0" />
      <feGaussianBlur result = "blurOut" in="matrixOut" stdDeviation="5"/>
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>

  <image width="1373px" height="808px" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/sonic-bg-loop-1.png" filter="url(#shadow)" />

  <g id="sonic" transform="translate(-200,430)">
    <image width="134px" height="115px" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/sonic-blur-01.png" id="sonic-img" />
  </g>

  <image  width="1373px" height="808px" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/sonic-bg-ground-1.png" filter="url(#shadow)" />
  
  <path id="path" d="M -200 430 C 60.6 498.9 120.9 515.6 181 533 C 220.7 544.5 260.4 556.4 301 564 C 362.9 575.6 426.1 577 489 579 C 522.3 580 555.7 581.2 589 582 C 652.8 583.5 716.9 583.5 780 574 C 835.6 565.6 891.8 549 935 513 C 966.9 486.4 990.2 450.4 1006 412 C 1017.8 383.4 1025.7 352.9 1027 322 C 1029.4 266.2 1009.9 210.3 976 166 C 924.8 99 841.3 59.1 757 57 C 686.3 55.2 614.7 79.4 561.7 126.2 C 508.6 173 475.3 242.3 475 313 C 474.7 374.3 498.6 434.4 536 483 C 556 509 579.7 532 605 553 C 703.2 634.4 823.4 684.5 945 723 C 1005.9 742.3 1067.7 759 1130 773 C 1179.6 784.2 1229.6 793.7 1280 800 C 1336.4 807 1393.2 810 1450 812 C 1521 814.4 1592 815.3 1663 813 H2000" filter="url(#outline)" />  
  
</svg>
              
            
!

CSS

              
                html, body {
  height: 100%;
}

body {
  background: #E1F8FF;
  overflow: hidden;
}

svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 808px;  
  visibility: hidden;
}

#path {
  fill: none;
  stroke: #FFEB3B;
  stroke-dasharray: 10, 8;
  stroke-width: 3;
}




              
            
!

JS

              
                
// Wait for images to load
$(document).ready(function() {  
  $(window).on("load", function() {
        
    // SVG MOTION PATH
    // Simply pass in the path to use. Returns values for a cubic Bezier tween.
    var values = MorphSVGPlugin.pathDataToBezier("#path");
    
    TweenLite.set("#sonic-img", { xPercent: -50, yPercent: -100 });
    
    TweenMax.to("#sonic", 1.5, {
      bezier: { values, type: "cubic", autoRotate: true },
      transformOrigin: "50% 100%",
      ease: Power2.easeIn,
      repeatDelay: 0.75,
      repeat: -1,      
    });
    
    TweenLite.to("svg", 0.5, { autoAlpha: 1 });
  });
});






              
            
!
999px

Console