CSS动画，同时动态更改翻译

Question

我做了一只需要飞的SVG蜜蜂。我已成功使用JavaScript在CSS --tranX中动态更改了变量--tranY和#bee1（用于更改其位置）。

这些变量将传递到CSS中的100% {}关键帧。但是，动画无法正常播放。

注意：仅通过应用transform，我就已经成功地使蜜蜂移动了，但随后蜜蜂会在没有动画的情况下从一个位置跳到另一个位置。

蜜蜂的CSS：

#bee1 {
   -webkit-animation: beeMove 500ms ease-in-out infinite alternate-reverse both;
  animation: beeMove 500ms ease-in-out infinite alternate-reverse both;
  --tranX: 0;
  --tranY: 0;
}

@-webkit-keyframes beeMove {
  0% {
   -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
  100% {
     -webkit-transform: translateX(var(--tranX)) translateY(var(--tranY)); 
    transform: translateX(var(--tranX)) translateY(var(--tranY));
  }
}

用于移动蜜蜂的JavaScript（每秒调用一次）： 为

 (let bee of bees) {
    bee.style.setProperty('--tranX', Math.random() * 340 + "px");
    bee.style.setProperty('--tranY', Math.random() * 257 + "px");
  }

https://jsfiddle.net/facechomp/3dbv15u6/26/

Answer 1

根据我的评论，CSS变量tranX和tranY的作用域为#bee1选择器，因此，动画定义实际上无法访问这些值。如果您只是希望蜜蜂随机飞过整个地方而不返回其原始位置，则可以将代码更新为此：

const _locationsInterval = 500; // ms

对于CSS：

#bee1 {
  transform: translateX(var(--tranX)) translateY(var(--tranY));
  --tranX: 0;
  --tranY: 0;
    background: red;
    transition: all 500ms ease-in-out;
}

const _wingsInterval = 500; // ms
const _locationsInterval = 500; // ms
var frontWings = document.getElementsByClassName('front-wing');
var backWings = document.getElementsByClassName('back-wing');
var bees = document.getElementsByClassName('bee');

///////////////////////////////////////////////////////////////////
// update all bees' wings every _wingsInterval ms
///////////////////////////////////////////////////////////////////
setInterval(function() {
  var rotFront = -Math.round(Math.random() * 10 + 5);
  for (let wing of frontWings) {
    wing.style.setProperty('--rotFront', rotFront + "deg");
  }
  var rotBack = -Math.round(Math.random() * 20 + 2);
  for (let wing of backWings) {
    wing.style.setProperty('--rotBack', rotBack + "deg");
  }
}, _wingsInterval);

///////////////////////////////////////////////////////////////////
// update all bees' locations every _locationsInterval ms
///////////////////////////////////////////////////////////////////
setInterval(function() {
  for (let bee of bees) {
    bee.style.setProperty('--tranX', Math.random() * 340 + "px");
    bee.style.setProperty('--tranY', Math.random() * 257 + "px");
  }
}, _locationsInterval);

body {
  background-color: black;
}

.image-contain {
  display: block;
  margin: auto;
  width: 800px;
}

.front-wing {
  -webkit-animation: flapWingFront 60ms ease-in-out infinite alternate-reverse both;
  animation: flapWingFront 60ms ease-in-out infinite alternate-reverse both;
  --tranX: -52%;
  --tranY: -26%;
  --rotFront: 0;
  position: absolute;
}

@-webkit-keyframes flapWingFront {
  0% {
    -webkit-transform: rotate(0) translateX(var(--tranX)) translateY(var(--tranY));
    transform: rotate(0) translateX(var(--tranX)) translateY(var(--tranY));
  }
  100% {
    -webkit-transform: rotate(var(--rotFront)) translateX(var(--tranX)) translateY(var(--tranY));
    transform: rotate(var(--rotFront)) translateX(var(--tranX)) translateY(var(--tranY));
  }
}

.back-wing {
  -webkit-animation: flapWingBack 40ms ease-in-out infinite alternate-reverse both;
  animation: flapWingBack 40ms ease-in-out infinite alternate-reverse both;
  --btranX: -54%;
  --btranY: -15%;
  --rotBack: 0;
  position: absolute;
}

@-webkit-keyframes flapWingBack {
  0% {
    -webkit-transform: rotate(0) translateX(var(--btranX)) translateY(var(--btranY));
    transform: rotate(0) translateX(var(--btranX)) translateY(var(--btranY));
  }
  100% {
    -webkit-transform: rotate(var(--rotBack)) translateX(var(--btranX)) translateY(var(--btranY));
    transform: rotate(var(--rotBack)) translateX(--var(--btranX)) translateY(var(--btranY));
  }
}

#bee1 {
  transform: translateX(var(--tranX)) translateY(var(--tranY));
  --tranX: 0;
  --tranY: 0;
	background: red;
	transition: all 500ms ease-in-out;
}

<div class="image-contain">

  <svg id="bee1" class="bee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 340 275" width="75" height="50">
  <defs>
    <linearGradient id="a">
      <stop offset="0" stop-color="#c5c5c7"/>
      <stop offset="1" stop-color="#c5c5c7" stop-opacity="0"/>
    </linearGradient>
    <path d="M453.56 309.74c-11.86-45.92-22.57-71.57-55.36-100.67-21.86-19.41-40.14-15.15-54.82 12.76.16 1.03.93 6.18 2.32 15.46" id="d"/>
    <path d="M453.52 309.46c-78.71-25.57-114.71-49.86-107.99-72.87" id="b"/>
    <path d="M329.87 244.41c10.67.51 18.19-1.54 20.5-13.36 9.08-46.7-15.06-50.63-24.91-52.94-9.86-2.31-32.31-8.05-41.92-1.55-6.41 4.34-9.41 9.32-8.99 14.94 1.11 4.69 1.8 7.61 2.08 8.78.38 1.62 1.01 3.16 1.87 4.56.33.54-.81-1.33-.69-1.12 1.55 2.53 2.63 5.33 3.17 8.26 1.64 8.8 3.98 14.55 7.02 17.25 19.13 16.95 35.93 14.91 41.87 15.18z" id="e"/>
    <path d="M236.72 232.73l5.12 4.79-6.97 15.88 13.4-14.87-12.88-11.34-7.85 17.15z" id="f"/>
    <path d="M262.3 156.27c-.45 1.33-1.37 4.11-1.83 5.45a1.22 1.22 0 0 1-1.61.76c-3.15-1.2-11.39-4.37-14.53-5.58a1.358 1.358 0 0 1-.8-1.7c.44-1.33 1.37-4.11 1.81-5.44.22-.67.96-1.02 1.62-.77l14.53 5.58c.68.26 1.04 1.01.81 1.7z" id="g"/>
    <path d="M259.43 179.58c-.91.41-2.58 1.16-3.5 1.55a1 1 0 0 1-1.37-.62c-.91-2.8-3.25-10.14-4.16-12.95-.19-.62.1-1.28.69-1.54.92-.41 2.59-1.15 3.5-1.56.56-.24 1.2.04 1.38.62.91 2.81 3.25 10.16 4.16 12.96.19.61-.11 1.28-.7 1.54z" id="h"/>
    <path d="M254.44 164.19c-.36 1.07-1.09 3.28-1.45 4.35-.18.53-.77.81-1.29.6-2.51-.96-9.08-3.48-11.58-4.44-.55-.21-.83-.8-.64-1.35.35-1.07 1.09-3.29 1.44-4.34.18-.54.77-.82 1.3-.62 2.5.97 9.07 3.48 11.58 4.46.54.19.82.79.64 1.34z" id="i"/>
    <path d="M237.5 238.35c-10.09-8.2-9.08-28.86 2.26-46.12 11.32-17.26 28.73-24.61 38.81-16.42 10.09 8.2 9.08 28.87-2.25 46.12-11.34 17.26-28.73 24.61-38.82 16.42z" id="j"/>
    <path d="M268.55 175.57c-1.13.51-3.24 1.44-4.38 1.95-.69.3-1.5-.05-1.73-.78-1.13-3.52-4.08-12.72-5.2-16.26-.25-.76.12-1.6.87-1.92 1.13-.51 3.24-1.45 4.38-1.95.69-.31 1.5.05 1.73.78 1.13 3.52 4.08 12.73 5.2 16.25.25.77-.13 1.6-.87 1.93z" id="k"/>
    <path d="M247.35 234.76c-5.23-4-2.62-18.27 5.81-31.88 8.44-13.59 19.53-21.4 24.75-17.4 5.24 3.98 2.63 18.26-5.81 31.86-8.43 13.61-19.52 21.4-24.75 17.42z" id="l"/>
    <path d="M248.97 218.74c-1.11-.9 2.26-8.12 7.51-16.1 5.25-7.98 10.41-13.73 11.51-12.83 1.12.9-2.25 8.11-7.5 16.09s-10.41 13.74-11.52 12.84z" id="m"/>
    <linearGradient xlink:href="#a" id="n" x1="308.975" y1="187.42" x2="498.657" y2="182.332" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.09084 0 0 1 -28.066 14)"/>
    <linearGradient xlink:href="#a" id="c" x1="308.975" y1="187.42" x2="498.657" y2="182.332" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.72767 -.38085 .34914 .66708 10.105 193.084)"/>
  </defs>
  <g transform="translate(-177.91 -74.04)">
    <use xlink:href="#b" width="100%" height="100%" fill="#eaad22"/>
    <use xlink:href="#b" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
  </g>
  <path class="back-wing" d="M300.374 200.434s116.837-96.705 117.927-71.09c1.09 25.615-6.342 42.957-111.889 75.617z" fill="url(#c)" transform="translate(-177.91 -88.04)"/>
  <g transform="translate(-177.91 -88.04)">
    <g transform="translate(0 14)">
      <use xlink:href="#d" width="100%" height="100%" fill="#eaad22"/>
      <use xlink:href="#d" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#e" width="100%" height="100%" fill="#ead822"/>
      <use xlink:href="#e" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#f" width="100%" height="100%" fill="#ead822"/>
      <use xlink:href="#f" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#g" width="100%" height="100%" fill="#383729"/>
      <use xlink:href="#g" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#h" width="100%" height="100%" fill="#383729"/>
      <use xlink:href="#h" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#i" width="100%" height="100%" fill="#383729"/>
      <use xlink:href="#i" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#j" width="100%" height="100%" fill="#ead822"/>
      <use xlink:href="#j" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#k" width="100%" height="100%" fill="#383729"/>
      <use xlink:href="#k" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#l" width="100%" height="100%" fill="#3e3904"/>
      <use xlink:href="#l" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#m" width="100%" height="100%" fill="#fff"/>
      <use xlink:href="#m" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <path d="M336.576 240.154c4.009-.5-.136 5 1.328 6.432 1.4 1.37 9.97.116 7.93 2.627-2.134 2.628-10.78 3.916-15.078 6.175-4.108 2.158-8.267 7.628-12.097 8.105-4.008.5.137-5-1.328-6.432-1.4-1.37-9.97-.115-7.93-2.626 2.134-2.628 10.78-3.917 15.079-6.175 4.107-2.159 8.266-7.628 12.096-8.106z" fill="#463207"/>
    <path d="M343.13 288.255c-2.381 5.955-6.17-4.324-9.066-3.485-2.768.803-7.628 13.69-9.247 8.793-1.695-5.125 3.178-18.145 3.57-25.956.375-7.465-3.366-17.74-1.09-23.43 2.382-5.956 6.17 4.324 9.066 3.484 2.768-.802 7.628-13.69 9.247-8.793 1.695 5.125-3.177 18.145-3.57 25.957-.375 7.464 3.366 17.74 1.09 23.43z" fill="#463207"/>
    <ellipse cx="332.615" cy="297.798" rx="7.196" ry="21.188" fill="#463207"/>
    <path d="M341.673 329.106c.457 2.686-2.767-2.585-3.492-2.412-.693.166.387 6.002-1.092 3.506-1.548-2.612-2.65-8.512-4.092-12.255-1.377-3.576-4.586-8.84-5.023-11.408-.457-2.686 2.768 2.585 3.493 2.412.693-.166-.387-6.002 1.092-3.506 1.548 2.612 2.65 8.512 4.091 12.254 1.378 3.577 4.587 8.842 5.023 11.409z" fill="#463207"/>
    <ellipse cx="351.115" cy="128.439" rx="8.237" ry="25.267" transform="matrix(.91978 .39243 -.35584 .93455 0 0)" fill="#463207"/>
    <path d="M254.936 313.666c-1.91-.697 1.976-11.42 2.96-16.422.984-5 .702-12.594 3.596-16.898 2.893-4.304 4.709 1.01 6.618 1.707 1.91.697 7.09-2.064 6.107 2.937-.984 5.001-6.686 10.41-9.58 14.715-2.893 4.304-7.791 14.658-9.701 13.961z" fill="#463207"/>
    <path d="M237.744 319.857c-2.685.462 2.58-2.772 2.405-3.497-.166-.693-6.001.398-3.508-1.086 2.61-1.553 8.507-2.665 12.248-4.114 3.574-1.384 8.832-4.603 11.398-5.044 2.686-.462-2.58 2.772-2.405 3.497.167.693 6.002-.398 3.508 1.086-2.609 1.552-8.506 2.665-12.247 4.114-3.574 1.384-8.833 4.602-11.399 5.044zM288.076 232.159c-4.008-.5.137 5-1.328 6.432-1.399 1.369-9.97.115-7.93 2.626 2.134 2.628 10.78 3.916 15.079 6.175 4.107 2.159 8.266 7.628 12.097 8.106 4.008.5-.137-5 1.327-6.433 1.4-1.369 9.97-.115 7.93-2.626-2.134-2.628-10.78-3.916-15.078-6.175-4.108-2.158-8.267-7.628-12.097-8.105zM363.99 244.882c3.917.986-1.938 4.61-1.092 6.477.809 1.783 9.252 3.717 6.442 5.32-2.941 1.676-11.467-.254-16.292.295-4.61.525-10.467 4.118-14.21 3.176-3.918-.986 1.937-4.61 1.09-6.477-.808-1.783-9.251-3.717-6.44-5.32 2.94-1.676 11.466.254 16.29-.295 4.611-.525 10.468-4.118 14.212-3.176z" fill="#463207"/>
    <path d="M370.502 303.896c-2.736 7.294-7.087-5.296-10.415-4.268-3.18.983-8.761 16.767-10.622 10.77-1.947-6.277 3.65-22.224 4.101-31.792.43-9.143-3.866-21.727-1.252-28.697 2.736-7.294 7.087 5.296 10.415 4.268 3.18-.983 8.761-16.767 10.622-10.77 1.947 6.277-3.65 22.224-4.101 31.792-.43 9.143 3.866 21.727 1.252 28.697z" fill="#463207"/>
    <ellipse cx="238.882" cy="419.961" rx="7.196" ry="21.188" transform="rotate(-19.343)" fill="#463207"/>
    <path d="M383.416 343.67c1.321 2.383-3.467-1.522-4.094-1.119-.599.386 2.353 5.536.13 3.67-2.325-1.952-5.319-7.153-7.919-10.207-2.484-2.919-7.256-6.823-8.518-9.1-1.32-2.384 3.467 1.521 4.094 1.118.6-.386-2.353-5.535-.13-3.67 2.325 1.952 5.319 7.154 7.919 10.208 2.485 2.918 7.256 6.823 8.518 9.1z" fill="#463207"/>
    <path d="M415.769 310.79l-13.793-6.396s7.362-1.287 18.773-11.637c11.41-10.35 9.612-31.539 9.612-31.539s5.235 7.62 6.815 11.805c1.58 4.187-2.141 18.253-6.19 23.1-5.438 5.887-8.08 10.368-15.217 14.668zM388.927 298.598l-16.93-9.215s10.423-1.573 26.58-14.218c16.155-12.646 13.608-38.533 13.608-38.533s7.813 8.509 9.85 12.224c2.236 5.115-3.232 24.5-8.964 30.422-7.7 7.193-14.04 14.066-24.144 19.32z" fill="#2d2d2d"/>
  </g>
  <path class="front-wing" d="M308.975 201.42s197.045-41.837 182.552-11.024c-14.493 30.812-33.92 46.643-178.235 20.07z" fill="url(#n)" transform="translate(-177.91 -88.04)"/>
</svg>

</div>

但是，如果您想让蜜蜂飞到随机位置并回到其初始位置，则可能需要更多的JS向导。您基本上需要设置2个计时器，一个将蜜蜂转换为随机生成的位置，另一个转换为0,0的坐标：

let iteration = 0;
setInterval(function() {
  for (let bee of bees) {
    const tranX = iteration % 2 ? 0 : Math.random() * 340;
    const tranY = iteration % 2 ? 0 : Math.random() * 257;
    bee.style.setProperty('--tranX', tranX + "px");
    bee.style.setProperty('--tranY', tranY + "px");
    iteration++;
  }
}, _locationsInterval);

要使其正常工作，您的_locationsInterval的持续时间必须与蜜蜂上设置的transition-duration相同。

上面的代码基本上跟踪使用的迭代：如果它是偶数，则返回原始坐标。如果它是奇数，请转到随机生成的坐标。这将产生蜜蜂来回移动的效果。

const _wingsInterval = 500; // ms
const _locationsInterval = 500; // ms
var frontWings = document.getElementsByClassName('front-wing');
var backWings = document.getElementsByClassName('back-wing');
var bees = document.getElementsByClassName('bee');

///////////////////////////////////////////////////////////////////
// update all bees' wings every _wingsInterval ms
///////////////////////////////////////////////////////////////////
setInterval(function() {
  var rotFront = -Math.round(Math.random() * 10 + 5);
  for (let wing of frontWings) {
    wing.style.setProperty('--rotFront', rotFront + "deg");
  }
  var rotBack = -Math.round(Math.random() * 20 + 2);
  for (let wing of backWings) {
    wing.style.setProperty('--rotBack', rotBack + "deg");
  }
}, _wingsInterval);

///////////////////////////////////////////////////////////////////
// update all bees' locations every _locationsInterval ms
///////////////////////////////////////////////////////////////////
let iteration = 0;
setInterval(function() {
  for (let bee of bees) {
    const tranX = iteration % 2 ? 0 : Math.random() * 340;
    const tranY = iteration % 2 ? 0 : Math.random() * 257;
    bee.style.setProperty('--tranX', tranX + "px");
    bee.style.setProperty('--tranY', tranY + "px");
    iteration++;
  }
}, _locationsInterval);

body {
  background-color: black;
}

.image-contain {
  display: block;
  margin: auto;
  width: 800px;
}

.front-wing {
  -webkit-animation: flapWingFront 60ms ease-in-out infinite alternate-reverse both;
  animation: flapWingFront 60ms ease-in-out infinite alternate-reverse both;
  --tranX: -52%;
  --tranY: -26%;
  --rotFront: 0;
  position: absolute;
}

@-webkit-keyframes flapWingFront {
  0% {
    -webkit-transform: rotate(0) translateX(var(--tranX)) translateY(var(--tranY));
    transform: rotate(0) translateX(var(--tranX)) translateY(var(--tranY));
  }
  100% {
    -webkit-transform: rotate(var(--rotFront)) translateX(var(--tranX)) translateY(var(--tranY));
    transform: rotate(var(--rotFront)) translateX(var(--tranX)) translateY(var(--tranY));
  }
}

.back-wing {
  -webkit-animation: flapWingBack 40ms ease-in-out infinite alternate-reverse both;
  animation: flapWingBack 40ms ease-in-out infinite alternate-reverse both;
  --btranX: -54%;
  --btranY: -15%;
  --rotBack: 0;
  position: absolute;
}

@-webkit-keyframes flapWingBack {
  0% {
    -webkit-transform: rotate(0) translateX(var(--btranX)) translateY(var(--btranY));
    transform: rotate(0) translateX(var(--btranX)) translateY(var(--btranY));
  }
  100% {
    -webkit-transform: rotate(var(--rotBack)) translateX(var(--btranX)) translateY(var(--btranY));
    transform: rotate(var(--rotBack)) translateX(--var(--btranX)) translateY(var(--btranY));
  }
}

#bee1 {
  transform: translateX(var(--tranX)) translateY(var(--tranY));
  --tranX: 0;
  --tranY: 0;
	background: red;
	transition: all 500ms ease-in-out;
}

<div class="image-contain">

  <svg id="bee1" class="bee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 340 275" width="75" height="50">
  <defs>
    <linearGradient id="a">
      <stop offset="0" stop-color="#c5c5c7"/>
      <stop offset="1" stop-color="#c5c5c7" stop-opacity="0"/>
    </linearGradient>
    <path d="M453.56 309.74c-11.86-45.92-22.57-71.57-55.36-100.67-21.86-19.41-40.14-15.15-54.82 12.76.16 1.03.93 6.18 2.32 15.46" id="d"/>
    <path d="M453.52 309.46c-78.71-25.57-114.71-49.86-107.99-72.87" id="b"/>
    <path d="M329.87 244.41c10.67.51 18.19-1.54 20.5-13.36 9.08-46.7-15.06-50.63-24.91-52.94-9.86-2.31-32.31-8.05-41.92-1.55-6.41 4.34-9.41 9.32-8.99 14.94 1.11 4.69 1.8 7.61 2.08 8.78.38 1.62 1.01 3.16 1.87 4.56.33.54-.81-1.33-.69-1.12 1.55 2.53 2.63 5.33 3.17 8.26 1.64 8.8 3.98 14.55 7.02 17.25 19.13 16.95 35.93 14.91 41.87 15.18z" id="e"/>
    <path d="M236.72 232.73l5.12 4.79-6.97 15.88 13.4-14.87-12.88-11.34-7.85 17.15z" id="f"/>
    <path d="M262.3 156.27c-.45 1.33-1.37 4.11-1.83 5.45a1.22 1.22 0 0 1-1.61.76c-3.15-1.2-11.39-4.37-14.53-5.58a1.358 1.358 0 0 1-.8-1.7c.44-1.33 1.37-4.11 1.81-5.44.22-.67.96-1.02 1.62-.77l14.53 5.58c.68.26 1.04 1.01.81 1.7z" id="g"/>
    <path d="M259.43 179.58c-.91.41-2.58 1.16-3.5 1.55a1 1 0 0 1-1.37-.62c-.91-2.8-3.25-10.14-4.16-12.95-.19-.62.1-1.28.69-1.54.92-.41 2.59-1.15 3.5-1.56.56-.24 1.2.04 1.38.62.91 2.81 3.25 10.16 4.16 12.96.19.61-.11 1.28-.7 1.54z" id="h"/>
    <path d="M254.44 164.19c-.36 1.07-1.09 3.28-1.45 4.35-.18.53-.77.81-1.29.6-2.51-.96-9.08-3.48-11.58-4.44-.55-.21-.83-.8-.64-1.35.35-1.07 1.09-3.29 1.44-4.34.18-.54.77-.82 1.3-.62 2.5.97 9.07 3.48 11.58 4.46.54.19.82.79.64 1.34z" id="i"/>
    <path d="M237.5 238.35c-10.09-8.2-9.08-28.86 2.26-46.12 11.32-17.26 28.73-24.61 38.81-16.42 10.09 8.2 9.08 28.87-2.25 46.12-11.34 17.26-28.73 24.61-38.82 16.42z" id="j"/>
    <path d="M268.55 175.57c-1.13.51-3.24 1.44-4.38 1.95-.69.3-1.5-.05-1.73-.78-1.13-3.52-4.08-12.72-5.2-16.26-.25-.76.12-1.6.87-1.92 1.13-.51 3.24-1.45 4.38-1.95.69-.31 1.5.05 1.73.78 1.13 3.52 4.08 12.73 5.2 16.25.25.77-.13 1.6-.87 1.93z" id="k"/>
    <path d="M247.35 234.76c-5.23-4-2.62-18.27 5.81-31.88 8.44-13.59 19.53-21.4 24.75-17.4 5.24 3.98 2.63 18.26-5.81 31.86-8.43 13.61-19.52 21.4-24.75 17.42z" id="l"/>
    <path d="M248.97 218.74c-1.11-.9 2.26-8.12 7.51-16.1 5.25-7.98 10.41-13.73 11.51-12.83 1.12.9-2.25 8.11-7.5 16.09s-10.41 13.74-11.52 12.84z" id="m"/>
    <linearGradient xlink:href="#a" id="n" x1="308.975" y1="187.42" x2="498.657" y2="182.332" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.09084 0 0 1 -28.066 14)"/>
    <linearGradient xlink:href="#a" id="c" x1="308.975" y1="187.42" x2="498.657" y2="182.332" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.72767 -.38085 .34914 .66708 10.105 193.084)"/>
  </defs>
  <g transform="translate(-177.91 -74.04)">
    <use xlink:href="#b" width="100%" height="100%" fill="#eaad22"/>
    <use xlink:href="#b" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
  </g>
  <path class="back-wing" d="M300.374 200.434s116.837-96.705 117.927-71.09c1.09 25.615-6.342 42.957-111.889 75.617z" fill="url(#c)" transform="translate(-177.91 -88.04)"/>
  <g transform="translate(-177.91 -88.04)">
    <g transform="translate(0 14)">
      <use xlink:href="#d" width="100%" height="100%" fill="#eaad22"/>
      <use xlink:href="#d" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#e" width="100%" height="100%" fill="#ead822"/>
      <use xlink:href="#e" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#f" width="100%" height="100%" fill="#ead822"/>
      <use xlink:href="#f" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#g" width="100%" height="100%" fill="#383729"/>
      <use xlink:href="#g" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#h" width="100%" height="100%" fill="#383729"/>
      <use xlink:href="#h" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#i" width="100%" height="100%" fill="#383729"/>
      <use xlink:href="#i" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#j" width="100%" height="100%" fill="#ead822"/>
      <use xlink:href="#j" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#k" width="100%" height="100%" fill="#383729"/>
      <use xlink:href="#k" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#l" width="100%" height="100%" fill="#3e3904"/>
      <use xlink:href="#l" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <g transform="translate(0 14)">
      <use xlink:href="#m" width="100%" height="100%" fill="#fff"/>
      <use xlink:href="#m" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/>
    </g>
    <path d="M336.576 240.154c4.009-.5-.136 5 1.328 6.432 1.4 1.37 9.97.116 7.93 2.627-2.134 2.628-10.78 3.916-15.078 6.175-4.108 2.158-8.267 7.628-12.097 8.105-4.008.5.137-5-1.328-6.432-1.4-1.37-9.97-.115-7.93-2.626 2.134-2.628 10.78-3.917 15.079-6.175 4.107-2.159 8.266-7.628 12.096-8.106z" fill="#463207"/>
    <path d="M343.13 288.255c-2.381 5.955-6.17-4.324-9.066-3.485-2.768.803-7.628 13.69-9.247 8.793-1.695-5.125 3.178-18.145 3.57-25.956.375-7.465-3.366-17.74-1.09-23.43 2.382-5.956 6.17 4.324 9.066 3.484 2.768-.802 7.628-13.69 9.247-8.793 1.695 5.125-3.177 18.145-3.57 25.957-.375 7.464 3.366 17.74 1.09 23.43z" fill="#463207"/>
    <ellipse cx="332.615" cy="297.798" rx="7.196" ry="21.188" fill="#463207"/>
    <path d="M341.673 329.106c.457 2.686-2.767-2.585-3.492-2.412-.693.166.387 6.002-1.092 3.506-1.548-2.612-2.65-8.512-4.092-12.255-1.377-3.576-4.586-8.84-5.023-11.408-.457-2.686 2.768 2.585 3.493 2.412.693-.166-.387-6.002 1.092-3.506 1.548 2.612 2.65 8.512 4.091 12.254 1.378 3.577 4.587 8.842 5.023 11.409z" fill="#463207"/>
    <ellipse cx="351.115" cy="128.439" rx="8.237" ry="25.267" transform="matrix(.91978 .39243 -.35584 .93455 0 0)" fill="#463207"/>
    <path d="M254.936 313.666c-1.91-.697 1.976-11.42 2.96-16.422.984-5 .702-12.594 3.596-16.898 2.893-4.304 4.709 1.01 6.618 1.707 1.91.697 7.09-2.064 6.107 2.937-.984 5.001-6.686 10.41-9.58 14.715-2.893 4.304-7.791 14.658-9.701 13.961z" fill="#463207"/>
    <path d="M237.744 319.857c-2.685.462 2.58-2.772 2.405-3.497-.166-.693-6.001.398-3.508-1.086 2.61-1.553 8.507-2.665 12.248-4.114 3.574-1.384 8.832-4.603 11.398-5.044 2.686-.462-2.58 2.772-2.405 3.497.167.693 6.002-.398 3.508 1.086-2.609 1.552-8.506 2.665-12.247 4.114-3.574 1.384-8.833 4.602-11.399 5.044zM288.076 232.159c-4.008-.5.137 5-1.328 6.432-1.399 1.369-9.97.115-7.93 2.626 2.134 2.628 10.78 3.916 15.079 6.175 4.107 2.159 8.266 7.628 12.097 8.106 4.008.5-.137-5 1.327-6.433 1.4-1.369 9.97-.115 7.93-2.626-2.134-2.628-10.78-3.916-15.078-6.175-4.108-2.158-8.267-7.628-12.097-8.105zM363.99 244.882c3.917.986-1.938 4.61-1.092 6.477.809 1.783 9.252 3.717 6.442 5.32-2.941 1.676-11.467-.254-16.292.295-4.61.525-10.467 4.118-14.21 3.176-3.918-.986 1.937-4.61 1.09-6.477-.808-1.783-9.251-3.717-6.44-5.32 2.94-1.676 11.466.254 16.29-.295 4.611-.525 10.468-4.118 14.212-3.176z" fill="#463207"/>
    <path d="M370.502 303.896c-2.736 7.294-7.087-5.296-10.415-4.268-3.18.983-8.761 16.767-10.622 10.77-1.947-6.277 3.65-22.224 4.101-31.792.43-9.143-3.866-21.727-1.252-28.697 2.736-7.294 7.087 5.296 10.415 4.268 3.18-.983 8.761-16.767 10.622-10.77 1.947 6.277-3.65 22.224-4.101 31.792-.43 9.143 3.866 21.727 1.252 28.697z" fill="#463207"/>
    <ellipse cx="238.882" cy="419.961" rx="7.196" ry="21.188" transform="rotate(-19.343)" fill="#463207"/>
    <path d="M383.416 343.67c1.321 2.383-3.467-1.522-4.094-1.119-.599.386 2.353 5.536.13 3.67-2.325-1.952-5.319-7.153-7.919-10.207-2.484-2.919-7.256-6.823-8.518-9.1-1.32-2.384 3.467 1.521 4.094 1.118.6-.386-2.353-5.535-.13-3.67 2.325 1.952 5.319 7.154 7.919 10.208 2.485 2.918 7.256 6.823 8.518 9.1z" fill="#463207"/>
    <path d="M415.769 310.79l-13.793-6.396s7.362-1.287 18.773-11.637c11.41-10.35 9.612-31.539 9.612-31.539s5.235 7.62 6.815 11.805c1.58 4.187-2.141 18.253-6.19 23.1-5.438 5.887-8.08 10.368-15.217 14.668zM388.927 298.598l-16.93-9.215s10.423-1.573 26.58-14.218c16.155-12.646 13.608-38.533 13.608-38.533s7.813 8.509 9.85 12.224c2.236 5.115-3.232 24.5-8.964 30.422-7.7 7.193-14.04 14.066-24.144 19.32z" fill="#2d2d2d"/>
  </g>
  <path class="front-wing" d="M308.975 201.42s197.045-41.837 182.552-11.024c-14.493 30.812-33.92 46.643-178.235 20.07z" fill="url(#n)" transform="translate(-177.91 -88.04)"/>
</svg>

</div>