vkryukov · May 19, 2026 19:49
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Frog Rowing Through a Jungle River</title>
  <style>
    :root {
      color-scheme: dark;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #071d1d;
    }

    * {
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 20%, rgba(255, 214, 112, .16), transparent 24rem),
        linear-gradient(#092934, #07302b 44%, #041718);
    }

    svg {
      width: min(100vw, 150vh);
      height: auto;
      max-height: 100vh;
      display: block;
    }

    .mist {
      animation: driftMist 18s linear infinite;
    }

    .mist-2 {
      animation-duration: 24s;
      animation-delay: -8s;
    }

    .cloud {
      animation: driftCloud 28s linear infinite;
    }

    .cloud-2 {
      animation-duration: 34s;
      animation-delay: -12s;
    }

    .back-leaves {
      animation: swayWide 6s ease-in-out infinite alternate;
      transform-origin: 50% 100%;
    }

    .front-leaves {
      animation: swayTight 4.8s ease-in-out infinite alternate;
      transform-origin: 50% 100%;
    }

    .vine {
      animation: vineSwing 5.5s ease-in-out infinite alternate;
      transform-origin: top center;
    }

    .river-stripe {
      animation: waterFlow 8s linear infinite;
    }

    .river-stripe.fast {
      animation-duration: 5.8s;
    }

    .boat-group {
      animation: boatBob 2.8s ease-in-out infinite;
      transform-origin: 500px 515px;
    }

    .frog-body {
      animation: frogLean 2.4s ease-in-out infinite;
      transform-origin: 500px 448px;
    }

    .eye-left,
    .eye-right {
      animation: blink 6s ease-in-out infinite;
      transform-origin: center;
    }

    .oar-left {
      animation: rowLeft 2.4s ease-in-out infinite;
      transform-origin: 446px 470px;
    }

    .oar-right {
      animation: rowRight 2.4s ease-in-out infinite;
      transform-origin: 554px 470px;
    }

    .paddle-splash-left {
      animation: splashLeft 2.4s ease-in-out infinite;
      opacity: 0;
      transform-origin: 380px 563px;
    }

    .paddle-splash-right {
      animation: splashRight 2.4s ease-in-out infinite;
      opacity: 0;
      transform-origin: 620px 563px;
    }

    .firefly {
      animation: fireflyFloat 4s ease-in-out infinite;
    }

    .firefly:nth-of-type(2n) {
      animation-duration: 5.4s;
      animation-delay: -1.8s;
    }

    .firefly:nth-of-type(3n) {
      animation-duration: 6.2s;
      animation-delay: -3.2s;
    }

    .title {
      font-size: 23px;
      letter-spacing: 0;
      fill: rgba(240, 255, 216, .92);
      text-anchor: middle;
      paint-order: stroke;
      stroke: rgba(4, 19, 18, .52);
      stroke-width: 4;
      stroke-linejoin: round;
    }

    @keyframes driftMist {
      from { transform: translateX(-90px); }
      to { transform: translateX(90px); }
    }

    @keyframes driftCloud {
      from { transform: translateX(-190px); }
      to { transform: translateX(190px); }
    }

    @keyframes swayWide {
      from { transform: rotate(-2deg) translateX(-5px); }
      to { transform: rotate(2.5deg) translateX(5px); }
    }

    @keyframes swayTight {
      from { transform: rotate(1.2deg) translateX(4px); }
      to { transform: rotate(-1.8deg) translateX(-4px); }
    }

    @keyframes vineSwing {
      from { transform: rotate(-4deg); }
      to { transform: rotate(4deg); }
    }

    @keyframes waterFlow {
      from { transform: translateX(-210px); }
      to { transform: translateX(210px); }
    }

    @keyframes boatBob {
      0%, 100% { transform: translateY(0) rotate(-.6deg); }
      50% { transform: translateY(-10px) rotate(.8deg); }
    }

    @keyframes frogLean {
      0%, 100% { transform: rotate(-2deg) translateY(0); }
      50% { transform: rotate(3deg) translateY(5px); }
    }

    @keyframes rowLeft {
      0%, 100% { transform: rotate(18deg); }
      50% { transform: rotate(-28deg); }
    }

    @keyframes rowRight {
      0%, 100% { transform: rotate(-18deg); }
      50% { transform: rotate(28deg); }
    }

    @keyframes splashLeft {
      9%, 31% { opacity: 0; transform: scale(.6) translateY(0); }
      43% { opacity: .85; transform: scale(1) translateY(-8px); }
      61%, 100% { opacity: 0; transform: scale(1.28) translateY(-16px); }
    }

    @keyframes splashRight {
      0%, 47% { opacity: 0; transform: scale(.6) translateY(0); }
      59% { opacity: .85; transform: scale(1) translateY(-8px); }
      78%, 100% { opacity: 0; transform: scale(1.28) translateY(-16px); }
    }

    @keyframes blink {
      0%, 93%, 100% { transform: scaleY(1); }
      95%, 97% { transform: scaleY(.08); }
    }

    @keyframes fireflyFloat {
      0%, 100% { opacity: .28; transform: translate(0, 0) scale(.82); }
      50% { opacity: .98; transform: translate(12px, -18px) scale(1.18); }
    }

    .boat-group,
    .frog-body,
    .oar-left,
    .oar-right,
    .river-stripe,
    .mist,
    .cloud,
    .vine,
    .back-leaves,
    .front-leaves {
      transform-box: view-box;
    }
  </style>
 </head>
 <body>
  <svg viewBox="0 0 1000 700" role="img" aria-labelledby="title description" xmlns="http://www.w3.org/2000/svg">
    <title id="title">Animated frog rowing a small boat through a jungle river</title>
    <desc id="description">A self-contained animated SVG scene with a frog rowing, moving water, swaying jungle plants, drifting mist, and glowing fireflies.</desc>

    <defs>
      <linearGradient id="skyGradient" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stop-color="#0b3944"/>
        <stop offset=".54" stop-color="#0b3d34"/>
        <stop offset="1" stop-color="#06302f"/>
      </linearGradient>

      <linearGradient id="riverGradient" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stop-color="#195c5c"/>
        <stop offset=".46" stop-color="#0f7472"/>
        <stop offset="1" stop-color="#06383d"/>
      </linearGradient>

      <linearGradient id="boatGradient" x1="0" x2="1" y1="0" y2="1">
        <stop offset="0" stop-color="#8c5830"/>
        <stop offset=".45" stop-color="#b36a35"/>
        <stop offset="1" stop-color="#4c2a19"/>
      </linearGradient>

      <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
        <stop offset="0" stop-color="#fff8b7" stop-opacity=".95"/>
        <stop offset=".46" stop-color="#f6d46b" stop-opacity=".4"/>
        <stop offset="1" stop-color="#f6d46b" stop-opacity="0"/>
      </radialGradient>

      <filter id="softGlow" x="-70%" y="-70%" width="240%" height="240%">
        <feGaussianBlur stdDeviation="4" result="blur"/>
        <feMerge>
          <feMergeNode in="blur"/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>

      <filter id="shadow" x="-30%" y="-30%" width="160%" height="180%">
        <feDropShadow dx="0" dy="8" stdDeviation="7" flood-color="#031717" flood-opacity=".42"/>
      </filter>

      <path id="leafShape" d="M0 0 C32 -28 75 -15 98 18 C50 31 17 22 0 0Z"/>
      <path id="reed" d="M0 0 C18 -62 18 -132 4 -196"/>
    </defs>

    <rect width="1000" height="700" fill="url(#skyGradient)"/>
    <circle cx="512" cy="118" r="146" fill="url(#moonGlow)" opacity=".8"/>
    <circle cx="512" cy="118" r="45" fill="#ffef9a" opacity=".92"/>

    <g class="cloud" opacity=".18" fill="#ddffec">
      <animateTransform attributeName="transform" type="translate" values="-90 0;90 0;-90 0" dur="28s" repeatCount="indefinite"/>
      <ellipse cx="110" cy="100" rx="86" ry="18"/>
      <ellipse cx="170" cy="91" rx="64" ry="16"/>
      <ellipse cx="240" cy="104" rx="92" ry="20"/>
      <ellipse cx="690" cy="76" rx="74" ry="16"/>
      <ellipse cx="768" cy="89" rx="100" ry="19"/>
    </g>
    <g class="cloud cloud-2" opacity=".13" fill="#ccf8ed">
      <animateTransform attributeName="transform" type="translate" values="120 0;-120 0;120 0" dur="34s" repeatCount="indefinite"/>
      <ellipse cx="28" cy="174" rx="92" ry="17"/>
      <ellipse cx="112" cy="164" rx="80" ry="18"/>
      <ellipse cx="878" cy="149" rx="130" ry="21"/>
      <ellipse cx="958" cy="135" rx="76" ry="15"/>
    </g>

    <g opacity=".45" fill="#082620">
      <path d="M0 396 C74 284 143 248 206 365 C276 233 360 237 414 356 C491 243 581 227 636 374 C696 266 781 233 845 369 C910 269 957 257 1000 341 L1000 700 L0 700Z"/>
      <path d="M0 332 C80 259 133 257 176 333 C236 238 330 226 385 330 C452 254 527 240 584 326 C664 221 757 240 803 338 C865 254 942 242 1000 310 L1000 700 L0 700Z" opacity=".6"/>
    </g>

    <g class="back-leaves">
      <g fill="#0e5a34" opacity=".88">
        <use href="#leafShape" x="75" y="240" transform="rotate(-54 75 240) scale(1.4)"/>
        <use href="#leafShape" x="160" y="260" transform="rotate(-115 160 260) scale(1.1)"/>
        <use href="#leafShape" x="908" y="222" transform="rotate(226 908 222) scale(1.3)"/>
        <use href="#leafShape" x="810" y="274" transform="rotate(156 810 274) scale(1.05)"/>
      </g>
      <g fill="#177345" opacity=".82">
        <use href="#leafShape" x="50" y="330" transform="rotate(-30 50 330) scale(1.55)"/>
        <use href="#leafShape" x="945" y="344" transform="rotate(210 945 344) scale(1.48)"/>
      </g>
    </g>

    <g opacity=".85" stroke-linecap="round">
      <g transform="translate(78 525)" stroke="#16472f" stroke-width="11">
        <use href="#reed"/>
        <use href="#reed" x="34" transform="scale(.75) rotate(9)"/>
        <use href="#reed" x="-38" transform="scale(.88) rotate(-12)"/>
      </g>
      <g transform="translate(902 530)" stroke="#16472f" stroke-width="11">
        <use href="#reed"/>
        <use href="#reed" x="30" transform="scale(.9) rotate(11)"/>
        <use href="#reed" x="-34" transform="scale(.78) rotate(-9)"/>
      </g>
    </g>

    <g class="vine" fill="none" stroke="#125535" stroke-width="9" stroke-linecap="round">
      <animateTransform attributeName="transform" type="rotate" values="-2 500 0;2 500 0;-2 500 0" dur="5.5s" repeatCount="indefinite"/>
      <path d="M222 -20 C202 72 241 133 207 206 C185 251 179 286 203 327"/>
      <path d="M768 -18 C803 92 742 146 777 235 C793 275 785 318 759 356"/>
    </g>

    <path d="M0 358 C110 338 236 381 340 360 C458 336 540 336 655 362 C787 392 893 344 1000 363 L1000 700 L0 700Z" fill="url(#riverGradient)"/>
    <path d="M0 382 C136 360 241 398 365 379 C504 357 612 354 752 384 C860 407 932 384 1000 391 L1000 700 L0 700Z" fill="#0a4d52" opacity=".42"/>

    <g class="river-stripe" fill="none" stroke-linecap="round" opacity=".42">
      <animateTransform attributeName="transform" type="translate" values="-210 0;210 0;-210 0" dur="8s" repeatCount="indefinite"/>
      <path d="M-120 428 C-20 409 82 451 204 430 C286 416 349 419 424 435" stroke="#8de7cf" stroke-width="4"/>
      <path d="M468 424 C566 405 662 447 778 428 C862 413 922 416 1060 436" stroke="#72d5cc" stroke-width="3"/>
      <path d="M-80 585 C77 561 206 606 348 584 C460 567 569 568 714 591 C833 610 945 578 1100 594" stroke="#b5f6db" stroke-width="5"/>
    </g>
    <g class="river-stripe fast" fill="none" stroke-linecap="round" opacity=".34">
      <animateTransform attributeName="transform" type="translate" values="210 0;-210 0;210 0" dur="5.8s" repeatCount="indefinite"/>
      <path d="M-180 501 C-20 481 84 523 216 503 C325 487 422 490 530 509" stroke="#b2fff0" stroke-width="3"/>
      <path d="M588 498 C721 475 805 518 965 496 C1047 486 1096 490 1190 505" stroke="#89e0db" stroke-width="4"/>
      <path d="M-160 646 C8 627 111 659 246 642 C362 626 459 631 574 649" stroke="#6ed0c9" stroke-width="4"/>
    </g>

    <g class="mist" opacity=".19" fill="#e7fff2">
      <animateTransform attributeName="transform" type="translate" values="-90 0;90 0;-90 0" dur="18s" repeatCount="indefinite"/>
      <ellipse cx="180" cy="386" rx="120" ry="14"/>
      <ellipse cx="488" cy="371" rx="160" ry="17"/>
      <ellipse cx="830" cy="388" rx="132" ry="16"/>
    </g>
    <g class="mist mist-2" opacity=".13" fill="#d8ffef">
      <animateTransform attributeName="transform" type="translate" values="90 0;-90 0;90 0" dur="24s" repeatCount="indefinite"/>
      <ellipse cx="90" cy="468" rx="160" ry="13"/>
      <ellipse cx="614" cy="446" rx="188" ry="15"/>
      <ellipse cx="932" cy="462" rx="144" ry="12"/>
    </g>

    <g class="boat-group" filter="url(#shadow)">
      <animateTransform attributeName="transform" type="translate" values="0 0;0 -12;0 0" dur="2.8s" repeatCount="indefinite"/>
      <g class="oar-left">
        <animateTransform attributeName="transform" type="rotate" values="18 446 470;-32 446 470;18 446 470" dur="2.4s" repeatCount="indefinite"/>
        <rect x="326" y="456" width="172" height="11" rx="5.5" fill="#b9824d" transform="rotate(24 326 456)"/>
        <ellipse cx="315" cy="531" rx="18" ry="43" fill="#c68443" transform="rotate(24 315 531)"/>
        <ellipse class="paddle-splash-left" cx="316" cy="562" rx="44" ry="11" fill="none" stroke="#c7fff2" stroke-width="5"/>
      </g>
      <g class="oar-right">
        <animateTransform attributeName="transform" type="rotate" values="-18 554 470;32 554 470;-18 554 470" dur="2.4s" repeatCount="indefinite"/>
        <rect x="502" y="456" width="172" height="11" rx="5.5" fill="#b9824d" transform="rotate(-24 674 456)"/>
        <ellipse cx="685" cy="531" rx="18" ry="43" fill="#c68443" transform="rotate(-24 685 531)"/>
        <ellipse class="paddle-splash-right" cx="684" cy="562" rx="44" ry="11" fill="none" stroke="#c7fff2" stroke-width="5"/>
      </g>

      <path d="M280 484 C337 553 666 553 720 484 C646 514 354 514 280 484Z" fill="#301a11" opacity=".45"/>
      <path d="M252 466 C316 548 683 548 748 466 C654 491 347 491 252 466Z" fill="url(#boatGradient)"/>
      <path d="M295 475 C364 511 634 511 705 475 C651 497 350 497 295 475Z" fill="#452616"/>
      <path d="M267 464 C337 489 663 489 733 464" fill="none" stroke="#d28a4a" stroke-width="10" stroke-linecap="round"/>
      <path d="M325 502 C432 532 568 532 675 502" fill="none" stroke="#24130c" stroke-width="7" opacity=".28" stroke-linecap="round"/>

      <g class="frog-body">
        <animateTransform attributeName="transform" type="rotate" values="-2 500 448;4 500 448;-2 500 448" dur="2.4s" repeatCount="indefinite"/>
        <ellipse cx="500" cy="444" rx="78" ry="61" fill="#50b84b"/>
        <ellipse cx="500" cy="467" rx="55" ry="36" fill="#86db64" opacity=".82"/>
        <circle cx="460" cy="394" r="31" fill="#63ca54"/>
        <circle cx="540" cy="394" r="31" fill="#63ca54"/>
        <circle cx="460" cy="393" r="21" fill="#efffd8"/>
        <circle cx="540" cy="393" r="21" fill="#efffd8"/>
        <circle class="eye-left" cx="467" cy="391" r="8" fill="#102020"/>
        <circle class="eye-right" cx="533" cy="391" r="8" fill="#102020"/>
        <path d="M463 433 C481 449 519 449 537 433" fill="none" stroke="#184b30" stroke-width="6" stroke-linecap="round"/>
        <circle cx="474" cy="424" r="4" fill="#276836"/>
        <circle cx="526" cy="424" r="4" fill="#276836"/>
        <path d="M433 452 C407 469 395 488 386 513" fill="none" stroke="#4dab45" stroke-width="18" stroke-linecap="round"/>
        <path d="M567 452 C593 469 605 488 614 513" fill="none" stroke="#4dab45" stroke-width="18" stroke-linecap="round"/>
        <path d="M450 494 C421 517 390 522 355 509" fill="none" stroke="#3b973a" stroke-width="16" stroke-linecap="round"/>
        <path d="M550 494 C579 517 610 522 645 509" fill="none" stroke="#3b973a" stroke-width="16" stroke-linecap="round"/>
      </g>
    </g>

    <g class="front-leaves">
      <g fill="#0c4a31">
        <use href="#leafShape" x="-14" y="617" transform="rotate(-42 -14 617) scale(2.0)"/>
        <use href="#leafShape" x="92" y="664" transform="rotate(-100 92 664) scale(1.6)"/>
        <use href="#leafShape" x="1011" y="620" transform="rotate(222 1011 620) scale(2.05)"/>
        <use href="#leafShape" x="895" y="671" transform="rotate(153 895 671) scale(1.5)"/>
      </g>
      <g fill="#16723f">
        <use href="#leafShape" x="24" y="567" transform="rotate(-18 24 567) scale(1.28)"/>
        <use href="#leafShape" x="963" y="566" transform="rotate(198 963 566) scale(1.28)"/>
      </g>
    </g>

    <g filter="url(#softGlow)">
      <circle class="firefly" cx="160" cy="236" r="4" fill="#fbff94">
        <animate attributeName="opacity" values=".25;1;.25" dur="4s" repeatCount="indefinite"/>
        <animateTransform attributeName="transform" type="translate" values="0 0;12 -18;0 0" dur="4s" repeatCount="indefinite"/>
      </circle>
      <circle class="firefly" cx="276" cy="314" r="3.5" fill="#e9ff87">
        <animate attributeName="opacity" values=".2;.95;.2" dur="5.4s" begin="-1.8s" repeatCount="indefinite"/>
        <animateTransform attributeName="transform" type="translate" values="0 0;-10 -16;0 0" dur="5.4s" begin="-1.8s" repeatCount="indefinite"/>
      </circle>
      <circle class="firefly" cx="730" cy="265" r="4" fill="#fbff94">
        <animate attributeName="opacity" values=".25;1;.25" dur="6.2s" begin="-3.2s" repeatCount="indefinite"/>
        <animateTransform attributeName="transform" type="translate" values="0 0;13 -21;0 0" dur="6.2s" begin="-3.2s" repeatCount="indefinite"/>
      </circle>
      <circle class="firefly" cx="846" cy="325" r="3.5" fill="#e9ff87">
        <animate attributeName="opacity" values=".2;.92;.2" dur="4.8s" begin="-1.1s" repeatCount="indefinite"/>
        <animateTransform attributeName="transform" type="translate" values="0 0;-12 -15;0 0" dur="4.8s" begin="-1.1s" repeatCount="indefinite"/>
      </circle>
      <circle class="firefly" cx="628" cy="182" r="3" fill="#fff5a1">
        <animate attributeName="opacity" values=".24;.95;.24" dur="5.8s" begin="-2.4s" repeatCount="indefinite"/>
        <animateTransform attributeName="transform" type="translate" values="0 0;8 -20;0 0" dur="5.8s" begin="-2.4s" repeatCount="indefinite"/>
      </circle>
      <circle class="firefly" cx="371" cy="196" r="3" fill="#fff5a1">
        <animate attributeName="opacity" values=".2;.9;.2" dur="4.6s" begin="-3s" repeatCount="indefinite"/>
        <animateTransform attributeName="transform" type="translate" values="0 0;-9 -17;0 0" dur="4.6s" begin="-3s" repeatCount="indefinite"/>
      </circle>
    </g>

    <text class="title" x="500" y="662">Moonlit Jungle Row</text>
  </svg>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Frog Rowing Through a Jungle River</title>
	<style>
	:root {
	color-scheme: dark;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: #071d1d;
	}

	* {
	box-sizing: border-box;
	}

	body {
	min-height: 100vh;
	margin: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	background:
	radial-gradient(circle at 50% 20%, rgba(255, 214, 112, .16), transparent 24rem),
	linear-gradient(#092934, #07302b 44%, #041718);
	}

	svg {
	width: min(100vw, 150vh);
	height: auto;
	max-height: 100vh;
	display: block;
	}

	.mist {
	animation: driftMist 18s linear infinite;
	}

	.mist-2 {
	animation-duration: 24s;
	animation-delay: -8s;
	}

	.cloud {
	animation: driftCloud 28s linear infinite;
	}

	.cloud-2 {
	animation-duration: 34s;
	animation-delay: -12s;
	}

	.back-leaves {
	animation: swayWide 6s ease-in-out infinite alternate;
	transform-origin: 50% 100%;
	}

	.front-leaves {
	animation: swayTight 4.8s ease-in-out infinite alternate;
	transform-origin: 50% 100%;
	}

	.vine {
	animation: vineSwing 5.5s ease-in-out infinite alternate;
	transform-origin: top center;
	}

	.river-stripe {
	animation: waterFlow 8s linear infinite;
	}

	.river-stripe.fast {
	animation-duration: 5.8s;
	}

	.boat-group {
	animation: boatBob 2.8s ease-in-out infinite;
	transform-origin: 500px 515px;
	}

	.frog-body {
	animation: frogLean 2.4s ease-in-out infinite;
	transform-origin: 500px 448px;
	}

	.eye-left,
	.eye-right {
	animation: blink 6s ease-in-out infinite;
	transform-origin: center;
	}

	.oar-left {
	animation: rowLeft 2.4s ease-in-out infinite;
	transform-origin: 446px 470px;
	}

	.oar-right {
	animation: rowRight 2.4s ease-in-out infinite;
	transform-origin: 554px 470px;
	}

	.paddle-splash-left {
	animation: splashLeft 2.4s ease-in-out infinite;
	opacity: 0;
	transform-origin: 380px 563px;
	}

	.paddle-splash-right {
	animation: splashRight 2.4s ease-in-out infinite;
	opacity: 0;
	transform-origin: 620px 563px;
	}

	.firefly {
	animation: fireflyFloat 4s ease-in-out infinite;
	}

	.firefly:nth-of-type(2n) {
	animation-duration: 5.4s;
	animation-delay: -1.8s;
	}

	.firefly:nth-of-type(3n) {
	animation-duration: 6.2s;
	animation-delay: -3.2s;
	}

	.title {
	font-size: 23px;
	letter-spacing: 0;
	fill: rgba(240, 255, 216, .92);
	text-anchor: middle;
	paint-order: stroke;
	stroke: rgba(4, 19, 18, .52);
	stroke-width: 4;
	stroke-linejoin: round;
	}

	@keyframes driftMist {
	from { transform: translateX(-90px); }
	to { transform: translateX(90px); }
	}

	@keyframes driftCloud {
	from { transform: translateX(-190px); }
	to { transform: translateX(190px); }
	}

	@keyframes swayWide {
	from { transform: rotate(-2deg) translateX(-5px); }
	to { transform: rotate(2.5deg) translateX(5px); }
	}

	@keyframes swayTight {
	from { transform: rotate(1.2deg) translateX(4px); }
	to { transform: rotate(-1.8deg) translateX(-4px); }
	}

	@keyframes vineSwing {
	from { transform: rotate(-4deg); }
	to { transform: rotate(4deg); }
	}

	@keyframes waterFlow {
	from { transform: translateX(-210px); }
	to { transform: translateX(210px); }
	}

	@keyframes boatBob {
	0%, 100% { transform: translateY(0) rotate(-.6deg); }
	50% { transform: translateY(-10px) rotate(.8deg); }
	}

	@keyframes frogLean {
	0%, 100% { transform: rotate(-2deg) translateY(0); }
	50% { transform: rotate(3deg) translateY(5px); }
	}

	@keyframes rowLeft {
	0%, 100% { transform: rotate(18deg); }
	50% { transform: rotate(-28deg); }
	}

	@keyframes rowRight {
	0%, 100% { transform: rotate(-18deg); }
	50% { transform: rotate(28deg); }
	}

	@keyframes splashLeft {
	9%, 31% { opacity: 0; transform: scale(.6) translateY(0); }
	43% { opacity: .85; transform: scale(1) translateY(-8px); }
	61%, 100% { opacity: 0; transform: scale(1.28) translateY(-16px); }
	}

	@keyframes splashRight {
	0%, 47% { opacity: 0; transform: scale(.6) translateY(0); }
	59% { opacity: .85; transform: scale(1) translateY(-8px); }
	78%, 100% { opacity: 0; transform: scale(1.28) translateY(-16px); }
	}

	@keyframes blink {
	0%, 93%, 100% { transform: scaleY(1); }
	95%, 97% { transform: scaleY(.08); }
	}

	@keyframes fireflyFloat {
	0%, 100% { opacity: .28; transform: translate(0, 0) scale(.82); }
	50% { opacity: .98; transform: translate(12px, -18px) scale(1.18); }
	}

	.boat-group,
	.frog-body,
	.oar-left,
	.oar-right,
	.river-stripe,
	.mist,
	.cloud,
	.vine,
	.back-leaves,
	.front-leaves {
	transform-box: view-box;
	}
	</style>
	</head>
	<body>
	<svg viewBox="0 0 1000 700" role="img" aria-labelledby="title description" xmlns="http://www.w3.org/2000/svg">
	<title id="title">Animated frog rowing a small boat through a jungle river</title>
	<desc id="description">A self-contained animated SVG scene with a frog rowing, moving water, swaying jungle plants, drifting mist, and glowing fireflies.</desc>

	<defs>
	<linearGradient id="skyGradient" x1="0" x2="0" y1="0" y2="1">
	<stop offset="0" stop-color="#0b3944"/>
	<stop offset=".54" stop-color="#0b3d34"/>
	<stop offset="1" stop-color="#06302f"/>
	</linearGradient>

	<linearGradient id="riverGradient" x1="0" x2="0" y1="0" y2="1">
	<stop offset="0" stop-color="#195c5c"/>
	<stop offset=".46" stop-color="#0f7472"/>
	<stop offset="1" stop-color="#06383d"/>
	</linearGradient>

	<linearGradient id="boatGradient" x1="0" x2="1" y1="0" y2="1">
	<stop offset="0" stop-color="#8c5830"/>
	<stop offset=".45" stop-color="#b36a35"/>
	<stop offset="1" stop-color="#4c2a19"/>
	</linearGradient>

	<radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
	<stop offset="0" stop-color="#fff8b7" stop-opacity=".95"/>
	<stop offset=".46" stop-color="#f6d46b" stop-opacity=".4"/>
	<stop offset="1" stop-color="#f6d46b" stop-opacity="0"/>
	</radialGradient>

	<filter id="softGlow" x="-70%" y="-70%" width="240%" height="240%">
	<feGaussianBlur stdDeviation="4" result="blur"/>
	<feMerge>
	<feMergeNode in="blur"/>
	<feMergeNode in="SourceGraphic"/>
	</feMerge>
	</filter>

	<filter id="shadow" x="-30%" y="-30%" width="160%" height="180%">
	<feDropShadow dx="0" dy="8" stdDeviation="7" flood-color="#031717" flood-opacity=".42"/>
	</filter>

	<path id="leafShape" d="M0 0 C32 -28 75 -15 98 18 C50 31 17 22 0 0Z"/>
	<path id="reed" d="M0 0 C18 -62 18 -132 4 -196"/>
	</defs>

	<rect width="1000" height="700" fill="url(#skyGradient)"/>
	<circle cx="512" cy="118" r="146" fill="url(#moonGlow)" opacity=".8"/>
	<circle cx="512" cy="118" r="45" fill="#ffef9a" opacity=".92"/>

	<g class="cloud" opacity=".18" fill="#ddffec">
	<animateTransform attributeName="transform" type="translate" values="-90 0;90 0;-90 0" dur="28s" repeatCount="indefinite"/>
	<ellipse cx="110" cy="100" rx="86" ry="18"/>
	<ellipse cx="170" cy="91" rx="64" ry="16"/>
	<ellipse cx="240" cy="104" rx="92" ry="20"/>
	<ellipse cx="690" cy="76" rx="74" ry="16"/>
	<ellipse cx="768" cy="89" rx="100" ry="19"/>
	</g>
	<g class="cloud cloud-2" opacity=".13" fill="#ccf8ed">
	<animateTransform attributeName="transform" type="translate" values="120 0;-120 0;120 0" dur="34s" repeatCount="indefinite"/>
	<ellipse cx="28" cy="174" rx="92" ry="17"/>
	<ellipse cx="112" cy="164" rx="80" ry="18"/>
	<ellipse cx="878" cy="149" rx="130" ry="21"/>
	<ellipse cx="958" cy="135" rx="76" ry="15"/>
	</g>

	<g opacity=".45" fill="#082620">
	<path d="M0 396 C74 284 143 248 206 365 C276 233 360 237 414 356 C491 243 581 227 636 374 C696 266 781 233 845 369 C910 269 957 257 1000 341 L1000 700 L0 700Z"/>
	<path d="M0 332 C80 259 133 257 176 333 C236 238 330 226 385 330 C452 254 527 240 584 326 C664 221 757 240 803 338 C865 254 942 242 1000 310 L1000 700 L0 700Z" opacity=".6"/>
	</g>

	<g class="back-leaves">
	<g fill="#0e5a34" opacity=".88">
	<use href="#leafShape" x="75" y="240" transform="rotate(-54 75 240) scale(1.4)"/>
	<use href="#leafShape" x="160" y="260" transform="rotate(-115 160 260) scale(1.1)"/>
	<use href="#leafShape" x="908" y="222" transform="rotate(226 908 222) scale(1.3)"/>
	<use href="#leafShape" x="810" y="274" transform="rotate(156 810 274) scale(1.05)"/>
	</g>
	<g fill="#177345" opacity=".82">
	<use href="#leafShape" x="50" y="330" transform="rotate(-30 50 330) scale(1.55)"/>
	<use href="#leafShape" x="945" y="344" transform="rotate(210 945 344) scale(1.48)"/>
	</g>
	</g>

	<g opacity=".85" stroke-linecap="round">
	<g transform="translate(78 525)" stroke="#16472f" stroke-width="11">
	<use href="#reed"/>
	<use href="#reed" x="34" transform="scale(.75) rotate(9)"/>
	<use href="#reed" x="-38" transform="scale(.88) rotate(-12)"/>
	</g>
	<g transform="translate(902 530)" stroke="#16472f" stroke-width="11">
	<use href="#reed"/>
	<use href="#reed" x="30" transform="scale(.9) rotate(11)"/>
	<use href="#reed" x="-34" transform="scale(.78) rotate(-9)"/>
	</g>
	</g>

	<g class="vine" fill="none" stroke="#125535" stroke-width="9" stroke-linecap="round">
	<animateTransform attributeName="transform" type="rotate" values="-2 500 0;2 500 0;-2 500 0" dur="5.5s" repeatCount="indefinite"/>
	<path d="M222 -20 C202 72 241 133 207 206 C185 251 179 286 203 327"/>
	<path d="M768 -18 C803 92 742 146 777 235 C793 275 785 318 759 356"/>
	</g>

	<path d="M0 358 C110 338 236 381 340 360 C458 336 540 336 655 362 C787 392 893 344 1000 363 L1000 700 L0 700Z" fill="url(#riverGradient)"/>
	<path d="M0 382 C136 360 241 398 365 379 C504 357 612 354 752 384 C860 407 932 384 1000 391 L1000 700 L0 700Z" fill="#0a4d52" opacity=".42"/>

	<g class="river-stripe" fill="none" stroke-linecap="round" opacity=".42">
	<animateTransform attributeName="transform" type="translate" values="-210 0;210 0;-210 0" dur="8s" repeatCount="indefinite"/>
	<path d="M-120 428 C-20 409 82 451 204 430 C286 416 349 419 424 435" stroke="#8de7cf" stroke-width="4"/>
	<path d="M468 424 C566 405 662 447 778 428 C862 413 922 416 1060 436" stroke="#72d5cc" stroke-width="3"/>
	<path d="M-80 585 C77 561 206 606 348 584 C460 567 569 568 714 591 C833 610 945 578 1100 594" stroke="#b5f6db" stroke-width="5"/>
	</g>
	<g class="river-stripe fast" fill="none" stroke-linecap="round" opacity=".34">
	<animateTransform attributeName="transform" type="translate" values="210 0;-210 0;210 0" dur="5.8s" repeatCount="indefinite"/>
	<path d="M-180 501 C-20 481 84 523 216 503 C325 487 422 490 530 509" stroke="#b2fff0" stroke-width="3"/>
	<path d="M588 498 C721 475 805 518 965 496 C1047 486 1096 490 1190 505" stroke="#89e0db" stroke-width="4"/>
	<path d="M-160 646 C8 627 111 659 246 642 C362 626 459 631 574 649" stroke="#6ed0c9" stroke-width="4"/>
	</g>

	<g class="mist" opacity=".19" fill="#e7fff2">
	<animateTransform attributeName="transform" type="translate" values="-90 0;90 0;-90 0" dur="18s" repeatCount="indefinite"/>
	<ellipse cx="180" cy="386" rx="120" ry="14"/>
	<ellipse cx="488" cy="371" rx="160" ry="17"/>
	<ellipse cx="830" cy="388" rx="132" ry="16"/>
	</g>
	<g class="mist mist-2" opacity=".13" fill="#d8ffef">
	<animateTransform attributeName="transform" type="translate" values="90 0;-90 0;90 0" dur="24s" repeatCount="indefinite"/>
	<ellipse cx="90" cy="468" rx="160" ry="13"/>
	<ellipse cx="614" cy="446" rx="188" ry="15"/>
	<ellipse cx="932" cy="462" rx="144" ry="12"/>
	</g>

	<g class="boat-group" filter="url(#shadow)">
	<animateTransform attributeName="transform" type="translate" values="0 0;0 -12;0 0" dur="2.8s" repeatCount="indefinite"/>
	<g class="oar-left">
	<animateTransform attributeName="transform" type="rotate" values="18 446 470;-32 446 470;18 446 470" dur="2.4s" repeatCount="indefinite"/>
	<rect x="326" y="456" width="172" height="11" rx="5.5" fill="#b9824d" transform="rotate(24 326 456)"/>
	<ellipse cx="315" cy="531" rx="18" ry="43" fill="#c68443" transform="rotate(24 315 531)"/>
	<ellipse class="paddle-splash-left" cx="316" cy="562" rx="44" ry="11" fill="none" stroke="#c7fff2" stroke-width="5"/>
	</g>
	<g class="oar-right">
	<animateTransform attributeName="transform" type="rotate" values="-18 554 470;32 554 470;-18 554 470" dur="2.4s" repeatCount="indefinite"/>
	<rect x="502" y="456" width="172" height="11" rx="5.5" fill="#b9824d" transform="rotate(-24 674 456)"/>
	<ellipse cx="685" cy="531" rx="18" ry="43" fill="#c68443" transform="rotate(-24 685 531)"/>
	<ellipse class="paddle-splash-right" cx="684" cy="562" rx="44" ry="11" fill="none" stroke="#c7fff2" stroke-width="5"/>
	</g>

	<path d="M280 484 C337 553 666 553 720 484 C646 514 354 514 280 484Z" fill="#301a11" opacity=".45"/>
	<path d="M252 466 C316 548 683 548 748 466 C654 491 347 491 252 466Z" fill="url(#boatGradient)"/>
	<path d="M295 475 C364 511 634 511 705 475 C651 497 350 497 295 475Z" fill="#452616"/>
	<path d="M267 464 C337 489 663 489 733 464" fill="none" stroke="#d28a4a" stroke-width="10" stroke-linecap="round"/>
	<path d="M325 502 C432 532 568 532 675 502" fill="none" stroke="#24130c" stroke-width="7" opacity=".28" stroke-linecap="round"/>

	<g class="frog-body">
	<animateTransform attributeName="transform" type="rotate" values="-2 500 448;4 500 448;-2 500 448" dur="2.4s" repeatCount="indefinite"/>
	<ellipse cx="500" cy="444" rx="78" ry="61" fill="#50b84b"/>
	<ellipse cx="500" cy="467" rx="55" ry="36" fill="#86db64" opacity=".82"/>
	<circle cx="460" cy="394" r="31" fill="#63ca54"/>
	<circle cx="540" cy="394" r="31" fill="#63ca54"/>
	<circle cx="460" cy="393" r="21" fill="#efffd8"/>
	<circle cx="540" cy="393" r="21" fill="#efffd8"/>
	<circle class="eye-left" cx="467" cy="391" r="8" fill="#102020"/>
	<circle class="eye-right" cx="533" cy="391" r="8" fill="#102020"/>
	<path d="M463 433 C481 449 519 449 537 433" fill="none" stroke="#184b30" stroke-width="6" stroke-linecap="round"/>
	<circle cx="474" cy="424" r="4" fill="#276836"/>
	<circle cx="526" cy="424" r="4" fill="#276836"/>
	<path d="M433 452 C407 469 395 488 386 513" fill="none" stroke="#4dab45" stroke-width="18" stroke-linecap="round"/>
	<path d="M567 452 C593 469 605 488 614 513" fill="none" stroke="#4dab45" stroke-width="18" stroke-linecap="round"/>
	<path d="M450 494 C421 517 390 522 355 509" fill="none" stroke="#3b973a" stroke-width="16" stroke-linecap="round"/>
	<path d="M550 494 C579 517 610 522 645 509" fill="none" stroke="#3b973a" stroke-width="16" stroke-linecap="round"/>
	</g>
	</g>

	<g class="front-leaves">
	<g fill="#0c4a31">
	<use href="#leafShape" x="-14" y="617" transform="rotate(-42 -14 617) scale(2.0)"/>
	<use href="#leafShape" x="92" y="664" transform="rotate(-100 92 664) scale(1.6)"/>
	<use href="#leafShape" x="1011" y="620" transform="rotate(222 1011 620) scale(2.05)"/>
	<use href="#leafShape" x="895" y="671" transform="rotate(153 895 671) scale(1.5)"/>
	</g>
	<g fill="#16723f">
	<use href="#leafShape" x="24" y="567" transform="rotate(-18 24 567) scale(1.28)"/>
	<use href="#leafShape" x="963" y="566" transform="rotate(198 963 566) scale(1.28)"/>
	</g>
	</g>

	<g filter="url(#softGlow)">
	<circle class="firefly" cx="160" cy="236" r="4" fill="#fbff94">
	<animate attributeName="opacity" values=".25;1;.25" dur="4s" repeatCount="indefinite"/>
	<animateTransform attributeName="transform" type="translate" values="0 0;12 -18;0 0" dur="4s" repeatCount="indefinite"/>
	</circle>
	<circle class="firefly" cx="276" cy="314" r="3.5" fill="#e9ff87">
	<animate attributeName="opacity" values=".2;.95;.2" dur="5.4s" begin="-1.8s" repeatCount="indefinite"/>
	<animateTransform attributeName="transform" type="translate" values="0 0;-10 -16;0 0" dur="5.4s" begin="-1.8s" repeatCount="indefinite"/>
	</circle>
	<circle class="firefly" cx="730" cy="265" r="4" fill="#fbff94">
	<animate attributeName="opacity" values=".25;1;.25" dur="6.2s" begin="-3.2s" repeatCount="indefinite"/>
	<animateTransform attributeName="transform" type="translate" values="0 0;13 -21;0 0" dur="6.2s" begin="-3.2s" repeatCount="indefinite"/>
	</circle>
	<circle class="firefly" cx="846" cy="325" r="3.5" fill="#e9ff87">
	<animate attributeName="opacity" values=".2;.92;.2" dur="4.8s" begin="-1.1s" repeatCount="indefinite"/>
	<animateTransform attributeName="transform" type="translate" values="0 0;-12 -15;0 0" dur="4.8s" begin="-1.1s" repeatCount="indefinite"/>
	</circle>
	<circle class="firefly" cx="628" cy="182" r="3" fill="#fff5a1">
	<animate attributeName="opacity" values=".24;.95;.24" dur="5.8s" begin="-2.4s" repeatCount="indefinite"/>
	<animateTransform attributeName="transform" type="translate" values="0 0;8 -20;0 0" dur="5.8s" begin="-2.4s" repeatCount="indefinite"/>
	</circle>
	<circle class="firefly" cx="371" cy="196" r="3" fill="#fff5a1">
	<animate attributeName="opacity" values=".2;.9;.2" dur="4.6s" begin="-3s" repeatCount="indefinite"/>
	<animateTransform attributeName="transform" type="translate" values="0 0;-9 -17;0 0" dur="4.6s" begin="-3s" repeatCount="indefinite"/>
	</circle>
	</g>

	<text class="title" x="500" y="662">Moonlit Jungle Row</text>
	</svg>
	</body>
	</html>
No results found