actias-luna-still.svg

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 1000 1000"
  height="1000"
  width="1000"
>
  <defs>
    <linearGradient id="dark-bg-color">
      <stop stop-color="#050922" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="light-bg-color">
      <stop stop-color="#dce1e2" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="night-sky-color">
      <stop stop-color="#010313" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="moon-color">
      <stop offset="0%" stop-color="#D8D8DA" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="dark-moon-color">
      <stop stop-color="#151526" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="body-color">
      <stop stop-color="ghostwhite" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="body-fur-color">
      <stop stop-color="#fde141" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="body-shadow-color">
      <stop stop-color="#fffff8" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="wing-fill-color">
      <stop offset="0%" stop-color="aqua" stop-opacity=".8" />
      <stop offset="0%" stop-color="aquamarine" stop-opacity=".8" />
      <stop offset="0%" stop-color="limegreen" stop-opacity=".7" />
      <stop offset="0%" stop-color="#32cd78" stop-opacity=".7" />
      <stop offset="0%" stop-color="#6ad57c" stop-opacity=".85" />
    </linearGradient>
    <linearGradient id="tail-shadow-color" x1="0%" y1="100%" x2="42%" y2="0%">
      <stop offset="40%" stop-color="#6ad57c" stop-opacity=".80" />
      <stop offset="100%" stop-color="#112b07" stop-opacity=".6" />
    </linearGradient>
    <linearGradient id="wing-rim-color">
      <stop stop-color="#630453" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="wingeye-sclera-color">
      <stop offset="0%" stop-color="#fde141" stop-opacity="1" />
    </linearGradient>
    <linearGradient
      id="wingeye-sclera-fading"
      x1="0%"
      y1="100%"
      x2="20%"
      y2="0%"
    >
      <stop offset="60%" stop-color="#fde141" stop-opacity="1" />
      <stop offset="75%" stop-color="#fde141" stop-opacity=".4" />
      <stop offset="90%" stop-color="#fde141" stop-opacity="0" />
    </linearGradient>
    <linearGradient id="wingeye-pupil-color">
      <stop offset="0%" stop-color="#89e042" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="antenna-shaft-color">
      <stop stop-color="gold" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="antenna-vane-color">
      <stop stop-color="gold" stop-opacity=".4" />
    </linearGradient>
    <linearGradient id="antenna-stroke-color">
      <stop offset="0" stop-color="#504804" stop-opacity=".2" />
    </linearGradient>
    <path
      id="body-shape"
      d="M460,280C470,240,530,240,540,280S540,452,500,452S450,320,460,280Z"
    />
    <clipPath id="body-shape-clip">
      <use href="#body-shape" />
    </clipPath>
    <path
      id="hindwing-shape"
      d="M542,274
         C634,321,698,378,738,431
         C751.844,449.344,745,449,737,463
         C729,477,732,473,728,483
         C728,488,708,505,684,519
         S630,540,600,540
         C546,540,540,590,540,620
         S550,670,550,700
         C550,740,580,760,570,780
         C528,740,514,730,510,670
         C507,628,512,600,508,550
         S498,460,499,410
         S509,333,516,316
         S531,283,542,274
         Z"
    />
    <clipPath id="hindwing-shape-clip">
      <use href="#hindwing-shape" />
    </clipPath>
    <path
      id="hindwing-tail-shape"
      d="M550,700
         C550,740,580,760,570,780
         S540,816,530,810
         S520,790,530,770
         C540,750,550,730,550,700"
    />
    <path
      id="forewing-shape"
      d="M530,280
         C700,190,840,200,900,230
         C920,240,950,255,950,270
         C950,285,942,300,928,314
         C914,328,892,334,874,346
         C856,358,820,384,810,390
         S760,434,740,430
         S690,430,666,430
         S572,372,542,342
         C532,332,520,310,530,280
         Z"
    />
    <clipPath id="forewing-shape-clip">
      <use href="#forewing-shape" />
    </clipPath>
    <path
      id="upper-rim-half-shape"
      d="M555.26875,250.0925
        C713.8,191.05,843,201.5,900,230
        C770,200,636,244,650,250
        S670,274,670,286
        S664,310,656,310
        S644,302,642,298
        S632,276,650,270
        S630,240,550,290
        C526.5,294.75,500,262,555.26875,250.0925
        Z"
    />
    <path
      id="forewing-side-rim"
      d="M950,270
         C950,285,945,303,931,317
         S895,338,877,348
         S822,384,794,402
         C802,390,848,358,871,344
         S910,326,924,312
         S950,285,950,270
         Z"
    />
    <path
      id="hindwing-rim"
      d="M706,505
         C670,536,630,542,600,542
         S558,559,553,568
         S542,590,543,624
         S555,670,550,700
         C539,650,534,610,538,590
         S554,536,600,536
         S660,528,706,505
         Z"
    />
    <path
      id="forewing-brow-shape"
      d="M500,262
         C513,262,513,267,530,260
         C547,253,570,280,550,290
         C534,300,520,292,500,292
         C480,292,466,300,450,290
         C430,280,453,253,470,260
         C487,267,487,262,500,262
         Z"
    />
    <filter
      id="moon-blur"
      x="-50%"
      width="200%"
      y="-40%"
      height="180%"
      filterUnits="userSpaceOnUse"
    >
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
    <filter
      id="moon-glow-blur"
      x="-50%"
      width="200%"
      y="-40%"
      height="180%"
      filterUnits="userSpaceOnUse"
    >
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    <filter id="soft-blur" x="-50%" width="200%" y="-40%" height="180%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
      <feMerge>
        <feMergeNode />
        <feMergeNode />
        <feMergeNode />
      </feMerge>
    </filter>
    <filter id="strong-blur" y="-50%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
      <feMerge>
        <feMergeNode />
      </feMerge>
    </filter>
    <filter id="thin-blur" x="-50%" width="200%" y="-50%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
    <filter id="wing-rim-blur">
      <feGaussianBlur
        in="SourceGraphic"
        stdDeviation="3"
        result="strong-blur"
      />
      <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="weak-blur" />
      <feFlood flood-color="#eedd7c" />
      <feComposite in2="weak-blur" operator="in" />
      <feMerge result="blurred-rim">
        <feMergeNode />
        <feMergeNode />
        <feMergeNode />
        <feMergeNode in="strong-blur" />
        <feMergeNode in="strong-blur" />
        <feMergeNode in="strong-blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    <filter id="forewing-upper-rim-blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1.5" />
      <feMerge result="blurred-rim">
        <feMergeNode />
        <feMergeNode />
        <feMergeNode />
      </feMerge>
    </filter>
    <filter id="wingeye-iris-blur" x="-50%" width="200%" y="-50%" height="200%">
      <feFlood flood-color="#630453" />
      <feComposite in2="SourceGraphic" operator="in" />
      <feGaussianBlur stdDeviation="1,2" />
      <feMerge>
        <feMergeNode />
        <feMergeNode />
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    <filter id="moth-shadow-filter">
      <feFlood flood-color="#151526" result="dark-color" />
      <feComponentTransfer in="SourceGraphic" result="outline">
        <feFuncR type="identity" />
        <feFuncG type="identity" />
        <feFuncB type="identity" />
        <feFuncA type="table" tableValues="0 1 1 1" />
      </feComponentTransfer>
      <feGaussianBlur stdDeviation="1.5" />
      <feComposite in="dark-color" operator="in" />
      <feComposite in2="outline" operator="out" />
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <path d="M0,0v1000h1000V0z" fill="url(#night-sky-color)" />
  <circle cx="500" cy="500" r="800" fill="url(#night-sky-color)" />
  <g id="moon" transform="rotate(-25, 500, 500)" filter="url(#moon-blur)">
    <circle
      id="moon-glow"
      cx="500"
      cy="500"
      r="375"
      fill="url(#moon-color)"
      filter="url(#moon-glow-blur)"
      transform="translate(150,0) scale(0.7,1)"
    >
      <animateTransform
        attributeName="transform"
        type="translate"
        from="500 0"
        to="0 0"
        dur="14s"
        fill="freeze"
        begin="moonHidingOpeningAnim.begin"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.3178937883755 0.5 0.635787576751 1"
      />
      <animateTransform
        id="moonGlowOpeningAnim"
        attributeName="transform"
        type="scale"
        from="0 1"
        to="1 1"
        dur="14s"
        fill="freeze"
        begin="moonHidingOpeningAnim.begin"
        additive="sum"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.3178937883755 0.5 0.635787576751 1"
      />
      <animateTransform
        attributeName="transform"
        type="translate"
        from="0 0"
        to="500 0"
        dur="14s"
        repeatCount="1"
        fill="freeze"
        begin="moonHidingClosingAnim.begin"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.364212423249 0 0.6821062116245 0.5"
      />
      <animateTransform
        id="moonGlowClosingAnim"
        attributeName="transform"
        type="scale"
        from="1 1"
        to="0 1"
        dur="14s"
        fill="freeze"
        additive="sum"
        begin="moonHidingClosingAnim.begin"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.364212423249 0 0.6821062116245 0.5"
      />
    </circle>
    <circle cx="500" cy="500" r="375" fill="url(#dark-moon-color)" />
    <path
      id="moonLeftHalf"
      d="M500 875A350 350 0 1 1 500 125"
      fill="url(#moon-color)"
    >
      <animateTransform
        attributeName="transform"
        type="translate"
        from="500 0"
        to="0 0"
        dur="14s"
        fill="freeze"
        begin="moonHidingClosingAnim.end"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.3178937883755 0.5 0.635787576751 1"
      />
      <animateTransform
        id="moonLeftHalfOpeningAnim"
        attributeName="transform"
        type="scale"
        from="0 1"
        to="1 1"
        dur="14s"
        fill="freeze"
        begin="moonHidingClosingAnim.end"
        additive="sum"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.3178937883755 0.5 0.635787576751 1"
      />
      <animateTransform
        attributeName="transform"
        type="translate"
        from="0 0"
        to="500 0"
        dur="14s"
        repeatCount="1"
        fill="freeze"
        begin="moonHidingClosingAnim.begin"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.3 0 0.5 0.5"
      />
      <animateTransform
        id="moonLeftHalfClosingAnim"
        attributeName="transform"
        type="scale"
        from="1 1"
        to="0 1"
        dur="14s"
        fill="freeze"
        additive="sum"
        begin="moonHidingClosingAnim.begin"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.3 0 0.5 0.5"
      />
    </path>
    <path
      id="moonRightHalf"
      d="M499 125.001A350 350 0 1 1 499 874.999"
      fill="url(#moon-color)"
      transform="translate(500,0) scale(0,1)"
    >
      <animateTransform
        attributeName="transform"
        type="translate"
        from="499 0"
        to="0 0"
        dur="14s"
        fill="freeze"
        begin="moonHidingOpeningAnim.begin"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.5 0.5 0.7 1"
      />
      <animateTransform
        id="moonRightHalfOpeningAnim"
        attributeName="transform"
        type="scale"
        from="0 1"
        to="1 1"
        dur="14s"
        fill="freeze"
        begin="moonHidingOpeningAnim.begin"
        additive="sum"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.5 0.5 0.7 1"
      />
      <animateTransform
        attributeName="transform"
        type="translate"
        from="0 0"
        to="499 0"
        dur="14s"
        repeatCount="1"
        fill="freeze"
        begin="moonLeftHalfOpeningAnim.end"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.364212423249 0 0.6821062116245 0.5"
      />
      <animateTransform
        id="moonRightHalfClosingAnim"
        attributeName="transform"
        type="scale"
        from="1 1"
        to="0 1"
        dur="14s"
        fill="freeze"
        additive="sum"
        begin="moonLeftHalfOpeningAnim.end"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.364212423249 0 0.6821062116245 0.5"
      />
    </path>
    <circle
      id="moon-hiding-layer"
      cx="500"
      cy="500"
      r="375"
      fill="url(#dark-moon-color)"
      transform="translate(150,0) scale(0.7,1)"
    >
      <animateTransform
        attributeName="transform"
        type="translate"
        from="500 0"
        to="0 0"
        dur="14s"
        fill="freeze"
        begin="0s; moonRightHalfClosingAnim.end"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.3178937883755 0.5 0.635787576751 1"
      />
      <animateTransform
        id="moonHidingOpeningAnim"
        attributeName="transform"
        type="scale"
        from="0 1"
        to="1 1"
        dur="14s"
        fill="freeze"
        begin="0s; moonRightHalfClosingAnim.end"
        additive="sum"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.3178937883755 0.5 0.635787576751 1"
      />
      <animateTransform
        attributeName="transform"
        type="translate"
        from="0 0"
        to="500 0"
        dur="14s"
        repeatCount="1"
        fill="freeze"
        begin="moonHidingOpeningAnim.end"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.364212423249 0 0.6821062116245 0.5"
      />
      <animateTransform
        id="moonHidingClosingAnim"
        attributeName="transform"
        type="scale"
        from="1 1"
        to="0 1"
        dur="14s"
        fill="freeze"
        additive="sum"
        begin="moonHidingOpeningAnim.end"
        calcMode="spline"
        keyTimes="0;1"
        keySplines="0.364212423249 0 0.6821062116245 0.5"
      />
    </circle>
  </g>
  
  <g id="moth" transform="rotate(-45,500,500) translate(0, 40)">
    <g id="antennas">
      <g id="left-antenna">
        <path
          d="M498,270c6,-80,-10,-86,-60,-80c35,15,28,20,42,30s14,20,18,50z"
          fill="url(#antenna-vane-color)"
        />
        <path
          d="M500,270q0,-80,-60,-80c20,4,60,6,56,80z"
          stroke="url(#antenna-stroke-color)"
          stroke-width="1"
          fill="url(#antenna-shaft-color)"
        />
      </g>
      <g id="right-antenna">
        <path
          d="M502,270c-6,-60,9,-59,16,-66q14,-12,14,-26c8,10,10,32,-11,54s-14,22,-19,38z"
          fill="url(#antenna-vane-color)"
        />
        <path
          d="M500,270c5,-35,7,-40,20,-57s12,-28,12,-35c3,8,0,22,-10,36s-16,20,-18,56z"
          stroke="url(#antenna-stroke-color)"
          stroke-width="1"
          fill="url(#antenna-shaft-color)"
        />
      </g>
    </g>
    <g id="body" filter="url(#moth-shadow-filter)">
      <use href="#body-shape" fill="url(#body-color)" />
      <path
        d="M470,260
               C487,267,487,262,500,262
               S513,267,530,260
               C520,280,510,290,520,330
               C500,272,500,272,480,330
               C490,290,480,280,470,260
               Z"
        fill="url(#body-fur-color)"
        filter="url(#soft-blur)"
        clip-path="url(#body-shape-clip)"
      />
    </g>
    <g id="moth-wings">
      <g id="moth-right-wings">
        <g id="right-hindwing" transform="rotate(0,542,274)">
          <use href="#hindwing-tail-shape" fill="url(#tail-shadow-color)" />
          <use href="#hindwing-shape" fill="url(#wing-fill-color)" />
          
          <use
            href="#hindwing-rim"
            fill="url(#wing-rim-color)"
            filter="url(#wing-rim-blur)"
            clip-path="url(#hindwing-shape-clip)"
          />
          <use href="#hindwing-rim" fill="url(#wing-rim-color)" />
          
          <g
            id="hindwingeye-right"
            filter="url(#wingeye-iris-blur)"
            transform="rotate(-10,590,440)"
          >
            <path
              d="M573,430
                A20,20,0,0,1,607,430
                C615,450,608,460,590,460
                S565,450,573,430
                Z"
              fill="url(#wingeye-sclera-color)"
              stroke="url(#wing-rim-color)"
              stroke-width="1"
            />
            <path
              d="M573,430
                A20,20,0,0,1,607,430
                C596,426,584,426,573,430
                Z"
              fill="url(#wing-rim-color)"
            />
            <g filter="url(#wingeye-iris-blur)">
              <path
                d="M580,435
                  C582,434,586,433,590,433
                  S598,434,600,435
                  S602,438,602,440
                  S600,449,590,449
                  S578,442,578,440
                  S578,436,580,435
                  Z"
                fill="url(#body-color)"
              />
              <path
                d="M580,435
                  C582,434,586,433,590,433
                  S598,434,600,435
                  S598,439,590,439
                  S578,436,580,435
                  Z"
                fill="url(#wingeye-pupil-color)"
              />
            </g>
          </g>
        </g>
        <g id="right-forewing" transform="rotate(13,542,274)">
          <use href="#forewing-shape" fill="url(#wing-fill-color)" />
          <use
            href="#forewing-side-rim"
            fill="url(#wing-rim-color)"
            filter="url(#wing-rim-blur)"
            clip-path="url(#forewing-shape-clip)"
          />
          <use href="#forewing-side-rim" fill="url(#wing-rim-color)" />

          <use
            href="#upper-rim-half-shape"
            fill="url(#wing-rim-color)"
            filter="url(#forewing-upper-rim-blur)"
            clip-path="url(#forewing-shape-clip)"
          />
          <use href="#upper-rim-half-shape" fill="url(#wing-rim-color)" />

          <g id="forewingeye-right">
            <path
              fill="url(#wingeye-sclera-fading)"
              d="M650,256
                C664,256,670,274,670,286
                L652,271
                C663,266,652,260,650,256
                Z"
            />
            <path
              id="forewingeye-shape-right"
              d="M670,286
                C670,298,664,310,656,310
                S644,298,644,298
                S635,278,652,271
                S670,286,670,286
                Z"
              fill="url(#wingeye-sclera-color)"
            />
            <g filter="url(#wingeye-iris-blur)" id="wingeye-iris">
              <path
                id="forewingeye-iris-right"
                d="M656,273
                  C666,280,666,300,652,304
                  L652,299
                  C647,289,647,285,655,278
                  Z"
                fill="url(#body-color)"
              />
              <path
                id="forewingeye-pupil-right"
                d="M652,299
                  C647,289,647,285,655,278
                  C660,287,660,292,652,299
                  Z"
                fill="url(#wingeye-pupil-color)"
              />
              <path
                id="forewingeye-pupil-shadow-right"
                d="M652,299
                  C646,289,646,285,655,278
                  C648,285,650,294,652,299
                  Z"
                fill="url(#wing-rim-color)"
              />
            </g>
          </g>
        </g>
      </g>
      <g id="moth-left-wings">
        <g id="left-hindwing">
          <use
            href="#right-hindwing"
            transform="scale(-1,1) translate(-1000,0)"
          />
        </g>
        <g id="left-forewing">
          <use
            href="#right-forewing"
            transform="scale(-1,1) translate(-1000,0)"
          />
        </g>
      </g>
      <g id="forewing-brow">
        <use
          href="#forewing-brow-shape"
          fill="url(#wing-rim-color)"
          filter="url(#forewing-upper-rim-blur)"
        />
      </g>
    </g>
  </g>
</svg>