Sphère CSS 3D artificielle / avec texture

1771 zegarkidawida

Ouvrir dans l'éditeur Video Publiez votre code

Sphère CSS 3D artificielle / avec texture

Recommandé

16 January 2026

Lecteur de jeux Flash avec émulateur Ruffle

3 November 2025

Animation d'un sapin de Noël au format SVG avec JavaScript

22 August 2025

Formulaire de connexion et d'inscription avec authentification biométrique

HTML

<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

/*
 * 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('')
}

Recommandé

Lecteur de jeux Flash avec émulateur Ruffle

Animation d'un sapin de Noël au format SVG avec JavaScript

Formulaire de connexion et d'inscription avec authentification biométrique

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS