Drawing svg rose

by schrodingers

HTML

<script src="https://github.com/web-animations/web-animations-js/blob/master/web-animations-next.min.js"></script>
<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 294 461">
    <path d="M86.5 160.2c1.2.9 2.5 1.6 3.7 2.4-4.9-.5-10.9.4-15.2 2.2-.2.1-.1.5.2.4 2.9-.7 5.8-1.3 8.9-1.5 2.5-.2 5.1.1 7.6-.1.4.2.8.5 1.2.7 1.2.7 2.4 1.4 3.6 2-1.5-.1-3.1.1-4.6.4-2.9.4-5.9 1.2-8.8 1.8-.2.1-.1.4.1.4 5.5 0 10.5-2.6 16-1 .1.1.2 0 .3 0 1.6.8 3.2 1.6 4.8 2.3-4.7.6-9.3 2.9-13.8 4.1v.2c5.3.7 10.2-3.2 15.5-3.6 1.7.7 3.3 1.3 5 1.9-3.9 1.4-7.2 4.2-10.8 6.1-.3.2-.1.6.2.5 4.4-1.3 7.8-4.7 12.2-6 2.1.7 4.3 1.3 6.6 1.9-3.5 1.8-5.8 5.7-9.2 7.6-.2.1 0 .3.1.3 4.3-1.3 6.6-5.8 10.7-7.6 1.4.3 2.9.6 4.3.7-3.5 2.3-5.8 7.1-6.5 10.9 0 .2.2.3.2.1 1.8-4.4 3.9-8.6 8.3-10.8 1.8.1 3.7.1 5.5-.2.2.1.3.1.5.2 0 .3.3.5.5.2 3.2 1.3 7 1.2 10.7.9 2.8 4.1 6.2 7.9 9.3 11.8.1.1.2 0 .2-.1-2.6-3.9-5.2-8.3-8.6-11.8 1.7-.1 3.4-.3 5-.3-.1.1-.1.3.1.4 4.8 2.1 8.9 4.1 13.1 7.3.2.1.3-.1.2-.2-3.5-3.2-8-6.4-12.7-7.5h.7c.2 0 .2-.3 0-.4-2-.4-4-.4-6-.3 2.4-2.6 4.1-5.7 5.8-8.8.1-.2-.2-.3-.3-.1-2 3.1-3.7 6.2-6.3 8.9v.1c-.5 0-1.1.1-1.6.1h-1.4c1.5-1.4 2.9-3.1 4-4.8 1.3-2 2.9-4.5 2.9-7 .1-.2-.3-.2-.3 0-.7 4.2-4.1 9.2-7.7 11.8-1.1 0-2.2-.1-3.3-.2 3.4-2.6 5.9-6.4 7.7-10.3 0-.1-.2-.2-.3-.1-2.2 3.9-4.7 7.6-8.3 10.2-.8-.1-1.5-.2-2.3-.4 2.3-3.1 4.4-6.4 7.7-8.6.2-.1 0-.4-.1-.3-3.5 1.9-5.7 5.3-8 8.4.5-3.5 3.6-6.9 5.7-9.4 2.7-3.1 5.7-6 8.6-8.9 6.6-6.7 12.3-14.2 18.8-20.9-1.5 5-2.5 10.8-1.7 15.9 0 .2.4.3.4 0 .3-3 .2-6 .6-9.1.3-2.5.8-4.9 1.2-7.3 1.4-1.5 2.8-2.9 4.2-4.2.4-.3.8-.7 1.2-1-2.1 4.3-3.4 9.3-3.4 14.1 0 .3.5.3.5 0 1.2-5.1 1.6-10 3.6-14.8 1.9-1.8 3.9-3.6 5.8-5.4-2.7 5.4-4.9 12.1-3.7 18 .1.3.5.1.5-.1.3-3.6.2-7 1.1-10.5.7-2.7 1.7-5.3 2.7-7.9 1.1-1 2.2-2 3.3-2.9-2.5 5.9-2.1 12.9-.4 19h.1c-1-6.7-1.6-13.6 1.5-20v-.1c.8-.6 1.5-1.2 2.2-1.8.9-.7 1.9-1.3 2.9-1.8-3.5 5.5-4.1 14.1-2.6 20 .1.3.6.2.6-.1-.4-7.1-.6-14.1 3-20.3.5-.3 1.1-.5 1.6-.7-1.3 2.2-1.4 5.1-1.2 7.5.3 4.6 1.4 9 2.4 13.4 1.1 5.1 1.7 9.9.9 15.1-.9 6.7-3.6 12.1-7.3...

CSS

body {
  display: flex;
  justify-content: center;
  background: #eee;
  font-size: 62.5%;
  //  overflow: hidden;
}

div {
  margin: 10% auto;
}

svg {
  width: 80%;
}

path {
  fill: none;
  stroke: #003370;
  stroke-width: 0.095em;
  /* stroke-dasharray: 50;        
  stroke-dashoffset: 80;  
  animation: draw 5s ease-out both; */
}

JavaScript

var path = document.querySelector('path');
var l = path.getTotalLength();

// елемент.animate([массив из кадров], {свойства анимации}
// значения свойства как в element.style.propertyName
var player = path.animate(
  // КАДРЫ АНИМАЦИИ
  [{
      strokeDasharray: l,
      strokeDashoffset: l
    },
    {
      strokeDashoffset: 0
    }
  ],

  // СВОЙСТВА АНИМАЦИИ
  {
    duration: 7000,
    //  easing: 'ease-out',
    delay: 10,
    iterations: Infinity,
    //direction: 'alternate',
    fill: 'both'
  });