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

              
                <html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <section id="section1" class="section1">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                      <h1> Hello im the first section of the page</h1>
                      <h3>Scroll down to reach the next section</h3>
                      <span class="scroll-btn">
	<a href="#">
		<span class="mouse">
			<span>
			</span>
		</span>
	</a>
  <p>Scroll down to see SVG</p>

</span>
                    </div>
                </div>
            </div>
        </section>
        <section id="section2" class="section2">
              <div class="container-fluid">
                  <div class="row">
                      <div class="col-md-4 col-md-offset-4">
                        <div class="animation-container"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
     viewBox="0 0 500 500" class="svg-margin-top svgStyle" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
    .shd1{fill:url(#SVGID_1_);}
    .blk1{fill:#231F20;}
    .ylw1{fill:#FFD132;}
    .top1{fill:#3292CE;}
    .top2{fill:#3292CE;}
    .top3{fill:#3292CE;}
    .top4{fill:#3292CE;}
    .top5{fill:#3292CE;}
    .top6{fill:#3292CE;}
    .shd2{fill:url(#SVGID_2_);}
    .shd3{fill:url(#SVGID_3_);}
    .shd4{fill:url(#SVGID_4_);}
    .shd5{opacity:0.64;fill:url(#SVGID_5_);}
    .shd6{fill:url(#SVGID_6_);}

    .blk10{fill:#FED230;}
</style>



    <!-- number6 -->

    <g id="SIXSHADOW">
        <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="155.9305" y1="519.2269" x2="364.4081" y2="110.574">
            <stop  offset="0.1336" style="stop-color:#3292CE"/>
            <stop  offset="0.2874" style="stop-color:#3290CB"/>
            <stop  offset="0.3994" style="stop-color:#318AC2"/>
            <stop  offset="0.4978" style="stop-color:#2F80B2"/>
            <stop  offset="0.562" style="stop-color:#2E77A3"/>
            <stop  offset="0.5802" style="stop-color:#2D6E95"/>
            <stop  offset="0.6171" style="stop-color:#2B617F"/>
            <stop  offset="0.6607" style="stop-color:#2A566E"/>
            <stop  offset="0.7145" style="stop-color:#294E63"/>
            <stop  offset="0.7901" style="stop-color:#284A5C"/>
            <stop  offset="1" style="stop-color:#28495A"/>
        </linearGradient>
        <path class="shd6" d="M311.1,266.4c-0.8-0.8-1.6-1.5-2.4-2.2c-0.4-0.3-0.9-0.7-1.3-1c-0.2-0.2-0.1-0.2-0.1-0.5
            c0.1-0.2,0.1-0.4,0.2-0.6c0.4-1.5,0.9-2.9,1.3-4.4c0.9-3,1.8-5.9,2.7-8.9c1.8-6,3.6-12,5.4-18c1.8-5.9,3.6-11.8,5.4-17.8
            c0.9-3,1.8-6,2.7-9c0.6-1.8,1.1-3.6,1.3-5.5c0.2-1.8,0.2-3.7-0.1-5.5c-1-6.7-5.7-11.8-11.4-14.9c-6.3-3.5-13.6-5-20.7-5.7
            c-8-0.8-16.1-0.7-24,0.7c-7.5,1.3-14.9,3.6-21.8,6.9c-7,3.3-13.6,7.5-19.5,12.5c-5.8,4.9-11,10.6-15.5,16.8
            c-4.5,6.3-8.2,13.2-11.2,20.3c-2.8,6.8-4.8,13.8-6.9,20.8c-1.8,5.9-3.6,11.8-5.4,17.8c-1.8,6-3.6,11.9-5.4,17.9
            c-1.8,5.9-3.6,11.8-5.4,17.8c-1.8,6-3.6,11.9-5.4,17.9c-1.8,5.9-3.6,11.9-5.4,17.8c-1.8,5.9-3.6,11.8-5.4,17.8
            c-1.8,5.9-3.6,11.9-5.4,17.8c-1,3.2-2,6.5-2.9,9.8c-1.1,4-1.9,8.1-2.6,12.2c-1.5,8.7-2.2,17.5-2.3,26.2
            c-0.1,8.2,0.4,16.3,1.9,24.3c1.3,7.2,3.3,14.4,6.2,21.1c2.7,6.3,6.2,12.3,10.5,17.6c4.5,5.6,9.9,10.5,15.9,14.4
            c6.1,3.9,12.9,6.7,19.9,8.5c7.4,1.8,15.2,2.4,22.8,1.7c7.7-0.6,15.3-2.5,22.4-5.7c6.9-3.1,13.3-7.4,18.7-12.8
            c5.5-5.4,9.8-11.9,12.8-19.1c1.3-3.2,2.3-6.6,3.3-10c0.9-3,1.8-5.9,2.7-8.9c1.8-6,3.6-12,5.4-18c1.8-5.9,3.6-11.8,5.4-17.8
            c1.8-6,3.6-12,5.4-18c1.8-5.9,3.6-11.8,5.4-17.8c1.8-6,3.6-11.9,5.4-17.9c1.8-5.9,3.6-11.8,5.4-17.8c1.8-6,3.6-11.9,5.4-17.9
            c2.5-8.2,3.3-16.9,2.7-25.5c-0.5-7.4-2.1-14.7-5.1-21.5C319.7,276.6,315.9,271,311.1,266.4C309.9,265.2,321.9,276.9,311.1,266.4z"
            />
    </g>

<g id="SET6" class="SET6">
    
    <g id="SIX1">
        <path class="blk1" d="M309,265.9c-10.4-10.2-24.8-15.6-41.7-15.6c-19.8,0-34.4,6.9-43.7,13.4c1.8-27.5,8.5-48.5,20-62.5
            c9.3-11.3,21.7-17.6,34.9-17.6c7.7,0,9.4,2.3,11.6,10.8c2.6,10.2,6.9,17,19,17c4.8,0,8.8-1.6,11.4-4.5c2.4-2.7,3.7-6.6,3.7-11.2
            c0-7.9-4.4-14.4-12.6-18.6c-7.3-3.7-17.6-5.7-29.8-5.7c-23,0-45.6,9.8-62.1,27c-19.8,20.7-30.3,51-30.3,87.7
            c0,26,7.1,47.9,20.6,63.2c12.7,14.5,30.7,22.5,50.8,22.5c17,0,32.9-5.9,44.8-16.6c12.9-11.6,19.7-27.5,19.7-46
            C325.5,291.4,319.8,276.4,309,265.9z M286.3,347.5c-5,8.3-13.2,12.3-25.1,12.3c-33.8,0-38.3-38.2-38.3-75.5c0-4.9,0-4.9,0.2-8.9
            c9.6-6.4,21.8-9.9,35.6-9.9c11.3,0,19.8,4,25.5,11.9c5.7,8,8.6,19.9,8.6,35.5C293,329,290.9,340,286.3,347.5z"/>
    </g>
    <g id="SIX2">
        <path class="ylw1" d="M310.2,262.2c-10.4-10.2-24.8-15.6-41.7-15.6c-19.8,0-34.4,6.9-43.7,13.4c1.8-27.5,8.5-48.5,20-62.5
            c9.3-11.3,21.7-17.6,34.9-17.6c7.7,0,9.4,2.3,11.6,10.8c2.6,10.2,6.9,17,19,17c4.8,0,8.8-1.6,11.4-4.5c2.4-2.7,3.7-6.6,3.7-11.2
            c0-7.9-4.4-14.4-12.6-18.6c-7.3-3.7-17.6-5.7-29.8-5.7c-23,0-45.6,9.8-62.1,27c-19.8,20.7-30.3,51-30.3,87.7
            c0,26,7.1,47.9,20.6,63.2c12.7,14.5,30.7,22.5,50.8,22.5c17,0,32.9-5.9,44.8-16.6c12.9-11.6,19.7-27.5,19.7-46
            C326.7,287.8,321,272.8,310.2,262.2z M294.2,309.3c0,16.1-2.1,27.1-6.6,34.6c-5,8.3-13.2,12.3-25.1,12.3
            c-33.8,0-38.3-38.2-38.3-75.5c0-4.9,0-4.9,0.2-8.9c9.6-6.4,21.8-9.9,35.6-9.9c11.3,0,19.8,4,25.5,11.9
            C291.3,281.8,294.2,293.7,294.2,309.3z"/>
    </g>
    <g id="SIX3">
        <path class="blk1" d="M311.4,258.6c-10.4-10.2-24.8-15.6-41.7-15.6c-19.8,0-34.4,6.9-43.7,13.4c1.8-27.5,8.5-48.5,20-62.5
            c9.3-11.3,21.7-17.6,34.9-17.6c7.7,0,9.4,2.3,11.6,10.8c2.6,10.2,6.9,17,19,17c4.8,0,8.8-1.6,11.4-4.5c2.4-2.7,3.7-6.6,3.7-11.2
            c0-7.9-4.4-14.4-12.6-18.6c-7.3-3.7-17.6-5.7-29.8-5.7c-23,0-45.6,9.8-62.1,27c-19.8,20.7-30.3,51-30.3,87.7
            c0,26,7.1,47.9,20.6,63.2c12.7,14.5,30.7,22.5,50.8,22.5c17,0,32.9-5.9,44.8-16.6c12.9-11.6,19.7-27.5,19.7-46
            C327.9,284.2,322.2,269.2,311.4,258.6z M295.4,305.6c0,16.1-2.1,27.1-6.6,34.6c-5,8.3-13.2,12.3-25.1,12.3
            c-33.8,0-38.3-38.2-38.3-75.5c0-4.9,0-4.9,0.2-8.9c9.6-6.4,21.8-9.9,35.6-9.9c11.3,0,19.8,4,25.5,11.9
            C292.5,278.1,295.4,290.1,295.4,305.6z"/>
    </g>
    <g id="SIX4">
        <path class="ylw1" d="M312.6,255c-10.4-10.2-24.8-15.6-41.7-15.6c-19.8,0-34.4,6.9-43.7,13.4c1.8-27.5,8.5-48.5,20-62.5
            c9.3-11.3,21.7-17.6,34.9-17.6c7.7,0,9.4,2.3,11.6,10.8c2.6,10.2,6.9,17,19,17c4.8,0,8.8-1.6,11.4-4.5c2.4-2.7,3.7-6.6,3.7-11.2
            c0-7.9-4.4-14.4-12.6-18.6c-7.3-3.7-17.6-5.7-29.8-5.7c-23,0-45.6,9.8-62.1,27c-19.8,20.7-30.3,51-30.3,87.7
            c0,26,7.1,47.9,20.6,63.2c12.7,14.5,30.7,22.5,50.8,22.5c17,0,32.9-5.9,44.8-16.6c12.9-11.6,19.7-27.5,19.7-46
            C329.1,280.6,323.4,265.5,312.6,255z M290,336.6c-5,8.3-13.2,12.3-25.1,12.3c-33.8,0-38.3-38.2-38.3-75.5c0-4.9,0-4.9,0.2-8.9
            c9.6-6.4,21.8-9.9,35.6-9.9c11.3,0,19.8,4,25.5,11.9c5.7,8,8.6,19.9,8.6,35.5C296.6,318.1,294.5,329.1,290,336.6z"/>
    </g>
    <g id="SIX5">
        <path class="blk1" d="M313.8,251.4c-10.4-10.2-24.8-15.6-41.7-15.6c-19.8,0-34.4,6.9-43.7,13.4c1.8-27.5,8.5-48.5,20-62.5
            c9.3-11.3,21.7-17.6,34.9-17.6c7.7,0,9.4,2.3,11.6,10.8c2.6,10.2,6.9,17,19,17c4.8,0,8.8-1.6,11.4-4.5c2.4-2.7,3.7-6.6,3.7-11.2
            c0-7.9-4.4-14.4-12.6-18.6c-7.3-3.7-17.6-5.7-29.8-5.7c-23,0-45.6,9.8-62.1,27c-19.8,20.7-30.3,51-30.3,87.7
            c0,26,7.1,47.9,20.6,63.2c12.7,14.5,30.7,22.5,50.8,22.5c17,0,32.9-5.9,44.8-16.6c12.9-11.6,19.7-27.5,19.7-46
            C330.3,276.9,324.6,261.9,313.8,251.4z M291.2,333c-5,8.3-13.2,12.3-25.1,12.3c-33.8,0-38.3-38.2-38.3-75.5c0-4.9,0-4.9,0.2-8.9
            c9.6-6.4,21.8-9.9,35.6-9.9c11.3,0,19.8,4,25.5,11.9c5.7,8,8.6,19.9,8.6,35.5C297.8,314.5,295.7,325.5,291.2,333z"/>
    </g>
    <g id="SIX6">
        <path class="ylw1" d="M315,247.8c-10.4-10.2-24.8-15.6-41.7-15.6c-19.8,0-34.4,6.9-43.7,13.4c1.8-27.5,8.5-48.5,20-62.5
            c9.3-11.3,21.7-17.6,34.9-17.6c7.7,0,9.4,2.3,11.6,10.8c2.6,10.2,6.9,17,19,17c4.8,0,8.8-1.6,11.4-4.5c2.4-2.7,3.7-6.6,3.7-11.2
            c0-7.9-4.4-14.4-12.6-18.6c-7.3-3.7-17.6-5.7-29.8-5.7c-23,0-45.6,9.8-62.1,27c-19.8,20.7-30.3,51-30.3,87.7
            c0,26,7.1,47.9,20.6,63.2c12.7,14.5,30.7,22.5,50.8,22.5c17,0,32.9-5.9,44.8-16.6c12.9-11.6,19.7-27.5,19.7-46
            C331.5,273.3,325.8,258.3,315,247.8z M299,294.8c0,16.1-2.1,27.1-6.6,34.6c-5,8.3-13.2,12.3-25.1,12.3
            c-33.8,0-38.3-38.2-38.3-75.5c0-4.9,0-4.9,0.2-8.9c9.6-6.4,21.8-9.9,35.6-9.9c11.3,0,19.8,4,25.5,11.9
            C296.1,267.3,299,279.2,299,294.8z"/>
    </g>
    <g id="SIX7">
        <path class="blk1" d="M316.2,244.1c-10.4-10.2-24.8-15.6-41.7-15.6c-19.8,0-34.4,6.9-43.7,13.4c1.8-27.5,8.5-48.5,20-62.5
            c9.3-11.3,21.7-17.6,34.9-17.6c7.7,0,9.4,2.3,11.6,10.8c2.6,10.2,6.9,17,19,17c4.8,0,8.8-1.6,11.4-4.5c2.4-2.7,3.7-6.6,3.7-11.2
            c0-7.9-4.4-14.4-12.6-18.6c-7.3-3.7-17.6-5.7-29.8-5.7c-23,0-45.6,9.8-62.1,27c-19.8,20.7-30.3,51-30.3,87.7
            c0,26,7.1,47.9,20.6,63.2c12.7,14.5,30.7,22.5,50.8,22.5c17,0,32.9-5.9,44.8-16.6c12.9-11.6,19.7-27.5,19.7-46
            C332.7,269.7,327,254.7,316.2,244.1z M293.6,325.7c-5,8.3-13.2,12.3-25.1,12.3c-33.8,0-38.3-38.2-38.3-75.5c0-4.9,0-4.9,0.2-8.9
            c9.6-6.4,21.8-9.9,35.6-9.9c11.3,0,19.8,4,25.5,11.9c5.7,8,8.6,19.9,8.6,35.5C300.2,307.3,298.1,318.2,293.6,325.7z"/>
    </g>
    <g id="SIX8">
        <path class="ylw1" d="M317.4,240.5C307,230.3,292.6,225,275.8,225c-19.8,0-34.4,6.9-43.7,13.4c1.8-27.5,8.5-48.5,20-62.5
            c9.3-11.3,21.7-17.6,34.9-17.6c7.7,0,9.4,2.3,11.6,10.8c2.6,10.2,6.9,17,19,17c4.8,0,8.8-1.6,11.4-4.5c2.4-2.7,3.7-6.6,3.7-11.2
            c0-7.9-4.4-14.4-12.6-18.6c-7.3-3.7-17.6-5.7-29.8-5.7c-23,0-45.6,9.8-62.1,27c-19.8,20.7-30.3,51-30.3,87.7
            c0,26,7.1,47.9,20.6,63.2c12.7,14.5,30.7,22.5,50.8,22.5c17,0,32.9-5.9,44.8-16.6c12.9-11.6,19.7-27.5,19.7-46
            C334,266.1,328.2,251.1,317.4,240.5z M294.8,322.1c-5,8.3-13.2,12.3-25.1,12.3c-33.8,0-38.3-38.2-38.3-75.5c0-4.9,0-4.9,0.2-8.9
            c9.6-6.4,21.8-9.9,35.6-9.9c11.3,0,19.8,4,25.5,11.9c5.7,8,8.6,19.9,8.6,35.5C301.4,303.6,299.3,314.6,294.8,322.1z"/>
    </g>
    <g id="SIX9">
        <path class="blk1" d="M318.7,236.9c-10.4-10.2-24.8-15.6-41.7-15.6c-19.8,0-34.4,6.9-43.7,13.4c1.8-27.5,8.5-48.5,20-62.5
            c9.3-11.3,21.7-17.6,34.9-17.6c7.7,0,9.4,2.3,11.6,10.8c2.6,10.2,6.9,17,19,17c4.8,0,8.8-1.6,11.4-4.5c2.4-2.7,3.7-6.6,3.7-11.2
            c0-7.9-4.4-14.4-12.6-18.6c-7.3-3.7-17.6-5.7-29.8-5.7c-23,0-45.6,9.8-62.1,27c-19.8,20.7-30.3,51-30.3,87.7
            c0,26,7.1,47.9,20.6,63.2c12.7,14.5,30.7,22.5,50.8,22.5c17,0,32.9-5.9,44.8-16.6c12.9-11.6,19.7-27.5,19.7-46
            C335.2,262.5,329.5,247.4,318.7,236.9z M302.6,283.9c0,16.1-2.1,27.1-6.6,34.6c-5,8.3-13.2,12.3-25.1,12.3
            c-33.8,0-38.3-38.2-38.3-75.5c0-4.9,0-4.9,0.2-8.9c9.6-6.4,21.8-9.9,35.6-9.9c11.3,0,19.8,4,25.5,11.9
            C299.7,256.4,302.6,268.3,302.6,283.9z"/>
    </g>
    <g id="SIX10">
        <path class="ylw1" d="M319.9,233.3c-10.4-10.2-24.8-15.6-41.7-15.6c-19.8,0-34.4,6.9-43.7,13.4c1.8-27.5,8.5-48.5,20-62.5
            c9.3-11.3,21.7-17.6,34.9-17.6c7.7,0,9.4,2.3,11.6,10.8c2.6,10.2,6.9,17,19,17c4.8,0,8.8-1.6,11.4-4.5c2.4-2.7,3.7-6.6,3.7-11.2
            c0-7.9-4.4-14.4-12.6-18.6c-7.3-3.7-17.6-5.7-29.8-5.7c-23,0-45.6,9.8-62.1,27c-19.8,20.7-30.3,51-30.3,87.7
            c0,26,7.1,47.9,20.6,63.2c12.7,14.5,30.7,22.5,50.8,22.5c17,0,32.9-5.9,44.8-16.6c12.9-11.6,19.7-27.5,19.7-46
            C336.4,258.8,330.7,243.8,319.9,233.3z M303.8,280.3c0,16.1-2.1,27.1-6.6,34.6c-5,8.3-13.2,12.3-25.1,12.3
            c-33.8,0-38.3-38.2-38.3-75.5c0-4.9,0-4.9,0.2-8.9c9.6-6.4,21.8-9.9,35.6-9.9c11.3,0,19.8,4,25.5,11.9
            C300.9,252.8,303.8,264.7,303.8,280.3z"/>
    </g>
    <g id="SIX11">
        <path class="blk1" d="M321.1,229.7c-10.4-10.2-24.8-15.6-41.7-15.6c-19.8,0-34.4,6.9-43.7,13.4c1.8-27.5,8.5-48.5,20-62.5
            c9.3-11.3,21.7-17.6,34.9-17.6c7.7,0,9.4,2.3,11.6,10.8c2.6,10.2,6.9,17,19,17c4.8,0,8.8-1.6,11.4-4.5c2.4-2.7,3.7-6.6,3.7-11.2
            c0-7.9-4.4-14.4-12.6-18.6c-7.3-3.7-17.6-5.7-29.8-5.7c-23,0-45.6,9.8-62.1,27c-19.8,20.7-30.3,51-30.3,87.7
            c0,26,7.1,47.9,20.6,63.2c12.7,14.5,30.7,22.5,50.8,22.5c17,0,32.9-5.9,44.8-16.6c12.9-11.6,19.7-27.5,19.7-46
            C337.6,255.2,331.9,240.2,321.1,229.7z M298.4,311.3c-5,8.3-13.2,12.3-25.1,12.3c-33.8,0-38.3-38.2-38.3-75.5c0-4.9,0-4.9,0.2-8.9
            c9.6-6.4,21.8-9.9,35.6-9.9c11.3,0,19.8,4,25.5,11.9c5.7,8,8.6,19.9,8.6,35.5C305,292.8,302.9,303.8,298.4,311.3z"/>
    </g>
    <g id="SIX12">
        <path class="ylw1" d="M322.3,226c-10.4-10.2-24.8-15.6-41.7-15.6c-19.8,0-34.4,6.9-43.7,13.4c1.8-27.5,8.5-48.5,20-62.5
            c9.3-11.3,21.7-17.6,34.9-17.6c7.7,0,9.4,2.3,11.6,10.8c2.6,10.2,6.9,17,19,17c4.8,0,8.8-1.6,11.4-4.5c2.4-2.7,3.7-6.6,3.7-11.2
            c0-7.9-4.4-14.4-12.6-18.6c-7.3-3.7-17.6-5.7-29.8-5.7c-23,0-45.6,9.8-62.1,27c-19.8,20.7-30.3,51-30.3,87.7
            c0,26,7.1,47.9,20.6,63.2c12.7,14.5,30.7,22.5,50.8,22.5c17,0,32.9-5.9,44.8-16.6c12.9-11.6,19.7-27.5,19.7-46
            C338.8,251.6,333.1,236.6,322.3,226z M299.6,307.6c-5,8.3-13.2,12.3-25.1,12.3c-33.8,0-38.3-38.2-38.3-75.5c0-4.9,0-4.9,0.2-8.9
            c9.6-6.4,21.8-9.9,35.6-9.9c11.3,0,19.8,4,25.5,11.9c5.7,8,8.6,19.9,8.6,35.5C306.2,289.2,304.1,300.1,299.6,307.6z"/>
    </g>
    <g id="SIX13_1_">
        <path class="blk1" d="M273.5,219.3c-14.6,0-27.6,3.7-37.7,10.7c-0.3,0.2-0.6,0.6-0.6,1.1l0,0.7c-0.2,4-0.2,4-0.2,9.1
            c0,15.9,0.7,36.2,6.4,51.8c6.4,17.5,18,26.4,34.7,26.4c12.9,0,21.9-4.5,27.4-13.6c4.8-7.9,7-19.4,7-36c0-16.2-3.1-28.7-9.2-37.1
            C295,223.7,285.7,219.3,273.5,219.3z M237.9,231.9c9.6-6.4,21.8-9.9,35.6-9.9c11.3,0,19.8,4,25.5,11.9c5.7,8,8.6,19.9,8.6,35.5
            c0,16.1-2.1,27.1-6.6,34.6c-5,8.3-13.2,12.3-25.1,12.3c-33.8,0-38.3-38.2-38.3-75.5"/>
        <path class="blk1" d="M341.6,263c0-18-5.8-33.1-16.6-43.8c-10.5-10.3-25-15.7-42-15.7c-20,0-34.6,7-44,13.5
            c0.5-8.3,1.5-16.1,3-23.2c3.4-14.9,8.9-27,16.3-36.1c9.3-11.3,21.7-17.6,34.9-17.6c7.7,0,9.4,2.3,11.6,10.8c2.6,10.2,6.9,17,19,17
            c4.8,0,8.8-1.6,11.4-4.5c1.5-1.6,2.5-3.7,3.1-6c1.4-2.5,2.1-5.5,2.1-8.9c0-8-4.4-14.5-12.7-18.7c-7.4-3.8-17.8-5.7-30.1-5.7
            c-23.2,0-46,9.9-62.6,27.2c-15.6,16.3-25.5,38.6-29,65.2c-1.3,8.3-1.9,17-1.9,26.2c0,26,7.1,47.9,20.6,63.2
            c12.7,14.5,30.7,22.5,50.8,22.5c17,0,32.9-5.9,44.8-16.6c5.6-5.1,10.1-10.9,13.4-17.5C339,285.2,341.6,274.6,341.6,263z
             M304.6,299.9c-4.9,9.8-13.5,15.3-27.7,15.3c-36.4,0-40-42.8-40-77.5c0-3.9,0-4.8,0.1-6.9c9.8-6.7,22.3-10.1,36.4-10.1
            c23.7,0,35.6,17.1,35.6,48.8C309,281.7,307.8,292,304.6,299.9z"/>
    </g>
    
</g>
<g id="SIXtop">
        <path class="top6" d="M324.7,218.8c-10.4-10.2-24.8-15.6-41.7-15.6c-19.8,0-34.4,6.9-43.7,13.4c1.8-27.5,8.5-48.5,20-62.5
            c9.3-11.3,21.7-17.6,34.9-17.6c7.7,0,9.4,2.3,11.6,10.8c2.6,10.2,6.9,17,19,17c4.8,0,8.8-1.6,11.4-4.5c2.4-2.7,3.7-6.6,3.7-11.2
            c0-7.9-4.4-14.4-12.6-18.6c-7.3-3.7-17.6-5.7-29.8-5.7c-23,0-45.6,9.8-62.1,27c-19.8,20.7-30.3,51-30.3,87.7
            c0,26,7.1,47.9,20.6,63.2c12.7,14.5,30.7,22.5,50.8,22.5c17,0,32.9-5.9,44.8-16.6c12.9-11.6,19.7-27.5,19.7-46
            C341.2,244.4,335.5,229.3,324.7,218.8z M302,300.4c-5,8.3-13.2,12.3-25.1,12.3c-33.8,0-38.3-38.2-38.3-75.5c0-4.9,0-4.9,0.2-8.9
            c9.6-6.4,21.9-9.8,35.6-9.8c11.3,0,19.9,4,25.5,11.9c5.7,8,8.6,19.9,8.6,35.5C308.7,281.9,306.6,292.9,302,300.4z"/>
    </g>

<g id="sticker" class="sticker">
    <circle id="coin" class="blk10" cx="174.9" cy="168.9" r="23.7"/>
    <path id="notext" d="M163.5,173c0,1,0.1,1.4,0.9,1.6l1,0.3v0.4l-4.5,0v-0.4l0.9-0.3c0.7-0.2,0.9-0.6,0.9-1.6l0-11.9
        c0-1-0.2-1.2-0.9-1.3l-0.9-0.2v-0.4l3.8,0l7.8,12.7h0.1l0-10.4c0-1-0.1-1.5-0.9-1.6l-1.2-0.2v-0.4l4.7,0v0.4l-0.9,0.2
        c-0.8,0.2-0.9,0.6-0.9,1.6l0,13.9h-0.9l-8.9-14.4h-0.1L163.5,173z M176.1,169.4c0-3.9,2.6-6.2,5.5-6.2c3.2,0,5.5,2,5.5,6
        c0,3.9-2.7,6.3-5.5,6.3C178.4,175.5,176.1,173.4,176.1,169.4z M185.1,169.6c0-3.9-1.2-5.7-3.6-5.7c-2.3,0-3.5,1.7-3.5,5.2
        c0,3.9,1.2,5.8,3.6,5.8C184,174.8,185.1,172.9,185.1,169.6z M188.2,174.1c0-0.6,0.5-1.2,1.2-1.2c0.6,0,1.2,0.5,1.2,1.2
        c0,0.7-0.5,1.2-1.2,1.2C188.7,175.3,188.2,174.8,188.2,174.1z"/>
</g>
</svg>
</div>
                      
                      </div>
                  </div>
              </div>
          </section>
      
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TimelineLite.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
    </body>
</html>
              
            
!

CSS

              
                .section1 {
  background-color:#000000;
  color: #ffffff;
  height: 100vh;
}
.section2 {
  background-color:rgba(50, 147, 206, 1);
  color: #ffffff;
  height: 100vh;
}

h1, h2, h3 {
  text-align:center;
  margin-bottom:60px;
}

@-webkit-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@-moz-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
 .scroll-btn {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
}
.scroll-btn > * {
	display: inline-block;
	line-height: 18px;
	font-size: 13px;
	font-weight: normal;
	color: #7f8c8d;
	color: #ffffff;
	font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 2px;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
	color: #ffffff;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.scroll-btn .mouse {
	position: relative;
	display: block;
	width: 35px;
	height: 55px;
	margin: 0 auto 40px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 3px solid white;
	border-radius: 23px;
}
.scroll-btn .mouse > * {
	position: absolute;
	display: block;
	top: 29%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: white;
	border-radius: 50%;
	-webkit-animation: ani-mouse 2.5s linear infinite;
	-moz-animation: ani-mouse 2.5s linear infinite;
	animation: ani-mouse 2.5s linear infinite;

              
            
!

JS

              
                var NUM6Timeline = new TimelineMax();
	  NUM6Timeline.staggerFrom(".SET6>g", 0.7, { opacity:0,}, 0.15)
	.from(".top6", 2.4, {x: '-22%', y: '22%', opacity:1, },0.0)
	.from(".shd6", 6, { opacity:0}, 0)
	.from(".sticker", 1, {transformOrigin:"50% 50%", scale:0, opacity:0, ease:Back.easeOut },2.2);
	var tl6master = new TimelineMax({repeat:1,repeatDelay:2.5,})
	tl6master.to(NUM6Timeline, 2.5, {progress:1, ease:Power2.easeIn})
	$("#SET6>g,#Shd6").hover(function(){
	  tl6master.restart();
	});
              
            
!
999px

Console