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. 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

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

              
                <head>
  <link href='https://fonts.googleapis.com/css?family=Share+Tech+Mono' rel='stylesheet' type='text/css'>
</head>

<body>
    <div class="pong">
        <svg version="1.1" id="svg-pong" x="0px" y="0px"
           width="600px" height="250px" viewBox="0 0 600 250" enable-background="new 0 0 600 250" xml:space="preserve">
            <rect x="-2" y="-2.231" fill="black" width="604.49" height="254.231"/>
            <polyline class="pong-ball" fill="none" stroke="#FFFFFF" stroke-width="10" stroke-linejoin="round" stroke-miterlimit="13" points="
              14.333,91.334 100.333,6 350.334,244 585.334,19 574.334,6 326.334,242 78.334,6 14.333,64 200.333,244 450.333,6 585.334,137.001 
              474.335,244 224.335,6 14.333,210.002 54.331,244 304.331,6 554.331,244 585.334,216.997 388.334,6 163,244 14.333,91.334 "/>
             <polyline class="pong-ball-shadow" fill="none" stroke="#000000" stroke-width="12" stroke-linejoin="round" stroke-miterlimit="13" points="
              14.333,91.334 100.333,6 350.334,244 585.334,19 574.334,6 326.334,242 78.334,6 14.333,64 200.333,244 450.333,6 585.334,137.001 
              474.335,244 224.335,6 14.333,210.002 54.331,244 304.331,6 554.331,244 585.334,216.997 388.334,6 163,244 14.333,91.334 "/>
            <line class="pong-pl1" fill="none" stroke="#FFFFFF" stroke-width="10" stroke-miterlimit="13" x1="5" y1="0" x2="5" y2="250"/>
            <line class="pong-pl1-shadow" fill="none" stroke="#000000" stroke-width="12" stroke-miterlimit="13" x1="5" y1="0" x2="5" y2="250"/>
            <line class="pong-pl2" fill="none" stroke="#FFFFFF" stroke-width="10" stroke-miterlimit="13" x1="594.5" y1="0" x2="594.5" y2="250"/>
            <line class="pong-pl2-shadow" fill="none" stroke="#000000" stroke-width="12" stroke-miterlimit="13" x1="594.5" y1="0" x2="594.5" y2="250"/>
        </svg>

        <hr />

        <div class="content">
           <h1 id="pong-h1">
              Pong is SuperCool, but SVGs too !
           </h1>
        </div>
        <br />

    </div>

     <p class="intro">
         This is a simple DOS-writing-effect for titles, crafted in CSS. And a SVG Pong animation of course.
     </p>


     <div class="content">
        <h1>
          Do you like DOS or just Pong ?
        </h1>

        <svg version="1.1" x="0px" y="0px" width="600px" height="353.333px" viewBox="0 0 600 353.333" enable-background="new 0 0 600 353.333" xml:space="preserve">
        <g>
          <g>
            <rect x="3" y="7.667" fill="#441035" width="215" height="13"/>
            <rect x="228" y="7.667" fill="#441035" width="86" height="13"/>
            <rect x="407" y="7.667" fill="#441035" width="190" height="13"/>
            <rect x="325" y="7.667" fill="#441035" width="74" height="13"/>
          </g>
          <g>
            <rect x="3" y="29.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="29.667" fill="#441035" width="214" height="13"/>
            <rect x="464" y="29.667" fill="#441035" width="127" height="13"/>
            <rect x="397" y="29.667" fill="#441035" width="56" height="13"/>
          </g>
          <g>
            <rect x="523" y="72.667" fill="#441035" width="68" height="13"/>
            <rect x="350" y="72.667" fill="#441035" width="165" height="13"/>
            <rect x="91" y="72.667" fill="#441035" width="102" height="13"/>
            <rect x="3" y="72.667" fill="#441035" width="79" height="13"/>
            <rect x="201" y="72.667" fill="#441035" width="139" height="13"/>
          </g>
          <g>
            <rect x="502" y="50.667" fill="#441035" width="95" height="13"/>
            <rect x="213" y="50.667" fill="#441035" width="280" height="13"/>
            <rect x="3" y="50.667" fill="#441035" width="134" height="13"/>
            <rect x="148" y="50.667" fill="#441035" width="55" height="13"/>
          </g>
          <g>
            <rect x="3" y="94.667" fill="#441035" width="118" height="13"/>
            <rect x="130" y="94.667" fill="#441035" width="184" height="13"/>
            <rect x="407" y="94.667" fill="#441035" width="190" height="13"/>
            <rect x="325" y="94.667" fill="#441035" width="74" height="13"/>
          </g>
          <g>
            <rect x="3" y="115.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="115.667" fill="#441035" width="167" height="13"/>
            <rect x="464" y="115.667" fill="#441035" width="117" height="13"/>
            <rect x="350" y="115.667" fill="#441035" width="103" height="13"/>
          </g>
          <g>
            <rect x="528" y="159.667" fill="#441035" width="63" height="13"/>
            <rect x="382" y="159.667" fill="#441035" width="136" height="13"/>
            <rect x="287" y="159.667" fill="#441035" width="85" height="13"/>
            <rect x="3" y="159.667" fill="#441035" width="190" height="13"/>
            <rect x="201" y="159.667" fill="#441035" width="75" height="13"/>
          </g>
          <g>
            <rect x="438" y="137.667" fill="#441035" width="159" height="13"/>
            <rect x="213" y="137.667" fill="#441035" width="214" height="13"/>
            <rect x="3" y="137.667" fill="#441035" width="88" height="13"/>
            <rect x="102" y="137.667" fill="#441035" width="101" height="13"/>
          </g>
          <g>
            <rect x="3" y="180.667" fill="#441035" width="215" height="13"/>
            <rect x="228" y="180.667" fill="#441035" width="86" height="13"/>
            <rect x="407" y="180.667" fill="#441035" width="190" height="13"/>
            <rect x="325" y="180.667" fill="#441035" width="74" height="13"/>
          </g>
          <g>
            <rect x="3" y="202.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="202.667" fill="#441035" width="214" height="13"/>
            <rect x="464" y="202.667" fill="#441035" width="127" height="13"/>
            <rect x="397" y="202.667" fill="#441035" width="56" height="13"/>
          </g>
          <g>
            <rect x="523" y="245.667" fill="#441035" width="68" height="13"/>
            <rect x="350" y="245.667" fill="#441035" width="165" height="13"/>
            <rect x="91" y="245.667" fill="#441035" width="102" height="13"/>
            <rect x="3" y="245.667" fill="#441035" width="79" height="13"/>
            <rect x="201" y="245.667" fill="#441035" width="139" height="13"/>
          </g>
          <g>
            <rect x="502" y="224.667" fill="#441035" width="95" height="13"/>
            <rect x="213" y="224.667" fill="#441035" width="280" height="13"/>
            <rect x="3" y="224.667" fill="#441035" width="134" height="13"/>
            <rect x="148" y="224.667" fill="#441035" width="55" height="13"/>
          </g>
          <rect x="3" y="268.667" fill="#441035" width="114" height="13"/>
          <rect x="126" y="268.667" fill="#441035" width="178" height="13"/>
          <rect x="407" y="267.667" fill="#441035" width="190" height="13"/>
          <rect x="314" y="268.667" fill="#441035" width="72" height="13"/>
          <g>
            <rect x="3" y="289.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="289.667" fill="#441035" width="167" height="13"/>
            <rect x="464" y="289.667" fill="#441035" width="117" height="13"/>
            <rect x="350" y="289.667" fill="#441035" width="103" height="13"/>
          </g>
          <g>
            <rect x="528" y="332.667" fill="#441035" width="63" height="13"/>
            <rect x="382" y="332.667" fill="#441035" width="136" height="13"/>
            <rect x="287" y="332.667" fill="#441035" width="85" height="13"/>
            <rect x="3" y="332.667" fill="#441035" width="190" height="13"/>
            <rect x="201" y="332.667" fill="#441035" width="75" height="13"/>
          </g>
          <g>
            <rect x="438" y="310.667" fill="#441035" width="159" height="13"/>
            <rect x="213" y="310.667" fill="#441035" width="214" height="13"/>
            <rect x="3" y="310.667" fill="#441035" width="88" height="13"/>
            <rect x="102" y="310.667" fill="#441035" width="101" height="13"/>
          </g>
        </g>
        </svg>

        <h1>
          Indeed, I'd say I liked both.
        </h1>
        <svg version="1.1" x="0px" y="0px" width="600px" height="353.333px" viewBox="0 0 600 353.333" enable-background="new 0 0 600 353.333" xml:space="preserve">
        <g>
          <g>
            <rect x="3" y="7.667" fill="#441035" width="215" height="13"/>
            <rect x="228" y="7.667" fill="#441035" width="86" height="13"/>
            <rect x="407" y="7.667" fill="#441035" width="190" height="13"/>
            <rect x="325" y="7.667" fill="#441035" width="74" height="13"/>
          </g>
          <g>
            <rect x="3" y="29.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="29.667" fill="#441035" width="214" height="13"/>
            <rect x="464" y="29.667" fill="#441035" width="127" height="13"/>
            <rect x="397" y="29.667" fill="#441035" width="56" height="13"/>
          </g>
          <g>
            <rect x="523" y="72.667" fill="#441035" width="68" height="13"/>
            <rect x="350" y="72.667" fill="#441035" width="165" height="13"/>
            <rect x="91" y="72.667" fill="#441035" width="102" height="13"/>
            <rect x="3" y="72.667" fill="#441035" width="79" height="13"/>
            <rect x="201" y="72.667" fill="#441035" width="139" height="13"/>
          </g>
          <g>
            <rect x="502" y="50.667" fill="#441035" width="95" height="13"/>
            <rect x="213" y="50.667" fill="#441035" width="280" height="13"/>
            <rect x="3" y="50.667" fill="#441035" width="134" height="13"/>
            <rect x="148" y="50.667" fill="#441035" width="55" height="13"/>
          </g>
          <g>
            <rect x="3" y="94.667" fill="#441035" width="118" height="13"/>
            <rect x="130" y="94.667" fill="#441035" width="184" height="13"/>
            <rect x="407" y="94.667" fill="#441035" width="190" height="13"/>
            <rect x="325" y="94.667" fill="#441035" width="74" height="13"/>
          </g>
          <g>
            <rect x="3" y="115.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="115.667" fill="#441035" width="167" height="13"/>
            <rect x="464" y="115.667" fill="#441035" width="117" height="13"/>
            <rect x="350" y="115.667" fill="#441035" width="103" height="13"/>
          </g>
          <g>
            <rect x="528" y="159.667" fill="#441035" width="63" height="13"/>
            <rect x="382" y="159.667" fill="#441035" width="136" height="13"/>
            <rect x="287" y="159.667" fill="#441035" width="85" height="13"/>
            <rect x="3" y="159.667" fill="#441035" width="190" height="13"/>
            <rect x="201" y="159.667" fill="#441035" width="75" height="13"/>
          </g>
          <g>
            <rect x="438" y="137.667" fill="#441035" width="159" height="13"/>
            <rect x="213" y="137.667" fill="#441035" width="214" height="13"/>
            <rect x="3" y="137.667" fill="#441035" width="88" height="13"/>
            <rect x="102" y="137.667" fill="#441035" width="101" height="13"/>
          </g>
          <g>
            <rect x="3" y="180.667" fill="#441035" width="215" height="13"/>
            <rect x="228" y="180.667" fill="#441035" width="86" height="13"/>
            <rect x="407" y="180.667" fill="#441035" width="190" height="13"/>
            <rect x="325" y="180.667" fill="#441035" width="74" height="13"/>
          </g>
          <g>
            <rect x="3" y="202.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="202.667" fill="#441035" width="214" height="13"/>
            <rect x="464" y="202.667" fill="#441035" width="127" height="13"/>
            <rect x="397" y="202.667" fill="#441035" width="56" height="13"/>
          </g>
          <g>
            <rect x="523" y="245.667" fill="#441035" width="68" height="13"/>
            <rect x="350" y="245.667" fill="#441035" width="165" height="13"/>
            <rect x="91" y="245.667" fill="#441035" width="102" height="13"/>
            <rect x="3" y="245.667" fill="#441035" width="79" height="13"/>
            <rect x="201" y="245.667" fill="#441035" width="139" height="13"/>
          </g>
          <g>
            <rect x="502" y="224.667" fill="#441035" width="95" height="13"/>
            <rect x="213" y="224.667" fill="#441035" width="280" height="13"/>
            <rect x="3" y="224.667" fill="#441035" width="134" height="13"/>
            <rect x="148" y="224.667" fill="#441035" width="55" height="13"/>
          </g>
          <rect x="3" y="268.667" fill="#441035" width="114" height="13"/>
          <rect x="126" y="268.667" fill="#441035" width="178" height="13"/>
          <rect x="407" y="267.667" fill="#441035" width="190" height="13"/>
          <rect x="314" y="268.667" fill="#441035" width="72" height="13"/>
          <g>
            <rect x="3" y="289.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="289.667" fill="#441035" width="167" height="13"/>
            <rect x="464" y="289.667" fill="#441035" width="117" height="13"/>
            <rect x="350" y="289.667" fill="#441035" width="103" height="13"/>
          </g>
          <g>
            <rect x="528" y="332.667" fill="#441035" width="63" height="13"/>
            <rect x="382" y="332.667" fill="#441035" width="136" height="13"/>
            <rect x="287" y="332.667" fill="#441035" width="85" height="13"/>
            <rect x="3" y="332.667" fill="#441035" width="190" height="13"/>
            <rect x="201" y="332.667" fill="#441035" width="75" height="13"/>
          </g>
          <g>
            <rect x="438" y="310.667" fill="#441035" width="159" height="13"/>
            <rect x="213" y="310.667" fill="#441035" width="214" height="13"/>
            <rect x="3" y="310.667" fill="#441035" width="88" height="13"/>
            <rect x="102" y="310.667" fill="#441035" width="101" height="13"/>
          </g>
        </g>
        </svg>    

        <h1>
          I love Pizza with mushrooms.
        </h1>
        <svg version="1.1" x="0px" y="0px" width="600px" height="353.333px" viewBox="0 0 600 353.333" enable-background="new 0 0 600 353.333" xml:space="preserve">
        <g>
          <g>
            <rect x="3" y="7.667" fill="#441035" width="215" height="13"/>
            <rect x="228" y="7.667" fill="#441035" width="86" height="13"/>
            <rect x="407" y="7.667" fill="#441035" width="190" height="13"/>
            <rect x="325" y="7.667" fill="#441035" width="74" height="13"/>
          </g>
          <g>
            <rect x="3" y="29.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="29.667" fill="#441035" width="214" height="13"/>
            <rect x="464" y="29.667" fill="#441035" width="127" height="13"/>
            <rect x="397" y="29.667" fill="#441035" width="56" height="13"/>
          </g>
          <g>
            <rect x="523" y="72.667" fill="#441035" width="68" height="13"/>
            <rect x="350" y="72.667" fill="#441035" width="165" height="13"/>
            <rect x="91" y="72.667" fill="#441035" width="102" height="13"/>
            <rect x="3" y="72.667" fill="#441035" width="79" height="13"/>
            <rect x="201" y="72.667" fill="#441035" width="139" height="13"/>
          </g>
          <g>
            <rect x="502" y="50.667" fill="#441035" width="95" height="13"/>
            <rect x="213" y="50.667" fill="#441035" width="280" height="13"/>
            <rect x="3" y="50.667" fill="#441035" width="134" height="13"/>
            <rect x="148" y="50.667" fill="#441035" width="55" height="13"/>
          </g>
          <g>
            <rect x="3" y="94.667" fill="#441035" width="118" height="13"/>
            <rect x="130" y="94.667" fill="#441035" width="184" height="13"/>
            <rect x="407" y="94.667" fill="#441035" width="190" height="13"/>
            <rect x="325" y="94.667" fill="#441035" width="74" height="13"/>
          </g>
          <g>
            <rect x="3" y="115.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="115.667" fill="#441035" width="167" height="13"/>
            <rect x="464" y="115.667" fill="#441035" width="117" height="13"/>
            <rect x="350" y="115.667" fill="#441035" width="103" height="13"/>
          </g>
          <g>
            <rect x="528" y="159.667" fill="#441035" width="63" height="13"/>
            <rect x="382" y="159.667" fill="#441035" width="136" height="13"/>
            <rect x="287" y="159.667" fill="#441035" width="85" height="13"/>
            <rect x="3" y="159.667" fill="#441035" width="190" height="13"/>
            <rect x="201" y="159.667" fill="#441035" width="75" height="13"/>
          </g>
          <g>
            <rect x="438" y="137.667" fill="#441035" width="159" height="13"/>
            <rect x="213" y="137.667" fill="#441035" width="214" height="13"/>
            <rect x="3" y="137.667" fill="#441035" width="88" height="13"/>
            <rect x="102" y="137.667" fill="#441035" width="101" height="13"/>
          </g>
          <g>
            <rect x="3" y="180.667" fill="#441035" width="215" height="13"/>
            <rect x="228" y="180.667" fill="#441035" width="86" height="13"/>
            <rect x="407" y="180.667" fill="#441035" width="190" height="13"/>
            <rect x="325" y="180.667" fill="#441035" width="74" height="13"/>
          </g>
          <g>
            <rect x="3" y="202.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="202.667" fill="#441035" width="214" height="13"/>
            <rect x="464" y="202.667" fill="#441035" width="127" height="13"/>
            <rect x="397" y="202.667" fill="#441035" width="56" height="13"/>
          </g>
          <g>
            <rect x="523" y="245.667" fill="#441035" width="68" height="13"/>
            <rect x="350" y="245.667" fill="#441035" width="165" height="13"/>
            <rect x="91" y="245.667" fill="#441035" width="102" height="13"/>
            <rect x="3" y="245.667" fill="#441035" width="79" height="13"/>
            <rect x="201" y="245.667" fill="#441035" width="139" height="13"/>
          </g>
          <g>
            <rect x="502" y="224.667" fill="#441035" width="95" height="13"/>
            <rect x="213" y="224.667" fill="#441035" width="280" height="13"/>
            <rect x="3" y="224.667" fill="#441035" width="134" height="13"/>
            <rect x="148" y="224.667" fill="#441035" width="55" height="13"/>
          </g>
          <rect x="3" y="268.667" fill="#441035" width="114" height="13"/>
          <rect x="126" y="268.667" fill="#441035" width="178" height="13"/>
          <rect x="407" y="267.667" fill="#441035" width="190" height="13"/>
          <rect x="314" y="268.667" fill="#441035" width="72" height="13"/>
          <g>
            <rect x="3" y="289.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="289.667" fill="#441035" width="167" height="13"/>
            <rect x="464" y="289.667" fill="#441035" width="117" height="13"/>
            <rect x="350" y="289.667" fill="#441035" width="103" height="13"/>
          </g>
          <g>
            <rect x="528" y="332.667" fill="#441035" width="63" height="13"/>
            <rect x="382" y="332.667" fill="#441035" width="136" height="13"/>
            <rect x="287" y="332.667" fill="#441035" width="85" height="13"/>
            <rect x="3" y="332.667" fill="#441035" width="190" height="13"/>
            <rect x="201" y="332.667" fill="#441035" width="75" height="13"/>
          </g>
          <g>
            <rect x="438" y="310.667" fill="#441035" width="159" height="13"/>
            <rect x="213" y="310.667" fill="#441035" width="214" height="13"/>
            <rect x="3" y="310.667" fill="#441035" width="88" height="13"/>
            <rect x="102" y="310.667" fill="#441035" width="101" height="13"/>
          </g>
        </g>
        </svg>

        <h1>
          I'm going to take a shower.
        </h1>
        <svg version="1.1" x="0px" y="0px" width="600px" height="353.333px" viewBox="0 0 600 353.333" enable-background="new 0 0 600 353.333" xml:space="preserve">
        <g>
          <g>
            <rect x="3" y="7.667" fill="#441035" width="215" height="13"/>
            <rect x="228" y="7.667" fill="#441035" width="86" height="13"/>
            <rect x="407" y="7.667" fill="#441035" width="190" height="13"/>
            <rect x="325" y="7.667" fill="#441035" width="74" height="13"/>
          </g>
          <g>
            <rect x="3" y="29.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="29.667" fill="#441035" width="214" height="13"/>
            <rect x="464" y="29.667" fill="#441035" width="127" height="13"/>
            <rect x="397" y="29.667" fill="#441035" width="56" height="13"/>
          </g>
          <g>
            <rect x="523" y="72.667" fill="#441035" width="68" height="13"/>
            <rect x="350" y="72.667" fill="#441035" width="165" height="13"/>
            <rect x="91" y="72.667" fill="#441035" width="102" height="13"/>
            <rect x="3" y="72.667" fill="#441035" width="79" height="13"/>
            <rect x="201" y="72.667" fill="#441035" width="139" height="13"/>
          </g>
          <g>
            <rect x="502" y="50.667" fill="#441035" width="95" height="13"/>
            <rect x="213" y="50.667" fill="#441035" width="280" height="13"/>
            <rect x="3" y="50.667" fill="#441035" width="134" height="13"/>
            <rect x="148" y="50.667" fill="#441035" width="55" height="13"/>
          </g>
          <g>
            <rect x="3" y="94.667" fill="#441035" width="118" height="13"/>
            <rect x="130" y="94.667" fill="#441035" width="184" height="13"/>
            <rect x="407" y="94.667" fill="#441035" width="190" height="13"/>
            <rect x="325" y="94.667" fill="#441035" width="74" height="13"/>
          </g>
          <g>
            <rect x="3" y="115.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="115.667" fill="#441035" width="167" height="13"/>
            <rect x="464" y="115.667" fill="#441035" width="117" height="13"/>
            <rect x="350" y="115.667" fill="#441035" width="103" height="13"/>
          </g>
          <g>
            <rect x="528" y="159.667" fill="#441035" width="63" height="13"/>
            <rect x="382" y="159.667" fill="#441035" width="136" height="13"/>
            <rect x="287" y="159.667" fill="#441035" width="85" height="13"/>
            <rect x="3" y="159.667" fill="#441035" width="190" height="13"/>
            <rect x="201" y="159.667" fill="#441035" width="75" height="13"/>
          </g>
          <g>
            <rect x="438" y="137.667" fill="#441035" width="159" height="13"/>
            <rect x="213" y="137.667" fill="#441035" width="214" height="13"/>
            <rect x="3" y="137.667" fill="#441035" width="88" height="13"/>
            <rect x="102" y="137.667" fill="#441035" width="101" height="13"/>
          </g>
          <g>
            <rect x="3" y="180.667" fill="#441035" width="215" height="13"/>
            <rect x="228" y="180.667" fill="#441035" width="86" height="13"/>
            <rect x="407" y="180.667" fill="#441035" width="190" height="13"/>
            <rect x="325" y="180.667" fill="#441035" width="74" height="13"/>
          </g>
          <g>
            <rect x="3" y="202.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="202.667" fill="#441035" width="214" height="13"/>
            <rect x="464" y="202.667" fill="#441035" width="127" height="13"/>
            <rect x="397" y="202.667" fill="#441035" width="56" height="13"/>
          </g>
          <g>
            <rect x="523" y="245.667" fill="#441035" width="68" height="13"/>
            <rect x="350" y="245.667" fill="#441035" width="165" height="13"/>
            <rect x="91" y="245.667" fill="#441035" width="102" height="13"/>
            <rect x="3" y="245.667" fill="#441035" width="79" height="13"/>
            <rect x="201" y="245.667" fill="#441035" width="139" height="13"/>
          </g>
          <g>
            <rect x="502" y="224.667" fill="#441035" width="95" height="13"/>
            <rect x="213" y="224.667" fill="#441035" width="280" height="13"/>
            <rect x="3" y="224.667" fill="#441035" width="134" height="13"/>
            <rect x="148" y="224.667" fill="#441035" width="55" height="13"/>
          </g>
          <rect x="3" y="268.667" fill="#441035" width="114" height="13"/>
          <rect x="126" y="268.667" fill="#441035" width="178" height="13"/>
          <rect x="407" y="267.667" fill="#441035" width="190" height="13"/>
          <rect x="314" y="268.667" fill="#441035" width="72" height="13"/>
          <g>
            <rect x="3" y="289.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="289.667" fill="#441035" width="167" height="13"/>
            <rect x="464" y="289.667" fill="#441035" width="117" height="13"/>
            <rect x="350" y="289.667" fill="#441035" width="103" height="13"/>
          </g>
          <g>
            <rect x="528" y="332.667" fill="#441035" width="63" height="13"/>
            <rect x="382" y="332.667" fill="#441035" width="136" height="13"/>
            <rect x="287" y="332.667" fill="#441035" width="85" height="13"/>
            <rect x="3" y="332.667" fill="#441035" width="190" height="13"/>
            <rect x="201" y="332.667" fill="#441035" width="75" height="13"/>
          </g>
          <g>
            <rect x="438" y="310.667" fill="#441035" width="159" height="13"/>
            <rect x="213" y="310.667" fill="#441035" width="214" height="13"/>
            <rect x="3" y="310.667" fill="#441035" width="88" height="13"/>
            <rect x="102" y="310.667" fill="#441035" width="101" height="13"/>
          </g>
        </g>
        </svg>

        <h1>
         See you space cowboy...
        </h1>
        <svg version="1.1" x="0px" y="0px" width="600px" height="353.333px" viewBox="0 0 600 353.333" enable-background="new 0 0 600 353.333" xml:space="preserve">
        <g>
          <g>
            <rect x="3" y="7.667" fill="#441035" width="215" height="13"/>
            <rect x="228" y="7.667" fill="#441035" width="86" height="13"/>
            <rect x="407" y="7.667" fill="#441035" width="190" height="13"/>
            <rect x="325" y="7.667" fill="#441035" width="74" height="13"/>
          </g>
          <g>
            <rect x="3" y="29.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="29.667" fill="#441035" width="214" height="13"/>
            <rect x="464" y="29.667" fill="#441035" width="127" height="13"/>
            <rect x="397" y="29.667" fill="#441035" width="56" height="13"/>
          </g>
          <g>
            <rect x="523" y="72.667" fill="#441035" width="68" height="13"/>
            <rect x="350" y="72.667" fill="#441035" width="165" height="13"/>
            <rect x="91" y="72.667" fill="#441035" width="102" height="13"/>
            <rect x="3" y="72.667" fill="#441035" width="79" height="13"/>
            <rect x="201" y="72.667" fill="#441035" width="139" height="13"/>
          </g>
          <g>
            <rect x="502" y="50.667" fill="#441035" width="95" height="13"/>
            <rect x="213" y="50.667" fill="#441035" width="280" height="13"/>
            <rect x="3" y="50.667" fill="#441035" width="134" height="13"/>
            <rect x="148" y="50.667" fill="#441035" width="55" height="13"/>
          </g>
          <g>
            <rect x="3" y="94.667" fill="#441035" width="118" height="13"/>
            <rect x="130" y="94.667" fill="#441035" width="184" height="13"/>
            <rect x="407" y="94.667" fill="#441035" width="190" height="13"/>
            <rect x="325" y="94.667" fill="#441035" width="74" height="13"/>
          </g>
          <g>
            <rect x="3" y="115.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="115.667" fill="#441035" width="167" height="13"/>
            <rect x="464" y="115.667" fill="#441035" width="117" height="13"/>
            <rect x="350" y="115.667" fill="#441035" width="103" height="13"/>
          </g>
          <g>
            <rect x="528" y="159.667" fill="#441035" width="63" height="13"/>
            <rect x="382" y="159.667" fill="#441035" width="136" height="13"/>
            <rect x="287" y="159.667" fill="#441035" width="85" height="13"/>
            <rect x="3" y="159.667" fill="#441035" width="190" height="13"/>
            <rect x="201" y="159.667" fill="#441035" width="75" height="13"/>
          </g>
          <g>
            <rect x="438" y="137.667" fill="#441035" width="159" height="13"/>
            <rect x="213" y="137.667" fill="#441035" width="214" height="13"/>
            <rect x="3" y="137.667" fill="#441035" width="88" height="13"/>
            <rect x="102" y="137.667" fill="#441035" width="101" height="13"/>
          </g>
          <g>
            <rect x="3" y="180.667" fill="#441035" width="215" height="13"/>
            <rect x="228" y="180.667" fill="#441035" width="86" height="13"/>
            <rect x="407" y="180.667" fill="#441035" width="190" height="13"/>
            <rect x="325" y="180.667" fill="#441035" width="74" height="13"/>
          </g>
          <g>
            <rect x="3" y="202.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="202.667" fill="#441035" width="214" height="13"/>
            <rect x="464" y="202.667" fill="#441035" width="127" height="13"/>
            <rect x="397" y="202.667" fill="#441035" width="56" height="13"/>
          </g>
          <g>
            <rect x="523" y="245.667" fill="#441035" width="68" height="13"/>
            <rect x="350" y="245.667" fill="#441035" width="165" height="13"/>
            <rect x="91" y="245.667" fill="#441035" width="102" height="13"/>
            <rect x="3" y="245.667" fill="#441035" width="79" height="13"/>
            <rect x="201" y="245.667" fill="#441035" width="139" height="13"/>
          </g>
          <g>
            <rect x="502" y="224.667" fill="#441035" width="95" height="13"/>
            <rect x="213" y="224.667" fill="#441035" width="280" height="13"/>
            <rect x="3" y="224.667" fill="#441035" width="134" height="13"/>
            <rect x="148" y="224.667" fill="#441035" width="55" height="13"/>
          </g>
          <rect x="3" y="268.667" fill="#441035" width="114" height="13"/>
          <rect x="126" y="268.667" fill="#441035" width="178" height="13"/>
          <rect x="407" y="267.667" fill="#441035" width="190" height="13"/>
          <rect x="314" y="268.667" fill="#441035" width="72" height="13"/>
          <g>
            <rect x="3" y="289.667" fill="#441035" width="159" height="13"/>
            <rect x="173" y="289.667" fill="#441035" width="167" height="13"/>
            <rect x="464" y="289.667" fill="#441035" width="117" height="13"/>
            <rect x="350" y="289.667" fill="#441035" width="103" height="13"/>
          </g>
          <g>
            <rect x="528" y="332.667" fill="#441035" width="63" height="13"/>
            <rect x="382" y="332.667" fill="#441035" width="136" height="13"/>
            <rect x="287" y="332.667" fill="#441035" width="85" height="13"/>
            <rect x="3" y="332.667" fill="#441035" width="190" height="13"/>
            <rect x="201" y="332.667" fill="#441035" width="75" height="13"/>
          </g>
          <g>
            <rect x="438" y="310.667" fill="#441035" width="159" height="13"/>
            <rect x="213" y="310.667" fill="#441035" width="214" height="13"/>
            <rect x="3" y="310.667" fill="#441035" width="88" height="13"/>
            <rect x="102" y="310.667" fill="#441035" width="101" height="13"/>
          </g>
        </g>
        </svg>

    </div>
  

</body>
              
            
!

CSS

              
                @import "compass/css3";

// h1 style for the titles animation
h1 {
  text-align: left;
  overflow: hidden;
  line-height: 36px;
  height: 36px!important;
  border-right: 0px solid #441035;
  font-size: 32px;
  visibility: hidden;
  width: 0%;
  text-wrap: none;
  white-space: nowrap;
}
h1.showed {
  width: 100%;
  animation: overflow 1.9s ease-in;
  visibility: visible;
} 
// the keyframe animation for titles
@keyframes overflow {
    0% { 
       width: 0%;
       border: 32px solid; 
    }
    30% { 
       width: 33%;
    }
    54% { 
       width: 50%;
    }
    62% { 
       width: 50%;
    }
    66% { 
       border: 32px solid; 
       width: 44%;
    }
    86% { 
       border: 32px solid; 
       width: 66%;
    }
    100% {
       width: 100%;
       border: 0px solid;
    }
}


// svg pong game styles
#pong-h1 {
  color: white;
  text-align: left;
  border-color: white!important;
}
.pong-ball {
  stroke-dashoffset: -4770px;
	stroke-dasharray: 4780px;
  animation: ball 10s linear infinite;
}
.pong-ball-shadow {
  stroke-dashoffset: -4780px;
	stroke-dasharray: 4780px;
  animation: shadow 10s linear infinite;
}
.pong-pl1 {
  stroke-dashoffset: -200px;
	stroke-dasharray: 250px;
  animation: pl1 10s linear infinite;
}
.pong-pl1-shadow {
  stroke-dashoffset: -250px;
	stroke-dasharray: 250px;
  animation: pl1-shadow 10s linear infinite;
}
.pong-pl2 {
  stroke-dashoffset: -200px;
	stroke-dasharray: 250px;
  animation: pl2 10s linear infinite;
}
.pong-pl2-shadow {
  stroke-dashoffset: -250px;
	stroke-dasharray: 250px;
  animation: pl2-shadow 10s linear infinite;
}

// pong game keyframes animation
@keyframes ball {
    0% { stroke-dashoffset: -4765px; }
    100% { stroke-dashoffset: 15px; }
}
@keyframes shadow {
    0% { stroke-dashoffset: -4780px; }
    100% { stroke-dashoffset: 0px; }
}
@keyframes pl1 {
    0% { stroke-dashoffset: -50px; }
    10% { stroke-dashoffset: 0px; }
    38% { stroke-dashoffset: -180px; }
    42% { stroke-dashoffset: -200px; }
    70% { stroke-dashoffset: 0px; }
    80% { stroke-dashoffset: -100px; }
    100% { stroke-dashoffset: -50px; }
}
@keyframes pl1-shadow {
    0% { stroke-dashoffset: -100px; }
    10% { stroke-dashoffset: -50px; }
    38% { stroke-dashoffset: -230px; }
    42% { stroke-dashoffset: -250px; }
    70% { stroke-dashoffset: -50px; }
    80% { stroke-dashoffset: -150px; }
    100% { stroke-dashoffset: -100px; }
}
@keyframes pl2 {
    0% { stroke-dashoffset: -200px; }
    10% { stroke-dashoffset: 0px; }
    18% { stroke-dashoffset: -200px; }
    35% { stroke-dashoffset: 0px; }
    45% { stroke-dashoffset: -200px; }
    50% { stroke-dashoffset: -120px;}
    68% { stroke-dashoffset: -200px; }
    80% { stroke-dashoffset: -150px; }
    83% { stroke-dashoffset: 0px; }
    100% { stroke-dashoffset: -200px; }
}
@keyframes pl2-shadow {
    0% { stroke-dashoffset: -250px; }
    10% { stroke-dashoffset: -50px; }
    18% { stroke-dashoffset: -250px; }
    35% { stroke-dashoffset: -50px; }
    45% { stroke-dashoffset: -250px; }
    50% { stroke-dashoffset: -170px; }
    68% { stroke-dashoffset: -250px; } 
    80% { stroke-dashoffset: -200px; }
    83% { stroke-dashoffset: -50px; }
    100% { stroke-dashoffset: -250px; }
}



// not very useful style
body {
  font-family: "Share Tech Mono", sans-serif;
  background: #C55;
  color: #441035;
  line-height: 22px;
  font-size: 13px;
}
.content {
  width: 600px;
  margin: auto;
}
h1 {
  color: #441035;
  font-family: 'Share Tech Mono', sans-serif;
}
.intro {
  text-align: center;
  margin: 30px 0 50px 0 ;
  font-weight: bold;
}
.pong {
  background-color: black;
  text-align: center;
}
hr {
  width: 600px;
  margin: 0 auto !important;
}

              
            
!

JS

              
                // the JS code is needed just to trigger the H1's animation: we need to understand when an H1 enter the viewport, and start its animation:

// function to check if the h1 is in the viewport:
var ctrlClass = function () {
  var bottomDist = $(this).scrollTop() + $(window).height();
  $("h1").each(function(){
    var h1Dist = $(this).offset().top
    if( bottomDist > h1Dist ) {
      $(this).addClass('showed');
    }
  });
}

// run the function when loading or scroll:
$(document).ready(function(){
  ctrlClass();
  $(window).scroll(function (event) {
 			ctrlClass();
	});
});
  
  

              
            
!
999px

Console