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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                
<div class=grid_parent>
  
  <div class=grid-2_3_4_6>

    <!-- SVGs, inside buttons, are embedded into these divs by JS -->
        
    <div class=gridItem-01 data-fullScreen></div>
    <div class=gridItem-02 data-fullScreen></div>
    <div class=gridItem-03 data-fullScreen></div>
    <div class=gridItem-04 data-fullScreen></div>
    <div class=gridItem-05 data-fullScreen></div>
    <div class=gridItem-06 data-fullScreen></div>
    <div class=gridItem-07 data-fullScreen></div>
    <div class=gridItem-08 data-fullScreen></div>
    <div class=gridItem-09 data-fullScreen></div>
    <div class=gridItem-10 data-fullScreen></div>
    <div class=gridItem-11 data-fullScreen></div>
    <div class=gridItem-12 data-fullScreen></div>

  </div> <!-- .grid-2_3_4_6 -->
</div> <!-- .wrapper -->


<svg id=svg_defs style=display:none>
  <defs>

    <path id="andy_face" fill="var(--face)" style="filter:blur(15px)" stroke-width="12" d="m696 464 8 58-54 248-32 70-96 91-132-3-83-70-51-112-48-282 408-181 80 181Z"/>
    <path id="andy_glasses" fill="var(--spec)" d="M301 454c19-3 91-8 121 31 4 3 7 3 12 0 12-7 32-7 48 0 1 0 6 3 8 1 19-27 70-35 100-35 31 2 68 18 85 27 8 5 19 0 23 2l3 22c0 4-18 12-21 15-2 3 0 8 0 13 0 35-13 70-29 89-24 29-70 40-96 32l-22-13c-7-6-5-19-10-25-5-7-16-11-21-18-4-8-8-16-9-25v-37l-5-21c0-3-21-11-29-11-11 0-32 11-33 13 0 4 1 35-2 46-8 19-10 32-24 43l-13 16c-3 5-1 19-5 21a89 89 0 0 1-112-16c-18-18-29-42-32-67v-37c-1-5-16-5-16-10 0-4 20-28 26-33 8-8 46-23 53-23Z"/>
    <path id="andy_hair" fill="var(--hair)" d="M939 269S864 29 598 93l-83-43-109-28c-91-1-182 21-262 64l224-32C176 131 74 250 61 406l96-137-21 73-19 168 41-67 16 16-1 143 59 54-14-162 104-92-20 147a704 704 0 0 1 317-267c10 96 39 155 85 182l-21 192 90-82c24-44 38-93 41-144l26 23c-4-76-29-149-72-211l24-16-96-58h115l128 101Z"/>
    <path id="andy_outline" fill="var(--line)" d="m960 299-14 7-20-28c-54-68-131-121-219-108 50 16 96 41 141 70l-6 16c-20-10-42-14-64-16 65 70 76 179 80 274l-16 3c-4-21-8-42-16-61-10 54-29 107-53 152l-15-5v-17l-12 11c-15 46-44 64-64 67l-21 110c-16 42-37 77-71 104l-19 18c-35 46-51 48-112 48-64 0-80-2-115-48l-19-16c-34-27-55-64-71-104l-22-110c-26-8-48-28-58-53l-6 29h-16c0-45 8-100 19-149l-8 14-14-8 11-43c-24 42-40 88-48 136l-16-2c0-46 13-137 32-201-10 14-16 30-22 45l-16-5c11-45 36-99 60-144-44 51-73 114-84 181H51C24 248 200 107 320 64c-110 0-215 50-285 136-16 16-22 29-22 29l-13-8 11-24C67 94 189 45 288 24c107-21 218-3 309 62 153-64 321 32 363 213ZM317 514a752 752 0 0 1 304-232l8 9c-15 117 128 179 144 283 19-44 35-94 41-144-9-20-22-40-38-57l11-11c23 25 40 56 51 86-6-77-27-163-86-213l5-16 35 5c-38-22-80-38-123-46v-16c104-34 198 17 265 100a252 252 0 0 0-336-160h-6a424 424 0 0 0-454-6c60-32 139-56 240-45v16C282 77 72 203 62 408c42-133 154-261 416-262v16c-137 0-232 36-296 89l-4 11-44 85c53-69 138-120 258-125v16c-89 2-174 40-234 106l-6 16c-16 38-29 98-35 150 16-43 40-84 70-120l2-1c24-27 51-50 85-67l6 14c-32 16-58 38-80 64-10 16-18 37-26 59l36-43 11 13-26 32c-8 30-16 67-21 101 28-70 79-128 144-164l8 13s-6 88-9 101c0 6-11 29-16 38l6-105-38 9c9-9 25-19 41-25v-8c-35 23-66 53-91 88-16 24-29 49-37 77 4 4 12 8 16 9 8 3 7 16-11 7 7 20 22 36 42 44l-5-22c-11-22-16-53-8-104h3c5 0 10 3 10 10 0 15 1 30 3 44 2 39 16 56 34 72 17 15 35 29 46 47 10 16 13 25 11 53 0 6-8 6-8 0 0-26-3-36-11-48-12-17-27-33-43-45-8-5-15-11-19-19l27 137c11 32 27 59 49 82-3-11-4-37-3-39-5-5-8-13-8-20s8-7 8 0c0 9 10 19 18 20 6 2 5 12 0 10h-3c0 15 2 30 6 45 8 6 14 11 19 19 10 11 19 24 32 32 13 5 32 10 71 10 40 0 67 0 94-32l8-10c5-8 11-13 16-16 3-22 2-38 2-38s9-20 14-55c2-19-3-48 2-67-8-19-21-37-32-50l12 2c10 10 18 22 24 35l7-8c16-16 29-32 45-45 19-16 32-33 32-73 3-8 3-16 3-26v-19c0-6 6-8 11-10h3c8 55 5 85-8 108l-5 20c13-4 32-16 42-43h-3c-10 0-10-16 0-16h1c12 0 23-9 28-25-26-85-144-149-141-261-77 30-146 76-203 136 16 9 19 25 20 41a80 80 0 0 0-36-25c-2 3-48 38-92 97m370 82c-5 8-11 14-19 21-16 13-29 30-43 45-15 12-10 38-10 56 0 27-5 54-16 80v27c28-25 49-56 61-91l27-138ZM528 781c3-5 10 1 6 6l-3 3c-6 5-13 8-21 8 0 5-3 10-9 10-28-6-57-6-85 0-6 0-10-5-8-11-10 1-20-2-27-10-3-5 3-11 6-6h2c6 6 14 8 22 6 31-6 63-6 95 0 6 2 16 0 22-6Zm10-23-28-9H402l-20 8c-4 0-9 2-12 5-10 6-16-8-8-15 11-6 24-8 36-13 10-4 37-16 48-4 7 6 17 6 23 0 6-5 16-10 48 4l25 8c10 4 5 20-4 16Zm-55-243-3-8c3 3 6 0 8 5l3 21 2 37c1 9 5 17 9 25 5 7 16 11 21 18 5 6 8 27 8 27-1 11-8 21-21 21-4 0-9-2-14-7-5 0-6 0-8-4l-5 4a30 30 0 0 1-51 0l-5-4c0 3-5 4-9 4-4 5-8 5-13 5-13 0-19-8-21-19 0 0 0-16 3-21l13-16c16-9 16-24 24-43 3-11 0-42 0-48 3 0 8 0 10-3l3-3c-5 4-5 9-5 9v32c0 16-3 35-11 50 0 3 0 6-3 8-23 3-36 45-13 45 3 0 5 0 8-4 0 0 0-4 3-6 3-3 6-6 13-8 1 0 6 0 8 3 3 8 11 13 22 13 18 0 19-19 27-16 7 0 10 5 13 8l2 6 9 4c23 0 10-42-12-45-4 0-5-5-4-8-8-16-11-32-11-51v-31Zm2-37c1-28 16-60 91-54 27 2 51 13 70 32-19-8-44-16-76-13-36 0-71 16-84 35h-1Z"/>


    <!-- Refactored from: https://thenounproject.com/Simon%20Child on: https://thenounproject.com/term/andy-warhol/62704/-->
    <symbol id="icon-andyWarhol" viewBox="0 0 960 960">
      <use href="#andy_face"/>
      <use href="#andy_glasses"/>
      <use href="#andy_hair"/>
      <use href="#andy_outline"/>
    </symbol>
    
  </defs>
</svg>




<div class=description>

  <h1>Andy Warhol looks a scream&hellip;</h1>

  <p><i>[ This page demonstrates an alternate use of <a target=_blank title="[new window]" href="/2kool2/pen/ZEzgQRx">launch any object into full-screen method</a>. ]</i></p>

  <p>Here we are emulating Andy Warhol's Marilyn Monroe screenprints from the 1970s.<br>These prints are based on the picture taken by Gene Korman for Niagara film reel.<br>About 50 works were based on that image:</p>

  <img style="max-width:600px" loading=lazy width=600 height=240 src="https://cdn.shopify.com/s/files/1/0037/9214/2436/articles/setmarilyn.jpg?v=1561746021" alt="Andy Warhol's Marilyn (Monroe) Diptych (1962)">

  <p>If you wish to know more, start with this Art Trauma article:<br> <a rel=noopener target=_blank title="[new window]" href="https://www.artetrama.com/blogs/news/about-andy-warhols-sunday-b-morning-marilyn-monroe-series">About Andy Warhol's Marilyn Monroe</a>.</p>

  <p>We're replacing Marilyn's portrait with that of Warhol himself, based on a self-portrait photograph from 1986:</p>

  <img style="max-width:626px" loading=lazy width=698 height=900 src="https://d2jv9003bew7ag.cloudfront.net/uploads/Andy-Warhol-Self-Portrait-With-Fright-Wig-1986.jpg" alt="Andy Warhol self-portrait with fright wig (1986)">

  <p>The photo was reimagined into an SVG by Simon Child: <a rel=noopener target=_blank title="[new window]" href="https://thenounproject.com/term/andy-warhol/62704/">Andy Warhol SVG</a>.</p>

  <p>The SVG was refactored into a semi-random colour version using CSS variables, then layed-out into a 12-cell grid based on browser width.</p>

</div>



<!--  Footer include -->
[[[https://codepen.io/2kool2/pen/mKeeGM]]]
              
            
!

CSS

              
                html {box-sizing: border-box;}
*,
*::before,
*::after {box-sizing: inherit;}

body {
  margin: 0;
  text-align: center;
  font-family: sans-serif;
  line-height: 1.5;
  color: #4B3D5A;
  
  /* paper background */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' stitchTiles='stitch' numOctaves='4' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23ffe' surfaceScale='2' result='diffLight'%3E%3CfeDistantLight azimuth='35' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='1200' height='1200' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}

.description {
  margin: 2rem 1rem;
}
h1 {
  font-weight: 100;
}
p {
  max-width: 40rem;
  margin: 1rem auto;
}
img {
  display: block;
  margin: 2rem auto;
  width: 100%;
  height: auto;
}

/* Makes Chrome behave like Firefox */
[data-fullScreen]:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

/* Button is added by JS, when full-screen mode is supported */

[class^="btn-fullScreen"]::-moz-focus-inner {
  border: 0;
}
[class^="btn-fullScreen"] {
  --filter: .25rem .25rem .25rem rgba(0,0,0,.5);
  --scale: 1;
  display: block;
  width: 100%;
  padding: 10%;
  background: transparent;
  border: none;
  cursor: pointer;
}
[class^="btn-fullScreen"]:hover,
[class^="btn-fullScreen"]:focus {
  --filter: .5rem .5rem .5rem rgba(0,0,0,.25);
  --scale: 1.1;
  outline: transparent;
}
:fullscreen [class^="btn-fullScreen"],
:fullscreen [class^="btn-fullScreen"]:hover,
:fullscreen [class^="btn-fullScreen"]:focus {
  --filter: .75rem .75rem .75rem rgba(0,0,0,.75);
  --scale: 0.8;
}

.svg-andyWarhol {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(var(--filter));
  transform: scale(var(--scale));
  will-change: filter, transform;
  transition:
    filter .3s ease-out,
    transform .3s ease-out;
}


/* Grid layout */

[class^="grid-"] {
  --columns: 1;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
}
@media (min-width: 20em) { /* 320px */
  [class^="grid-2"] {
    --columns: 2;
  }
}
@media (min-width: 40em) { /* 640px */
  [class^="grid-2_3"] {
    --columns: 3;
  }
}
@media (min-width: 60em) { /* 960px */
  [class^="grid-2_3_4"] {
    --columns: 4;
  }
}
@media (min-width: 80em) { /* 1280px */
  [class^="grid-2_3_4_6"] {
    --columns: 6;
  }
}

/* Grid item */

[class^="gridItem-"] {

  /* Centre the content (button) */
  display: flex;
  align-items: center;
  justify-content: center;

  /* concrete background, light to dark gradient */
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' stitchTiles='stitch' numOctaves='4' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23ffe' surfaceScale='2' result='diffLight'%3E%3CfeDistantLight azimuth='35' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='1200' height='1200' filter='url(%23n2)' opacity='.35'/%3E%3C/svg%3E"),
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.35)),
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0));
}



/* Colouring in the boxes */

/* Background colours are preset to prevent neighbour clashes */
.gridItem-01 {background-color: #d27;}
.gridItem-02 {background-color: #18a;}
.gridItem-03 {background-color: #beb;}
.gridItem-04 {background-color: #cac;}
.gridItem-05 {background-color: #7c6;}
.gridItem-06 {background-color: #f79;}
.gridItem-07 {background-color: #d98;}
.gridItem-08 {background-color: #2cd;}
.gridItem-09 {background-color: #ecd;}
.gridItem-10 {background-color: #0ac;}
.gridItem-11 {background-color: #e38;}
.gridItem-12 {background-color: #aa5;}

/* SVG colours are generated by JS using CSS variables */

#andy_face {
/*   filter: url(#svgBlur); */
/*   filter: url(#svgNoise); */
/*   filter: blur(10px); */
}
              
            
!

JS

              
                var supportsES6 = function() {
  // https://gist.github.com/bendc/d7f3dbc83d0f65ca0433caf90378cd95
  try {
    new Function("(a = 0) => a");
    return true;
  }
  catch (err) {
    return false;
  }
}();



// Deep merge (for the config file)
// Adapted from: Prashant Yadav - https://learnersbucket.com/examples/javascript/how-to-merge-objects-in-javascript/
const deepMerge = (...arguments) => {

  const len = arguments.length;
  if (len < 1) return {};
  if (len < 2) return arguments[0];

  const target = {};

  // Merge the object into the target object
  const merger = obj => {
    for (const prop in obj) {
      if (!obj.hasOwnProperty(prop)) continue;

      if (Object.prototype.toString.call(obj[prop]) === '[object Object]') {
        // If doing a deep merge, and the property is an object
        target[prop] = deepMerge(target[prop], obj[prop]);
      } else {
        // Otherwise, a regular merge
        target[prop] = obj[prop];
      }
    }
  };

  //Loop through each object and conduct a merge
  for (const argument of arguments) {
    merger(argument);
  }

  return target;
};


// Use the Andy Warhol SVG as the  buttons open / exit SVG
// by overriding the default configuration


// Add a full-screen toggle button where supported.
// Version 1.5 06/10/2019
// Version 1.6 14/10/2019 - Added a deep merge for config file
// Prefixes would be required for production.

function launchFullWindow(config) {

  "use strict";
  if (!supportsES6) return false;
  if (!document.fullscreenEnabled) return false;

  let cfg = {
    launchObjSelect : '[data-fullScreen]',
    launchBtnClass : 'fullScreen_btn',
    svgClass : 'fullScreen_svg',
    open : {
      icon : 'icon-fullScreen-open',
      extension : '-open',
      label : 'Launch into full screen',
      title : 'Full screen [f, f11]'
    },
    exit : {
      icon : 'icon-fullScreen-exit',
      extension : '-exit',
      label : 'Exit full screen',
      title : 'Exit full screen [f, f11, esc]'
    }
  };

  // Blend the parameter config into the default cfg
  // Object.assign(cfg, config); // Would require config to be an exact object match
  // Deep merge allows a partial object matching (prevents overwrite of cfg.open and cfg.exit).
  cfg = deepMerge(cfg, config);
  
  const svgData = {
    open : {},
    exit : {}   
  }

  // Get symbol from the SVG definitions in the HTML
  const setSvgData = (_ => {

    const getData = param => {
      const symbol = document.getElementById(cfg[param].icon);
      if (!symbol) return false;
      svgData[param].class = cfg.svgClass;
      svgData[param].icon = cfg[param].icon;
      svgData[param].symbol = symbol.innerHTML;
      svgData[param].viewBox = symbol.getAttribute('viewBox');
    };

    getData('open');
    getData('exit');
  })();


  const _instantiateLaunchObj = launchObj => {

    const _getCfg = (param, toOpen) => cfg[toOpen ? 'open' : 'exit'][param];


    const _getSvgString = toOpen => {
      const param = _getCfg('extension', toOpen).substr(1);

      // Note: complete SVG is embedded, not a <use>, so each may have different properties. Color for example.
      return `<svg class="${svgData[param].class}" aria-hidden="true" viewbox="${svgData[param].viewBox}">${svgData[param].symbol}</svg>`;
    }

    const _setBtnAttr = toOpen => {
      btn.className = cfg.launchBtnClass + _getCfg('extension', toOpen);
      btn.title = _getCfg('title', toOpen);
      btn.setAttribute('aria-label', _getCfg('label', toOpen));
      btn.innerHTML = _getSvgString(toOpen);
    }

    // Check to see if the button already exists in the elements html
    let btn = launchObj.querySelector('.' + cfg.launchBtnClass);
    if (!btn) {

      // If not, create one
      btn = document.createElement('button');
      launchObj.prepend(btn);
    }
    _setBtnAttr(true);

    const _toggleFullScreen = _ => {
      if (!document.fullscreenElement) {
        launchObj.requestFullscreen();
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
      btn.focus();
    }

    const _onFullscreenChange = _ => _setBtnAttr(!document.fullscreenElement);

    {
      btn.addEventListener('click', _toggleFullScreen);

      // Toggle attr this way because esc key is not detected but change is!
      document.addEventListener('fullscreenchange', _onFullscreenChange);

      // Toggle if the f, or f11, key is pressed
      document.addEventListener('keydown', event => {
        if (event.keyCode === 70 || event.keyCode === 112) {
          _toggleFullScreen();
        }
      });
    }

  }

  // Multiple objects to launch
  const objs = document.querySelectorAll(cfg.launchObjSelect);
  for (const obj of objs) {
    _instantiateLaunchObj(obj);
  }

}

// Any object with data-fullScreen attribute by default
// Override the defaults to use the Andy Warhol SVG
launchFullWindow({
  launchBtnClass : 'btn-fullScreen',
  svgClass : 'svg-andyWarhol',
  open : {
    icon : 'icon-andyWarhol'
  },
  exit : {
    icon : 'icon-andyWarhol'
  }
});






// Andy Warhol in glorious technicolor
  
var addColorToSvgs = (function(config) {

  "use strict";
  if (!supportsES6) return false;

  let cfg = {
    svgSelect : '.svg-andyWarhol'
  };

  const getRandomInt = (min, max) => {
    // Maximum is exclusive, minimum is inclusive
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
  };

  // Generate HSL colour
  const H = _ => getRandomInt(0, 361);
  const S = _ => getRandomInt(0, 101);

  /* Lightness */
  const L1 = _ => getRandomInt(0, 27); // Darkest
  const L2 = _ => getRandomInt(28, 67); // Medium
  const L3 = _ => getRandomInt(34, 101); // Lightest

  // Andy SVGs
  const andys = document.querySelectorAll(cfg.svgSelect);
  for (const andy of andys) {

    // Get a random color
    const hair = H();

    // Calc its double complimentary colors:
    const face = (hair + 60) % 360;
    const spec = (hair + 180) % 360;
    const line = (hair + 240) % 360;

    // Add the CSS vars to the SVGs parent
    andy.parentElement.setAttribute('style', 
      `--hair: hsl(${hair}, ${S()}%, ${L3()}%); 
       --face: hsl(${face}, ${S()}%, ${L2()}%); 
       --spec: hsl(${spec}, ${S()}%, ${L1()}%); 
       --line: hsl(${line}, ${S()}%, ${L1()}%);`);
  }

})();



              
            
!
999px

Console