Pen Settings



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


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


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.


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.


                <!doctype html>
    <title>This is the title of the webpage!</title>
    body {
      width: 75%;
      margin: 0 auto;
      overflow-x: hidden;
    canvas {
      width: 75%;
      margin: 0 auto;
    nav>ul>li {
      margin: 0 3rem 0 0;
  <body style="text-align: center">
      <nav style="display: flex; justify-content: space-between; align-items: center;">
        <ul style="list-style-type: none; display: flex; padding: 0;">
          <li><a href="#">Nav</a>
          </li><li><a href="/">Bar</a></li>
          <li><a href="/">Links</a></li>
             style="width: 35px; height: 35px;"/>
    <hr size="3" color="#9b322b"/>
    <!-- This is a comment -->
      <h1>Examples of HTML Tags</h1>
      <hr size="3" color="#9b322b"/>
        <h2>List Tags</h2>
        <div style="display: flex; justify-content: space-around;">
            <li>ordered list item 1</li>
            <li>ordered list item 2</li>
            <li>ordered list item 3</li>
            <li>unordered list item 1</li>
            <li>unordered list item 2</li>
            <li>unordered list item 3</li>
        <h2>Section Tags</h2>
          <article>Example article.</article>
              <address>1234 Address St Nowhere, NY 12345</address>
        <h2>Inline Text Tags</h2>
            <a href="" rel="noopener noreferrer" target="_blank">An anchor tag that links to Google that opens in a new window</a><br/><br/>
            <code style="background-color: #f3f3f3;">console.log("this is code");                 </code>
            <p>This is an example paragraph. Anything in the 
              tag will appear on the page, just like this                 
              <strong>p</strong> tag and its contents.
            <p style="font-size: 18px;">This text is: <br/><strong>strong</strong>, <abbr title="abbreviation">ABBR</abbr>, <em>emphasized text</em>, <mark>Marked Text</mark>, <q>A short quote</q>, <s>strike through</s>, <small>small print</small>, <span>span text</span>, <sub>subscript</sub>, <sup>superscript</sup>, <tt>monospace</tt>, <var>let x = variable</var></p>
        <h2>Form Tags</h2>
    <label for="label">Label:</label><br/><br/>
              <label for="select">Select with optgroup</label><br/>
  <option value="1">Option 1</option>
                  <option value="2">Option 2</option></optgroup>
              <label for="select">Select without optgroup</label><br/>
  <option value="1">Option 1</option>
                  <option value="2">Option 2</option>
              <label for="email">Email</label><br/>
    <input type="email" id="email" name="email" placeholder="email"/><br/>
              <label for="phone">Phone Number</label><br/>
    <input type="number" id="phone" name="phone" placeholder="123-456-7890"/><br/>
              <label for="text">Text</label><br/>
    <input type="text" id="text" name="text" placeholder="text"/><br/>
              <label for="textarea">Text Area</label><br/>
              <textarea id="textarea" name="textarea" placeholder="textarea"><br/></textarea><br/>
              <label for="meter">Meter</label><br/>
              <meter value="2" min="0" max="10">2 out of 10</meter><br/>
               <label for="progress">Progress</label><br/>
              <progress value="22" max="100"></progress>
    <label for="taste_2">Check Box</label>
    <input type="checkbox" id="taste_2" name="checkbox" value="2">
    <legend>Fieldset Legend</legend>
      <input type="radio" name="size" id="size_1" value="radio">
      <label for="size_1">Radio</label>
      <input type="radio" name="size" id="size_2" value="buttons">
      <label for="size_2">Buttons</label>
          <label for="a">Output range</label><br/>
          <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
        <h2>Image and Multimedia Tags</h2>
            <div style="text-align: center;">
        <audio controls src=""></audio><br/>
        <img src="" alt="img" style="width: 200px;"/><br/>
        <video controls src=""></video><br/>
        <canvas id="canvas" width="300" height="300">
  An alternative text describing what your canvas displays. 
        <script>document.write(new Date().getFullYear())
//global variables
var currentSection = 0;
var parseScroll = function(event) {
  //find which <section> is in the viewport
  var sections = document.querySelectorAll("#container section");
  for (var i = 0; i < sections.length; i++) {
    var position = sections[i].getBoundingClientRect();
    if ( < window.innerHeight && position.bottom > 0) {
      //percentage of the section that is in the viewport
      if (
          (sections[i].offsetHeight - Math.abs( /
            window.innerHeight *
        ) > 50
      ) {
        currentSection = i;

//global classes
class canvasManager {
  The flag for whether an animation's context properties have been set
  is stored as an undefined or defined flag at a number corresponding to its canvas
  constructor() {
    this.canvas = document.getElementById("canvas");
    this.c = this.canvas.getContext("2d");
    var timer = false;
      function() {
        timer = window.setTimeout(
          function() {
    this.animation = 0;
    this.frameInterval = window.setInterval(this.animate.bind(this),120)
  resize() {;
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.c.width = window.innerWidth;
    this.c.height = window.innerHeight;
  flushCanvas() {
    var found = false;
    var i = 0;
    while (!found) {
      if (typeof this[i] == "undefined") {
        found = true;
      } else {
        delete this[i];
  clearFrame() {
    this.c.clearRect(0, 0, this.c.width, this.c.height);
  initAnimationOne() {
    this[0] = {
      chars: [
      updateValues: function() {
        for (var i = 0; i < Object.keys(this.columns).length; i++) {
          if(this.columns[i].yPos > this.parent.c.height){
            this.columns[i].yPos = -Object.keys(this.columns[i].chars).length*this.columnHeight
          this.columns[i].yPos += 10;
          var randomChar = this.columns[i].chars[Math.floor(Math.random()*Object.keys(this.columns[i].chars).length)]
          randomChar.char = this.chars[Math.floor(Math.random()*this.chars.length)]
            //for (var j = 0; j < Object.keys(this.columns[i].chars).length; j++) {
              //change random character...
              /*var r = this[0].columns[i].chars[j].color[0];
              var g = this[0].columns[i].chars[j].color[1];
              var b = this[0].columns[i].chars[j].color[2];
              var a = this[0].columns[i].chars[j].color[3];
              this.c.fillStyle = 'rgba('+r+','+g+','+b+','+a+')';
      columnWidth: 16,
      columnHeight: 16
    this[0].columns = {};
    for (var i = 0; i < 2*Math.floor(this.c.width / this[0].columnWidth); i++) {
      this[0].columns[i] = {};
      this[0].columns[i].chars = {};
      this[0].columns[i].yPos = Math.floor(Math.random() *this.c.height);
      //  return Math.random() * (max - min) + min;
      var maxColHeight = Math.floor(this.c.height/this[0].columnHeight);
      var minColHeight = Math.floor(.25*maxColHeight);
      var colHeight = Math.floor(Math.random()* (maxColHeight - minColHeight)+minColHeight);//Math.floor(Math.random()*25+16);
      var windowCols = this.c.width/this[0].columnWidth;
      this[0].columns[i].xPos = Math.floor(Math.random()*windowCols)*this[0].columnWidth
      var colorIncrement = Math.floor(255/colHeight);
      var opacityIncrement = 1/colHeight
      for (var j = 0; j < colHeight; j++) {
        var r = 8;
        var g = 180;
        var b =15;
        var a = opacityIncrement*Math.pow(j,1.10)
        if(j == colHeight-1){
          r = 120;
          g = 190;
          b = 120;
        this[0].columns[i].chars[j] = {
          char: this[0].chars[Math.floor(Math.random() * this[0].chars.length)],
          color: [r, g, b, a] //in rgba

    this[0].parent = this;
    //this.c.fillStyle = "#085C0F";
    this.c.shadowColor = "rgba(70,150,70)";
    this.c.shadowBlur = 3;
    //this.c.shadowOffsetX = 0;
    //this.c.shadowOffsetY = 0;
    this.c.textBaseline = "top";
    this.c.font = "600 16px sans-serif"; = "#000";
  animate() {
    //function refresh() {
      switch (currentSection) {
        case 0:
          if (typeof this[0] == "undefined") {

          for (var i = 0; i < Object.keys(this[0].columns).length; i++) {
            for (var j = 0; j < Object.keys(this[0].columns[i].chars).length; j++) {
              var r = this[0].columns[i].chars[j].color[0];
              var g = this[0].columns[i].chars[j].color[1];
              var b = this[0].columns[i].chars[j].color[2];
              var a = this[0].columns[i].chars[j].color[3];
              this.c.fillStyle = 'rgba('+r+','+g+','+b+','+a+')';

          //this.c.scale(1, -1);

        case 1:
        case 2:
        case 3:
        case 4:
          console.log("no selection");

//global events
window.addEventListener("load", init);

//use wheel when possible
//wheel works best for desktop browsers
//scroll works best for mobile browsers
//when wheel fires, cancel scroll listening
window.addEventListener("scroll", parseScroll);
window.addEventListener("wheel", function(event) {
  window.removeEventListener("scroll", parseScroll);

//global functions
function init() {

function initCanvas() {
  var canvas = new canvasManager();
  var sections = document.getElementsByTagName("section");
  for (var i = 0; i < sections.length; i++) {
    sections[i].setAttribute("data-order", i);

Made in appreciation for my favorite movie of all time. --William Green