Анимация пылающего полигона Svg

Хочу создать анимированный камин в SVG, чтобы согреть свой очаг.

Использование всего двух polygon с рандомизацией точек и циклической перерисовкой.

Анимация точек polyline или polygon с помощью CSS-переходов невозможна?

Используете js?

Как реализовать <animate> для атрибута points?

Поскольку points — это массив SVGPoints, а не одно значение, как показано в документах:

https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

firePlace.appendChild(Object.assign(document.createElementNS("http://www.w3.org/2000/svg", 'polygon'), {id: "vline", style: "fill:#ff0"}))
firePlace.appendChild(Object.assign(document.createElementNS("http://www.w3.org/2000/svg", 'polygon'), {id: "wline", style: "fill:#f00"}))

setInterval(function(){
  let v = "0,700 ",w = "0,700 "
  for (let i=0;i<=1100;i++){
    v += (i * 30) + "," + (~~(Math.random()*700) + 200) + " "
    w += (i * 30) + "," + (~~(Math.random()*700) + 200) + " "
  }
  v += "1101,900"
  w += "1101,900"
  window.requestAnimationFrame(function(){
    vline.setAttribute("points",v)
    wline.setAttribute("points",w)
  })
},200) // 200ms 
<svg id = "firePlace" viewBox = "700 0 1100 700" preserveAspectRatio = "none" height = "700" style = "width: 100%; height: 100%;background: black"></svg>

Сложный вопрос, но все равно с праздником!

Вы не можете использовать анимацию CSS, но можете использовать SMIL. Однако в SMIL (или CSS-анимации) без javascript нет случайности. Это то, что вы хотели знать?

Robert Longson 20.12.2020 00:30
Поведение ключевого слова "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) для оценки ваших знаний,...
1
1
98
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Пример polyline с анимированным points:

<svg viewBox = "-100 165 1100 600" xmlns = "http://www.w3.org/2000/svg">
    <polyline fill = "none" stroke = "currentColor" stroke-width = "5" stroke-miterlimit = "5">
        <animate id = "a1" attributeName = "points" dur = "3.6s" repeatCount = "indefinite" 
                 values = "0,511 137,510 137,510 156,478 146,510 181,510 181,510 220,441 183,505 211,457 211,457 232,420 232,420 239,489 256,447 256,510 271,429 261,441 274,426 274,426 301,473 301,473 321,441 321,441 348,473 338,494 338,494 374,415 374,415 412,314 402,336 402,336 439,261 439,261 384,494 422,296 422,296 442,256 442,256 457,288 464,304 464,304 484,362 494,415 484,362 501,380 501,380 522,399 522,399 558,437 547,425 547,425 565,447 565,447 589,468 582,462 582,462 619,489 619,489 656,510 656,510 679,510 679,510 621,489 684,383 684,383 708,457 708,436 730,473 719,457 743,477 743,477 766,482 799,510 799,510 900,511;
                         0,511 137,511 137,511 156,470 146,470 181,392 181,392 220,479 183,479 211,421 211,421 232,376 232,376 239,392 256,428 256,428 271,459 261,459 274,485 274,485 301,424 301,424 321,470 321,470 348,410 338,410 338,410 374,329 374,329 412,410 402,410 402,410 439,487 439,487 384,487 422,402 422,402 442,446 442,446 457,414 464,429 464,429 484,469 494,445 484,445 501,408 501,408 522,366 522,366 558,445 547,445 547,445 565,480 565,480 589,431 582,431 582,431 619,344 619,344 656,425 656,425 679,476 679,476 621,476 684,340 684,340 708,391 708,391 730,438 719,438 743,489 743,489 766,438 799,511 799,511 900,511;
                         0,511 137,510 137,478 156,463 146,463 181,463 181,500 220,500 183,500 211,500 211,510 232,510 232,420 239,388 256,388 256,510 271,510 261,510 274,510 274,293 301,293 301,510 321,510 321,261 348,336 338,420 338,484 374,484 374,309 412,420 402,473 402,473 439,473 439,515 384,515 422,457 422,341 442,341 442,463 457,463 464,463 464,166 484,166 494,351 484,463 501,463 501,484 522,484 522,256 558,404 547,436 547,489 565,489 565,436 589,436 582,489 582,505 619,505 619,304 656,304 656,494 679,494 679,463 621,510 684,510 684,510 708,510 708,399 730,447 719,473 743,473 743,510 766,489 799,489 799,510 900,511;
                         0,511 137,510 137,510 156,478 146,510 181,510 181,510 220,441 183,505 211,457 211,457 232,420 232,420 239,489 256,447 256,510 271,429 261,441 274,426 274,426 301,473 301,473 321,441 321,441 348,473 338,494 338,494 374,415 374,415 412,314 402,336 402,336 439,261 439,261 384,494 422,296 422,296 442,256 442,256 457,288 464,304 464,304 484,362 494,415 484,362 501,380 501,380 522,399 522,399 558,437 547,425 547,425 565,447 565,447 589,468 582,462 582,462 619,489 619,489 656,510 656,510 679,510 679,510 621,489 684,383 684,383 708,457 708,436 730,473 719,457 743,477 743,477 766,482 799,510 799,510 900,511"
                 calcMode = "spline" keySplines = ".5 1 .3 1;.5 1 .3 1;.5 1 .3 1;"/>
    </polyline>
</svg>
Ответ принят как подходящий

Ну да, <animate> do поддерживает массивы points, используя приведенный выше фрагмент, это может выглядеть так:

firePlace.appendChild(Object.assign(document.createElementNS("http://www.w3.org/2000/svg", 'polygon'), {id: "vline", style: "fill:#ff0"}))
firePlace.appendChild(Object.assign(document.createElementNS("http://www.w3.org/2000/svg", 'polygon'), {id: "wline", style: "fill:#f00"}))

let t
fireWork()

function fireWork(){
  let v = "0,700 ",w = "0,700 "
  for (let i=0;i<=1100;i++){
    v += (i * 30) + "," + (~~(Math.random()*700) + 200) + " "
    w += (i * 30) + "," + (~~(Math.random()*700) + 200) + " "
  }
  v += "1101,900"
  w += "1101,900"
  window.requestAnimationFrame(function(){
    vline.innerHTML = `<animate attributeName = "points" from = "${vline.getAttribute('points')}" to = "${v}" dur = "${~~(Math.random() * 10)}s" dur = "0.618s" repeatCount = "indefinite" />`
    wline.innerHTML = `<animate attributeName = "points" from = "${wline.getAttribute('points')}" to = "${v}" dur = "0.218s" repeatCount = "indefinite" />`
    vline.setAttribute("points",v)
    wline.setAttribute("points",w)
  })
  clearTimeout(t)
  t = setTimeout(fireWork,5000)
}
<svg id = "firePlace" viewBox = "700 0 1100 700" preserveAspectRatio = "none" height = "700" style = "width: 100%; height: 100%;background: black"></svg>

Все еще глючит, но можно продолжать, спасибо @Robert

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