Faux-3D CSS Sphere /w Texture

2,482 zegarkidawida

<div class="utilities">
  <div class="control">
    <label for="bands">bands</label>
    <input type="range" id="bands" min="2" max="200" value="80">
  </div>
  <div class="control">
    <label for="cells">cells</label>
    <input type="range" id="cells" min="3" max="120" value="40">
  </div>
  <div class="control">
    <label for="size"> size</label>
    <input type="range" id="size" min="5" max="120" value="70">
  </div>
  <div class="control">
    <label for="speed">speed</label>
    <input type="range" id="speed" min="1" max="20" value="15">
  </div>
  <fieldset id="image" class="control">
    <legend>texture</legend>
    <label>
      <input type="radio" checked name="image" value="url(https://assets.codepen.io/25387/Gall_Stereographic_projection_SW_centered.jpg)">
      <div class="image-wrapper">
        <img src="https://assets.codepen.io/25387/Gall_Stereographic_projection_SW_centered.jpg" alt="world map">
        <a href="https://en.wikipedia.org/wiki/Gall_stereographic_projection" target="_blank" title="source">↗</a>
      </div>
    </label>
    <label>
      <input type="radio" name="image" value="url(https://assets.codepen.io/25387/convergence-screenshot.jpg)">
      <div class="image-wrapper">
      <img src="https://assets.codepen.io/25387/convergence-screenshot.jpg" alt="convergence">
        <a href="https://codepen.io/pavlovsk/pen/zYXBEeR" target="_blank" title="source">↗</a>
      </div>
    </label>
    <label>
      <input type="radio" name="image" value="url(https://assets.codepen.io/25387/smiley.png)">
      <div class="image-wrapper">
      <img src="https://assets.codepen.io/25387/smiley.png" alt="convergence">
        <a href="https://www.google.com/search?q=smiley+face+sphere+texture&tbs=imgo:1&udm=2#vhid=B2Ahxik8MU8_1M&vssid=mosaic" target="_blank" title="source">↗</a>
      </div>
    </label>
  </fieldset>
  <div class="control">
    <label for="with-border">borders</label>
    <input type="checkbox" id="with-border">
  </div>
</div>

CSS

@layer cosmetics, utilities, demo;

@layer demo {
  body {
    height: 100dvh;
    display: grid;
    place-content: center;
  }

.world {
    --bands: 130;
    --cells: 60;
    --_size: 80;
    --size: calc(var(--_size) * 1dvmin);
    --_speed: 15;
    --speed: calc((20.5 - var(--_speed)) * 1s);
    --image: url(https://assets.codepen.io/25387/Gall_Stereographic_projection_SW_centered.jpg);
    display: flex;
    align-items: center;
    flex-direction: column;
    clip-path: circle();
  }

.band {
    --latitude: calc(sin(PI / var(--bands) * var(--i)) * 1.2);
    --width: calc(var(--size) * var(--latitude));
    width: var(--width);
    height: calc(var(--size) / var(--bands) * var(--latitude));
    display: flex;
    justify-content: center;
  }

.cell {
    --longitude: calc(sin(PI / var(--cells) * var(--j)) * 1.2);
    --bg-width: calc(var(--width) * var(--longitude) * 1.25);
    --bg-height: calc(var(--size) * 0.9);
    height: calc(var(--size) * var(--longitude));
    width: calc(var(--width) / var(--cells) * var(--longitude));
    background:
      var(--image) 50% fixed;
    background-size:
      var(--bg-width)
      var(--bg-height);
    animation: spin var(--speed) linear infinite;
  }
  
  .with-borders .cell {
    box-shadow: 0 0 0 1px chartreuse;
  }

@keyframes spin {
    100% {
      background-position-x: calc(50% + var(--bg-width));
    }
  }
}

@layer cosmetics {
  body {
    overflow: hidden;
    margin: 0;
    background: cornsilk;
  }

.world::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: cornsilk;
    opacity: .5;
    mix-blend-mode: color;
  }
}

@layer utilities {
  .utilities {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 1em;
  }

.utilities .control {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 24px;
    gap: .5em;
    font-size: 1.1em;
    font-family: monospace;
    font-variant: small-caps;
    letter-spacing: .05em;
  }

.utilities #image:has(:focus) {
    border: 2px solid royalblue;
  }

.utilities #image input {
    position: absolute;
    top: -100dvh;
    left: -100dvw;
    opacity: 0;
  }

.utilities .image-wrapper {
    --color-1: #ddd;
    --color-2: royalblue;
    position: relative;
    width: max(10dvmin, 48px);
    height: max(10dvmin, 48px);
    color: var(--color-1);
  }

.utilities .image-wrapper a {
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    translate: 30% 30%;
    width: 30%;
    height: 30%;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    text-decoration: none;
    background: var(--color-1);
    color: var(--color-2);
    border-radius: 50%;
  }

.utilities .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: .5dvmin solid var(--color-1);
  }

.utilities #image :checked + .image-wrapper {
    --color-1: royalblue;
    --color-2: #ddd;
  }

.utilities #image :checked + .image-wrapper a {
    display: inline-flex;
  }
}

/*
 * JS just handles the playground of parameters
 * and inserts the repeated markup.
 */
const UI = {
  bands: document.querySelector('#bands'),
  cells: document.querySelector('#cells'),
  size: document.querySelector('#size'),
  speed: document.querySelector('#speed'),
  image: document.querySelectorAll('#image input'),
  borders: document.querySelector('#with-border'),
  world: document.querySelector('.world')
}

const state = {
  bands: +UI.bands.value,
  cells: +UI.cells.value,
  size: +UI.size.value,
  speed: +UI.speed.value,
  image: UI.image[0].value,
  borders: UI.borders.checked
}

UI.bands.addEventListener('input', (e) => {
  state.bands = +e.target.value
  render()
})

UI.cells.addEventListener('input', (e) => {
  state.cells = +e.target.value
  render()
})

UI.size.addEventListener('input', (e) => {
  state.size = +e.target.value
  render()
})

UI.speed.addEventListener('input', (e) => {
  state.speed = +e.target.value
  render()
})

Array.from(UI.image).forEach(input => {
  input.addEventListener('change', () => {
    state.image = input.value
    render()
  })
})

UI.borders.addEventListener('input', (e) => {
  state.borders = e.target.checked
  render()
})

render()

function render() {
  UI.world.style.setProperty('--bands', state.bands)
  UI.world.style.setProperty('--cells', state.cells)
  UI.world.style.setProperty('--_size', state.size)
  UI.world.style.setProperty('--_speed', state.speed)
  UI.world.style.setProperty('--image', state.image)
  UI.world.classList.toggle('with-borders', state.borders)
  UI.world.innerHTML = chunk(state.bands, i => `
    <div class="band" style="--i: ${i}">
      ${chunk(state.cells, j => `
        <div class="cell" style="--j: ${j}"></div>
      `)}
    </div>
  `)
}

function chunk(howMany, mapFn) {
  return Array
    .from({ length: howMany }, (_, i) => mapFn(i))
    .join('')
}

Faux-3D CSS Sphere /w Texture

Recommended