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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <!--
  For Code Pen Challenge.
  February, week 2, 2020
  "Texture"

  I'm using canvas drawing to produce the effect.

  Move your mouse over texture to see what happens...

  Resizing the window automatically adjusts the text size
  and alignment (the alignment still needs a little work 😜)
-->
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap" rel="stylesheet">

<body>
  
  <canvas id="c1" class="cv"></canvas>
  <canvas id="c2" class="cv"></canvas>
  <canvas id="c3" class="cv"></canvas>
  <canvas id="c4" class="cv"></canvas>
  <canvas id="c5" class="cv"></canvas>
  <canvas id="c6" class="cv"></canvas>
  
  <canvas id="c7" class="cv2"></canvas>
  
  <div id="mouseInfo"></div>
  
  <div id="test"></div>
</body>
              
            
!

CSS

              
                body {
  background:#f0f0f5;
  overflow:hidden;
  margin:0;
  padding:0;
}

.cv {
  position:absolute;
  left:5px;
  top:5px;
  cursor:move;
  margin:0;
  padding:0;
}

.cv2 {
  position:absolute;
  left:0px;
  top:0px;
  cursor:move;
  margin:0;
  padding:0;
}



#test {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: auto;
  white-space: nowrap; 
  font-family:Alfa Slab One;
  margin:0;
  padding:0;
}

#mouseInfo {
  position:absolute;
  left:10px;
  top:3px;
  color:blue;
  background:lightyellow;
  width:200px;
  height:30px;
  display:none;
}
              
            
!

JS

              
                let w,h;

function pageSetup() {
  
  setTimeout(pageSetup2, 250);
}


function pageSetup2() {
   pageResize();
  
  // top most layer...
  const c7Nd = document.getElementById("c7");
  c7Nd.addEventListener('mousemove', captureMouse);
}


function pageResize() {
  w = window.innerWidth;
  h = window.innerHeight;
  
  drawTexture1(1, "#c2c2d6");
  drawTexture1(2, "#a3a3c2");
  drawTexture1(3, "#7575a3");
  drawTexture1(4, "#47476b");
  drawTexture1(5, "#ffdd99");
  drawTexture1(6, "#ffcc66");
  drawTextureText(7, "#e0e0eb", "Texture");
}


window.addEventListener('load', pageSetup);
window.addEventListener('resize', pageResize);



function textureSetup(nIdx, nOffset) {
  const cvs = document.getElementById("c"+nIdx);
  cvs.style.width = (w-nOffset)+"px";
  cvs.style.height = (h-nOffset)+"px";
  cvs.width = (w-nOffset);
  cvs.height = (h-nOffset);
  const vwContext = cvs.getContext('2d');
  
  return vwContext;
} // end of function textureSetup()


function drawTexture1(nIdx, sColor) {
  const vwContext = textureSetup(nIdx, 10);
  
 // vwContext.globalAlpha=0;
  vwContext.fillStyle = 'rgba(255, 0, 0, 0)';
  vwContext.fillRect(0, 0, w-2, h-2);
 // console.log("got here 1")
//  vwContext.globalAlpha=1;
  //console.log("got here 2")
  
  vwContext.fillStyle = sColor;
  
  let nTotalDots = 32000;
  
  for (let n=0;n<nTotalDots;n++) {
    const x1 = rnd(w-12);
    const y1 = rnd(h-12);
    let sz = rnd(3);
    
    if (sz < .5) {
      sz = .5;
    }
    vwContext.fillRect(x1, y1, sz, sz);
  } // next n
  //console.log("got here 3")
} // end of function drawTexture1()

let nTextWidth = 0;

function drawTextureText(nIdx, sBgColor, sText) {
  const vwContext = textureSetup(nIdx, 0);
  let nFontSize = h * .8;
  
  
  
  vwContext.fillStyle = sBgColor;
  let nRectWidth = w-2;
  let nRectHeight = h-2;
  vwContext.fillRect(0, 0, nRectWidth, nRectHeight);
    
  nTextWidth = getTextWidth(sText, nFontSize);
  let nMaxTextWidth = nRectWidth - 40;
  
  if (nTextWidth > nMaxTextWidth) {
    let pct = nMaxTextWidth / nTextWidth;
    nFontSize = nFontSize * pct;
    nTextWidth = getTextWidth(sText, nFontSize);
  } // end if
  
  const nTop = nFontSize+30; // ???
  
  vwContext.font = (nFontSize)+"px Alfa Slab One";
  
  vwContext.fillStyle = 'black'
  vwContext.textAlign = "center"
 
  vwContext.strokeStyle = "#47476b";
  vwContext.lineWidth = "8"
  vwContext.strokeText(sText,w / 2, nTop);
  
  vwContext.globalCompositeOperation = 'xor'
  vwContext.fillText(sText,w / 2, nTop);
 
} // end of function drawTextureText()



function rnd(nNum) {
  return Math.floor(Math.random() * nNum);
} // end of function rnd()


function getTextWidth(sText, nFontSize) {
  const testNd = document.getElementById("test");
  testNd.style.fontSize = (nFontSize)+"px";
  testNd.innerText = sText;
  
  return testNd.clientWidth + 1
} // end of function



function captureMouse(evt) {
  const mouseInfoNd = document.getElementById("mouseInfo");
  let sInfo = evt.clientX+ " x "+evt.clientY;
  sInfo = sInfo + "&nbsp;&nbsp;&nbsp;textWidth:"+nTextWidth+"px"
  mouseInfoNd.innerHTML = sInfo
  
  let mX = evt.clientX;
  let mY = evt.clientY;
  let nRectWidth = w-2;
  let nRectHeight = h-2;
  let xPct = mX / nRectWidth;
  let yPct = mY / nRectHeight;
  
  const nMaxImgShift = 120; // 80
  
  let nXOffset1,nXOffset2,nXOffset3;
  let nXOffset4,nXOffset5,nXOffset6;
  let nXOffset7
  
  let nYOffset1,nYOffset2,nYOffset3;
  let nYOffset4,nYOffset5,nYOffset6;
  let nYOffset7
  
  nXOffset6 = nMaxImgShift * xPct;
  nXOffset1 = nXOffset6 * -1;
  
  nYOffset6 = nMaxImgShift * yPct;
  nYOffset1 = nYOffset6 * -1;
  
  const c1Nd = document.getElementById("c1");
  const c2Nd = document.getElementById("c2");
  const c3Nd = document.getElementById("c3");
  const c4Nd = document.getElementById("c4");
  const c5Nd = document.getElementById("c5");
  const c6Nd = document.getElementById("c6");
  
  c1Nd.style.transform = "translate("+nXOffset1+"px,"+nYOffset1+"px)";
  c6Nd.style.transform = "translate("+nXOffset6+"px,"+nYOffset6+"px)";
  
  let nSpacingX = nXOffset6 / 3;
  let nSpacingY = nYOffset6 / 3;
  
  nXOffset5 = nXOffset6 - nSpacingX;
  nYOffset5 = nYOffset6 - nSpacingY;
  
  nXOffset2 = nXOffset1 + nSpacingX;
  nYOffset2 = nYOffset1 + nSpacingY;
  
  c5Nd.style.transform = "translate("+nXOffset5+"px,"+nYOffset5+"px)";
  c2Nd.style.transform = "translate("+nXOffset2+"px,"+nYOffset2+"px)";
  
  nXOffset4 = nXOffset5 - nSpacingX;
  nYOffset4 = nYOffset5 - nSpacingY;
  
  nXOffset3 = nXOffset2 + nSpacingX;
  nYOffset3 = nYOffset2 + nSpacingY;
  
  c4Nd.style.transform = "translate("+nXOffset4+"px,"+nYOffset4+"px)";
  c3Nd.style.transform = "translate("+nXOffset3+"px,"+nYOffset3+"px)";
  
} // end of function

              
            
!
999px

Console