I was watching a show and it had a scene with a challenger board that had a honeycomb pattern in it with a gradient. I randomly thought to myself that I could do that with HTML and even animate it if I wished. So, for giggles, I decided to do just that and make a quick tutorial about it.

Thought Process

Let's first cover my thought process. I immediately thought that I could do this with a PNG that had a honeycomb pattern. It's cells would be black with the lines being transparent. From there, I could use CSS's linear-gradient to get the two colors in the image. Doing some googling got me a tillable honeycomb image but I did have to use Gimp to get the transparent parts and color exchange from white to black. Here is the end result of that: Honeycomb Image From there all I had to do was get two divs and set one of the with the image as the background and the other as a linear-gradient. OK, so we are set with the logic. Let's look at the CSS.

CSS

The CSS is pretty straightforward. We first make sure that the entire page is filled when we have our elements in it. So, we set padding and margins to zero for the html and body tags. We then define some base parameters for our two core div elements. I identafy them with IDs and they are overElm and underElm. We simply set their width and height settings to 100%. In addition, we set their positions fixed so that we can use z-index to place them in the proper top and bottom order.

Now, the overElm has its background set to url("honeycomb.png"); and repeat is set for both x and y ordinates. Then, underElm has its z-index set to -100 to make certain it is below overElm. That covers the CSS section. We will do one other CSS related thing but it will be referenced in our JavaScript section. Let's cover our body tabs we need.

html, body {
    margin: 0em 0em 0em 0em;
    padding: 0em 0em 0em 0em;
}

#overElm, #underElm {
     width: 100%;
     height: 100%;
     position: fixed;
}

#overElm {
     background-image: url("honeycomb.png");
     background-repeat: repeat;
}

#underElm {
    z-index: -100;
}

Tags

This part is super straightforward and so we an quickly go to the JavaScript section in a moment. Here is the breakdown. We have two div tags and they each have their respective IDs. See? Easypeasy. See below:

<div id="overElm"></div>
<div id="underElm"></div>

JavaScript

OK, this is the most meaty part of the logic. We are going to use the setInterval JavaScript function and to create the animation. In addition, we will check to see if we want an animation at all. Before we do this we want to create a number of variables for use.

First, we get the element reference for underElm. Then, we create two color variables to be used in our linear-gradient setting. In addition, we create two color percent variables in order to drive how much gradient there actually is. Here we will use 50% for both so that they equally consume space and that there actually isn't any gradation.

We also will create a degree variable and interval rate variable. Interval rate will dictate if we want to have a static color split or animated one. From there, we setup an if check and see if our interval rate is less than 0. If it is, it sets a static linar-gradient. Or if greater than, it will animate via the setInterval function. We pass our arguments to it for usage. And we are done! You can chnge the clors, its opacity, speed, and more to get a cool look for an HTML page or even video if you manage it right. Full code and video is below.

var elm = document.getElementById("underElm");
var color1        = "#09c759";
var color2        = "#c82f46";
var color1Percent = "50%";
var color2Percent = "50%";
var degInt        = 45;
var intervalRate  = -1;  // - number means do static than intervaled degree change
                         // 20 is nice and fast  500 is gradual and lower

if (intervalRate < 0) {
    elm.style.background = "linear-gradient(" + degInt + "deg,"
                           + color1 + " " + color1Percent +","
                           + color2 + " " + color2Percent + ")";
} else {
    var interval = setInterval(function () {
        elm.style.background = "linear-gradient(" + degInt + "deg,"
                               + color1 + " " + color1Percent +","
                               + color2 + " " + color2Percent + ")";

        degInt = (degInt <= 405) ? degInt += 5 : degInt = 45;

    }, intervalRate, elm, color1, color1Percent,
                          color2, color2Percent);
}

Full HTML & Code

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Honeycomb Gradient</title>

      <style media="screen">
          html, body {
              margin: 0em 0em 0em 0em;
              padding: 0em 0em 0em 0em;
          }

          #overElm, #underElm {
              width: 100%;
              height: 100%;
              position: fixed;
          }

          #overElm {
              background-image: url("honeycomb.png");
              background-repeat: repeat;
          }

          #underElm {
              z-index: -100;
          }
      </style>
  </head>
  <body>
      <div id="overElm"></div>
      <div id="underElm"></div>

       <script type="text/javascript">
           var elm           = document.getElementById("underElm");
           var color1        = "#09c759";
           var color2        = "#c82f46";
           var color1Percent = "50%";
           var color2Percent = "50%";
           var degInt        = 45;
           var intervalRate  = -1; // - number means do static than intervaled degree change
                                   // 20 is nice and fast  500 is gradual and lower

           if (intervalRate < 0) {
               elm.style.background = "linear-gradient(" + degInt + "deg,"
                                      + color1 + " " + color1Percent +","
                                      + color2 + " " + color2Percent + ")";
           } else {
               var interval = setInterval(function () {
                   elm.style.background = "linear-gradient(" + degInt + "deg,"
                                          + color1 + " " + color1Percent +","
                                          + color2 + " " + color2Percent + ")";

                   degInt = (degInt <= 405) ? degInt += 5 : degInt = 45;

               }, intervalRate, elm, color1, color1Percent,
                                     color2, color2Percent);
           }

       </script>
  </body>
</html>

Video