A Pen by Alex Newman

Thumbnail
This awesome code was written by alexnewman, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright alexnewman ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Alex Newman</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  











<div class="container"></div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/alexnewman/a-pen-by-alex-newman-eppEZb */
.test {
  fill: red;
}

body {
  height: 100vh;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
  overflow: hidden;
}

#layer1, #layer2, .container {
  position: absolute;
  top: 0;
  left: 0;
        /*
right: 20px;
bottom: 20px;
background: red;*/
}

#layer2 {
  z-index: 1;
  opacity: 0.8;
}
#layer2 svg {
  margin-bottom: 5px;
}

.container {
  z-index: 100;
  right: 0;
  bottom: 0;
}


/*Downloaded from https://www.codeseek.co/alexnewman/a-pen-by-alex-newman-eppEZb */
var layers = 2;

var svgMinSize = 5;
var svgMaxSize = 50;

var svgCountMin = 700;
var svgCountMax = 800;
var colours=["f44336","E91E63","9C27B0","673AB7","3F51B5","2196F3","03A9F4","00BCD4","009688","4CAF50","8BC34A","CDDC39","FFEB3B","FFC107","FF9800","FF5722","795548","9E9E9E","607D8B","ffebee","FCE4EC","F3E5F5","EDE7F6","E8EAF6","E3F2FD","E1F5FE","E0F7FA","E0F2F1","E8F5E9","F1F8E9","F9FBE7","FFFDE7","FFF8E1","FFF3E0","FBE9E7","EFEBE9","FAFAFA","ECEFF1","ffcdd2","F8BBD0","E1BEE7","D1C4E9","C5CAE9","BBDEFB","B3E5FC","B2EBF2","B2DFDB","C8E6C9","DCEDC8","F0F4C3","FFF9C4","FFECB3","FFE0B2","FFCCBC","D7CCC8","F5F5F5","CFD8DC","ef9a9a","F48FB1","CE93D8","B39DDB","9FA8DA","90CAF9","81D4FA","80DEEA","80CBC4","A5D6A7","C5E1A5","E6EE9C","FFF59D","FFE082","FFCC80","FFAB91","BCAAA4","EEEEEE","B0BEC5","e57373","F06292","BA68C8","9575CD","7986CB","64B5F6","4FC3F7","4DD0E1","4DB6AC","81C784","AED581","DCE775","FFF176","FFD54F","FFB74D","FF8A65","A1887F","E0E0E0","90A4AE","ef5350","EC407A","AB47BC","7E57C2","5C6BC0","42A5F5","29B6F6","26C6DA","26A69A","66BB6A","9CCC65","D4E157","FFEE58","FFCA28","FFA726","FF7043","8D6E63","BDBDBD","78909C","f44336","E91E63","9C27B0","673AB7","3F51B5","2196F3","03A9F4","00BCD4","009688","4CAF50","8BC34A","CDDC39","FFEB3B","FFC107","FF9800","FF5722","795548","9E9E9E","607D8B","e53935","D81B60","8E24AA","5E35B1","3949AB","1E88E5","039BE5","00ACC1","00897B","43A047","7CB342","C0CA33","FDD835","FFB300","FB8C00","F4511E","6D4C41","757575","546E7A","d32f2f","C2185B","7B1FA2","512DA8","303F9F","1976D2","0288D1","0097A7","00796B","388E3C","689F38","AFB42B","FBC02D","FFA000","F57C00","E64A19","5D4037","616161","455A64","c62828","AD1457","6A1B9A","4527A0","283593","1565C0","0277BD","00838F","00695C","2E7D32","558B2F","9E9D24","F9A825","FF8F00","EF6C00","D84315","4E342E","424242","37474F","b71c1c","880E4F","4A148C","311B92","1A237E","0D47A1","01579B","006064","004D40","1B5E20","33691E","827717","F57F17","FF6F00","E65100","BF360C","3E2723","212121","263238","ff8a80","FF80AB","EA80FC","B388FF","8C9EFF","82B1FF","80D8FF","84FFFF","A7FFEB","B9F6CA","CCFF90","F4FF81","FFFF8D","FFE57F","FFD180","FF9E80","ff5252","FF4081","E040FB","7C4DFF","536DFE","448AFF","40C4FF","18FFFF","64FFDA","69F0AE","B2FF59","EEFF41","FFFF00","FFD740","FFAB40","FF6E40","ff1744","F50057","D500F9","651FFF","3D5AFE","2979FF","00B0FF","00E5FF","1DE9B6","00E676","76FF03","C6FF00","FFEA00","FFC400","FF9100","FF3D00","d50000","C51162","AA00FF","6200EA","304FFE","2962FF","0091EA","00B8D4","00BFA5","00C853","64DD17","AEEA00","FFD600","FFAB00","FF6D00","DD2C00"];
  var svgCount = getRandom(svgCountMax, svgCountMin);
for (var i = 0; i < layers; i++) {
  var layerNumber = i + 1;
  var layer = document.createElement('div');
  layer.id = 'layer' + layerNumber;
  document.body.appendChild(layer);
  

  
  for (var j = 0; j < svgCount; j++) {
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    var svgSize = getRandom(svgMaxSize, svgMinSize);

    createSvg();
  }
}

function createSvg() {
  var colour = colours[Math.floor(Math.random() * colours.length)];
  svg.setAttribute('height', svgSize);
  svg.setAttribute('width', svgSize);
  svg.setAttribute('style', 'fill: #' + colour + '');
  document.getElementById(layer.id).appendChild(svg);

  createCircle();
}

function createCircle() {
  var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  circle.setAttribute('cx', svgSize / 2);
  circle.setAttribute('cy', svgSize / 2);
  circle.setAttribute('r', svgSize / 2);
  svg.appendChild(circle);
}

function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

function followMouse() {
  document.body.addEventListener('mousemove', function(e) {
    // e.stopPropagation();
    var pageWidth = this.offsetWidth;
    var pageHeight = this.offsetHeight;
    var centerX = pageWidth / 2;
    var centerY = pageHeight / 2;
    var moveX = (e.offsetX - centerX) / 10;
    var moveY = (centerY - e.offsetY) / 10;
          var cacheX = moveX;
      var cacheY = moveY;
//     for (var i = 0; i < layers; i++) {
//       var test = i + 1;
      var arrayTest = [1, ''];
      var integer = getRandom(1, 3);

      var getLayer = document.getElementById('layer1');
      var layerWidth = getLayer.offsetWidth;
      var translateX = e.offsetX / 40;
      var translateY = e.offsetY / 40;
      console.log(layerWidth)
      var result = layerWidth / translateX;
      console.log(e.offsetX)
      getLayer.style.transform = "rotateX(0deg) translate3d("+ (translateX)+"px," + translateY + "px, 0)";
      getLayer.style.transition = "transform 0s ease";
//     }
    
    /*
          var arrayTest = [1, ''];
      var integer = getRandom(1, 3);*/

      var getLayer2 = document.getElementById('layer2');
      var layerWidth2 = getLayer2.offsetWidth;
      var translateX2 = e.offsetX / 30;
      var translateY2 = e.offsetY / 30;
      console.log(layerWidth)
      var result2 = layerWidth / translateY2;
      console.log(e.offsetX)
      getLayer2.style.transform = "rotateX(0deg) translate3d(-"+ translateX2 +"px, -" + translateY2 + "px, 0)";
      getLayer2.style.transition = "transform 0s ease";
    
/*    var getLayer = document.getElementById('layer1');
      getLayer.style.transform = "rotateX(" + moveX + "deg) rotateY(" + moveY + "deg)";
      getLayer.style.transition = "transform 0s ease";*/
  });
}



followMouse();

Comments