Анимация штриховки фоновой плитки

Мне нужно создать шаблон дизайна, в котором некоторые модули контента имеют штриховку в качестве элемента оформления:

Модули и, следовательно, штриховки одинаково отзывчивы, поэтому модули и штриховки бывают всех мыслимых размеров и соотношений сторон. Штриховки тоже могут иметь разное положение:

Очевидно, что эти штриховки реализованы с помощью простой фоновой плитки SVG:

Вот проблема: Отдел дизайна придумал анимацию для штриховки, где линии начинаются с разной длины и растут, пока каждая линия не достигнет своей окончательной длины:

Возможно, я упускаю здесь что-то очевидное, но я не могу понять, как сделать это отзывчивым. Конечно, я мог бы использовать lottieFile или даже видео, но они будут корректно масштабировать ширину строки и пробелы — и об этом не может быть и речи.

Отдел дизайна уже продал анимацию заказчику, так что мне действительно нужно найти способ... есть предложения?

Обновлено: предоставил пример кода:

БОЛЬШЕ Обновлено: вам нужно переключиться на «Полная страница» при запуске фрагмента кода, чтобы увидеть правильное отображение элементов... странно...

  .grid {
    margin: 0 auto;
    width: 75vw;
    max-width: 800px;
    height: 75vh;

    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 100px 1fr 100px;
  }

  .contentElement {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    z-index: 2;

    padding: 40px;
    background-color: lightgray;
  }

  .hatching {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    z-index: 1;

    /* background-image: url(img/background/tile_hatching_l.svg); */
    /* background-repeat: repeat; */
    background-color: red;
}
<!-- grid -->
  <div class = "grid">
    <div class = "contentElement">
      This is the content element
    </div>
    <div class = "hatching"></div>
  </div>
<!-- end grid -->

Я не уверен, что понимаю, я полагаю, что штриховка, основанная на изображениях, которые вы включили, должна быть чем-то вроде тени элемента, которая будет постепенно отображаться по мере загрузки страницы?

Dave111 16.02.2023 13:33

Ну, вы могли бы думать об этом как о своего рода тени, состоящей из линий с определенной шириной и расстоянием между линиями, чего можно легко добиться, используя фоновую плитку (как я). Проблема в том, что эта «тень» должна иметь анимацию, которая влияет на некоторые строки иначе, чем на другие, без изменения ширины линии или расстояния между строками.

Floyd 16.02.2023 13:36

Возможно, я должен упомянуть, что элемент содержимого и штриховка — это отдельные элементы div в общей сетке. На сетку влияет размер элемента содержимого.

Floyd 16.02.2023 13:37

Мне понадобится ваш код, чтобы попытаться воссоздать анимацию на моем локальном хосте.

Dave111 16.02.2023 13:41

Хорошо, я создам упрощенный пример кода — дайте мне минутку, пожалуйста :)

Floyd 16.02.2023 13:43

добавил пример кода :)

Floyd 16.02.2023 14:03

Можно сделать только с помощью CSS

vsync 16.02.2023 14:13

@Floyd ваш пример кода даже близко не соответствует предлагаемым изображениям. По крайней мере, правильный выбор элемента «подложка» — это хорошее начало? Итак, если я правильно понял вопрос, кто-то предложил анимировать каждую полоску по отдельности?

Roko C. Buljan 16.02.2023 14:13

@RokoC.Buljan да, это так :) Штриховка - это div, который находится под элементом содержимого и имеет фоновую плитку, которая создает линии - очень просто. Только то, что я закомментировал строки CSS для фоновой плитки и вместо этого добавил цвет фона.

Floyd 16.02.2023 14:18

@vsync это приятно слышать. Скажешь как? :)

Floyd 16.02.2023 14:19

@vsync да, я тоже жду этого! ;)

Roko C. Buljan 16.02.2023 14:43

@RokoC.Buljan Да, кто-то предложил именно это...

Floyd 16.02.2023 14:45

Итак, в основном SVG, более простая и случайная реализация этого? jsfiddle.net/ym31k7fe - Я не думаю, что это возможно только с помощью CSS. Там есть случайность и другие вещи, я не уверен, как кто-нибудь реализует это в CSS.

Roko C. Buljan 16.02.2023 15:01

Это можно сделать с помощью CSS, но это заняло бы у меня несколько часов, а я в разгар рабочего дня... просто отметил, что это возможно :) надеюсь, что человек с некоторыми навыками + свободное время сможет прийти и спасти день

vsync 16.02.2023 15:27

Кажется, @RokoC.Buljan уже предоставил хорошее решение. Я не думаю, что решение только css возможно, потому что какое-то (неуказанное) событие должно запускать анимацию.

Yogi 16.02.2023 17:47
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
15
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Штрихи в этом решении являются псевдослучайными и повторяются каждые 20 строк. Узор повторяется каждые 200 пикселей по горизонтали, но растягивается по вертикали до высоты обертывающего элемента <svg>. Каждая линия изначально вертикальна, и только после того, как шаблон подогнан, она перекошена, поэтому линии кажутся диагональными.

document.querySelector('button').addEventListener('click', ()=> {
  document.querySelector('#hatches path').classList.add('full');
})
#hatches path {
  fill:none;
  stroke:red;
  stroke-width:1;
  transition: d 1s linear;
}
#hatches path.full {
  d: path('M 5,0 5,100 M 15,0 15,100 M 25,0 25,100 M 35,0 35,100 M 45,0 45,100 M 55,0 55,100 M 65,0 65,100 M 75,0 75,100 M 85,0 85,100 M 95,0 95,100 M 105,0 105,100 M 115,0 115,100 M 125,0 125,100 M 135,0 135,100 M 145,0 145,100 M 155,0 155,100 M 165,0 165,100 M 175,0 175,100 M 185,0 185,100 M 195,0 195,100')
}
rect { fill: url(#hatches) }
<svg width = "400" height = "300">
  <pattern id = "hatches" width = "200" height = "100%" patternUnits = "userSpaceOnUse" viewBox = "0 0 200 100" preserveAspectRatio = "none" patternTransform = "skewX(-45)">
    <path d='M5,37 5,91 M 15,40 15,80 M 25,11 25,59 M 35,26 35,79 M 45,29 45,83 M 55,50 55,98 M 65,20 65,59 M 75,7 75,99 M 85,17 85,56 M 95,33 95,55 M 105,20 105,67 M 115,45 115,55 M 125,18 125,93 M 135,33 135,89 M 145,20 145,98 M 155,14 155,62 M 165,45 165,64 M 175,3 175,53 M 185,20 185,73 M 195,30 195,59' />
  </pattern>
  <rect width = "100%" height = "100%" />
</svg>
<button>Fill</button>

Другие вопросы по теме