Как нарисовать объемную картинку линиями и анимировать её?

Question

Как нарисовать объемную картинку линиями и добавить легкую анимацию в виде, например, изменения расстояния между полосками, чтобы получить эффект "движения", типа оживить картинку?

Answer 1

Вот лучшее решение! =)

<img src="https://i.stack.imgur.com/m5k6o.jpg"><style>body{overflow:hidden;margin:0;padding:0;}img{display:block;margin-top:-2.5%;max-height:110vh;min-height:330px;width:auto;transition:0.5s;animation: animate 0.1s linear infinite;}@keyframes animate {0% {transform: scale(1, 1)}100% {transform: scale(1, 0.99);}}</style>

А чтобы булки двигались? "Слабо"? ) – NeedHate

Специально для вас)

<div class="img"></div><style>body {overflow:hidden;margin:0;padding:0;}.img {width: 350px;height: 200px;border-radius: 20% 20% 40% 40%;background: url(https://i.stack.imgur.com/m5k6o.jpg);background-size: 200%;background-position-y: -45%;background-position-x: 70%;transition: 0.5s; animation: animate 0.1s linear infinite;}@keyframes animate {0% {transform: scale(1, 1)}100% {transform: scale(1.02, 0.98);}}</style>

Answer 2

что то такое можно изобразить:

document.body.innerHTML += `
  <canvas id="c" width="600" height="600" />
  <img src="https://picsum.photos/id/742/600/600" 
    style="display:none" onload="init(this)" crossorigin>
`;

function init(img) {
    let ctx = c.getContext("2d");
    ctx.drawImage(img, 0, 0);
    let dx = 10;
    let count = 180;
    let s = c.width;
    let step = s/(count + 1);
    let d = ctx.getImageData(0, 0, s, s);
    requestAnimationFrame(redraw);
    
    function redraw(t){
      ctx.clearRect(0, 0, s, s);
      for (let i = 0; i < count; i++) {
          let y = i*step+step/2;
          y += Math.sin(y/40+t/700)*2
          ctx.beginPath();
          for (let x = 0; x < s; x++) { 
              let o = s*(y|0) + x|0;
              ctx[x?'lineTo':'moveTo'](x, y - d.data[o*4]/40);
          }
          ctx.stroke();
      } 
      requestAnimationFrame(redraw);
    }  
}

БЛОГ НА HUSL

Как нарисовать объемную картинку линиями и анимировать её?

Ответы (2 шт):