nobody told us, but Pelikan can be ANIMATEEED!
#80
by KottCh - opened
yep, was shocked when saw it on orcarouter OrcaSAQ-2-27B page. I asked there for exact prompt. but while waiting, retrieved text from svg file itself & successfully created on Ternary-Bonsai-2-27. well it is in less optimistic colors, but direction of road is properly animated than in their svg.../llama-cli -m Ternary-Bonsai-2-27B-PQ2_0.gguf --temp 1 --top-p 0.95 --min-p 0 --top-k 20 --repeat-penalty 1 --presence-penalty 0 --seed 42 --ctx-size 114688
prompt I recreated from source:create an animated illustration in a SVG format: Brown pelican riding a bicycle along a coastal road at golden hour. a brown pelican pedals a red road bicycle; the wheels, cranks and legs move, the throat pouch jiggles, and the coastal background scrolls with parallax.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 640" width="960" height="640" role="img">
<title>Brown pelican riding a red road bike along a coastal road at golden hour</title>
<desc>A brown pelican pedals a red road bicycle. Its wheels, cranks and legs rotate, its throat pouch jiggles, and the coastal background scrolls with parallax at golden hour.</desc>
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f5aa6a"/>
<stop offset="0.45" stop-color="#ffca8f"/>
<stop offset="1" stop-color="#ffe8bf"/>
</linearGradient>
<radialGradient id="sunG">
<stop offset="0" stop-color="#fffbe8"/>
<stop offset="0.55" stop-color="#ffe394"/>
<stop offset="1" stop-color="#ffca5c"/>
</radialGradient>
<linearGradient id="sea" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f2a261"/>
<stop offset="1" stop-color="#d5723b"/>
</linearGradient>
<linearGradient id="duneG" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f2bd87"/>
<stop offset="1" stop-color="#e3a268"/>
</linearGradient>
<linearGradient id="roadG" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#6b4d33"/>
<stop offset="1" stop-color="#533a25"/>
</linearGradient>
<linearGradient id="bodyG" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ad6f42"/>
<stop offset="1" stop-color="#8c542c"/>
</linearGradient>
<g id="wheelBody" stroke-linecap="round">
<circle r="55" fill="#241c15"/>
<circle r="46" fill="none" stroke="#e8e2d4" stroke-width="3.5"/>
<circle r="42.5" fill="none" stroke="#c83f2e" stroke-width="1.4" opacity="0.55"/>
<circle r="38.5" fill="none" stroke="#cfc6b4" stroke-width="1.4"/>
<g stroke="#d8d0bd" stroke-width="2">
<line x1="0" y1="-42" x2="0" y2="42"/>
<line x1="-21" y1="-36.4" x2="21" y2="36.4"/>
<line x1="-21" y1="36.4" x2="21" y2="-36.4"/>
</g>
<circle r="9" fill="#d8d2c4" stroke="#9a948b" stroke-width="2"/>
<circle r="3.5" fill="#6d675e"/>
<path d="M 32 38 A 55 55 0 0 0 -32 38" fill="none" stroke="#f3d39e" stroke-width="2.5" opacity="0.3"/>
</g>
<g id="tuft" fill="none" stroke="#7d5527" stroke-width="3.2" stroke-linecap="round">
<path d="M0 0 C -1 -10 -5 -18 -12 -22"/>
<path d="M0 0 C 0 -12 -3 -22 -7 -27"/>
<path d="M0 0 C 2 -10 6 -19 13 -23"/>
</g>
<g id="palm">
<path d="M0 0 C -4 -28 -2 -50 6 -72 C 9 -71 9 -68 7 -68 C 0 -48 2 -26 4 -4 Z" fill="#5c3a1d"/>
<g fill="none" stroke="#5c3a1d" stroke-width="4.5" stroke-linecap="round">
<path d="M8 -70 Q -10 -88 -20 -82"/>
<path d="M8 -70 Q 2 -95 20 -93"/>
<path d="M8 -70 Q 24 -86 34 -84"/>
<path d="M8 -70 Q -2 -90 2 -100"/>
<path d="M8 -70 Q 20 -97 36 -93"/>
</g>
</g>
<g id="gull">
<path d="M0 0 C 8 -9 16 -9 20 0 C 24 -7 34 -7 40 0" fill="none" stroke="#57412f" stroke-width="3" stroke-linecap="round"/>
</g>
<g id="spokeUse">
<animateTransform attributeName="transform" type="rotate" values="-3 0 0; 3 0 0; -3 0 0" dur="3.4s" repeatCount="indefinite"/>
</g>
</defs>
<!-- ============ SKY ============ -->
<rect width="960" height="330" fill="url(#sky)"/>
<g>
<animateTransform attributeName="transform" type="translate" values="0 0; 34 0; 0 0" dur="16s" repeatCount="indefinite"/>
<ellipse cx="210" cy="88" rx="70" ry="14" fill="#fff1d8" opacity="0.8"/>
<ellipse cx="290" cy="74" rx="100" ry="18" fill="#fff3dd" opacity="0.7"/>
<ellipse cx="380" cy="86" rx="55" ry="12" fill="#fff1d8" opacity="0.6"/>
<ellipse cx="620" cy="130" rx="45" ry="10" fill="#fff3dd" opacity="0.55"/>
<ellipse cx="700" cy="122" rx="70" ry="13" fill="#fff1d8" opacity="0.5"/>
</g>
<g>
<circle cx="760" cy="298" r="120" fill="#ffd26b" opacity="0.16"/>
<circle cx="760" cy="298" r="78" fill="#ffe27a" opacity="0.35"/>
<circle cx="760" cy="298" r="54" fill="url(#sunG)"/>
</g>
<g>
<animateTransform attributeName="transform" type="translate" values="0 0; 7 4; 0 0" dur="4.4s" repeatCount="indefinite"/>
<use href="#gull" x="150" y="95"/>
</g>
<g>
<animateTransform attributeName="transform" type="translate" values="0 0; -6 3; 0 0" dur="5.8s" repeatCount="indefinite"/>
<g transform="translate(285 140) scale(0.65)"><use href="#gull"/></g>
</g>
<use href="#gull" x="520" y="58" transform="scale(0.5)"/>
<!-- ============ FAR ISLANDS (slow parallax) ============ -->
<g>
<animateTransform attributeName="transform" type="translate" values="0 0; -960 0" dur="53.3s" repeatCount="indefinite"/>
<g id="islandTile">
<path d="M 40 328 C 90 304 140 293 180 304 C 212 313 244 322 284 328 Z" fill="#e59a5c" opacity="0.85"/>
<path d="M 310 328 C 352 300 430 289 476 307 C 522 318 570 324 632 328 Z" fill="#d98c4e" opacity="0.8"/>
<path d="M 842 328 C 872 312 912 308 938 322 L 948 328 Z" fill="#d98c4e" opacity="0.7"/>
<rect x="704" y="290" width="16" height="38" rx="2" fill="#ecc48e"/>
<rect x="704" y="290" width="16" height="6" fill="#c97a3e"/>
<rect x="704" y="306" width="16" height="6" fill="#c97a3e"/>
<rect x="700" y="282" width="20" height="8" rx="3" fill="#d99b5f"/>
<circle cx="712" cy="275" r="5" fill="#fff6d8">
<animate attributeName="opacity" values="1; 0.3; 1" dur="3.5s" repeatCount="indefinite"/>
</circle>
<circle cx="712" cy="275" r="11" fill="#fff1c8" opacity="0.35"/>
</g>
<use href="#islandTile" x="960"/>
</g>
<!-- ============ SEA ============ -->
<rect x="0" y="330" width="960" height="80" fill="url(#sea)"/>
<g>
<animateTransform attributeName="transform" type="translate" values="0 0; -18 0; 0 0" dur="4.8s" repeatCount="indefinite"/>
<ellipse cx="762" cy="344" rx="14" ry="2.5" fill="#fff3d0" opacity="0.85"/>
<ellipse cx="762" cy="358" rx="34" ry="3" fill="#fff0c4" opacity="0.8">
<animate attributeName="opacity" values="0.8; 0.35; 0.8" dur="1.9s" repeatCount="indefinite"/>
</ellipse>
<ellipse cx="762" cy="376" rx="64" ry="4" fill="#fff3d0" opacity="0.7"/>
<ellipse cx="758" cy="396" rx="110" ry="5" fill="#fff0c4" opacity="0.55"/>
<ellipse cx="700" cy="352" rx="12" ry="2.2" fill="#fff3d0" opacity="0.6"/>
<ellipse cx="830" cy="364" rx="20" ry="2.8" fill="#fff3d0" opacity="0.55"/>
</g>
<!-- ============ DUNES + PALMS (mid parallax) ============ -->
<g>
<animateTransform attributeName="transform" type="translate" values="0 0; -960 0" dur="9.6s" repeatCount="indefinite"/>
<g id="duneTile">
<path d="M 0 418 C 90 396 180 412 280 406 C 360 400 430 408 500 402 C 590 395 660 404 740 400 C 820 396 880 406 960 398 L 960 540 L 0 540 Z" fill="url(#duneG)"/>
<ellipse cx="430" cy="500" rx="9" ry="6" fill="#c98f55" opacity="0.8"/>
<ellipse cx="690" cy="515" rx="6" ry="4" fill="#c98f55" opacity="0.7"/>
<use href="#tuft" x="120" y="446"/>
<use href="#tuft" x="250" y="436"/>
<use href="#tuft" x="390" y="458"/>
<use href="#tuft" x="520" y="438"/>
<use href="#tuft" x="640" y="462"/>
<use href="#tuft" x="770" y="436"/>
<use href="#tuft" x="880" y="448"/>
<g transform="translate(210 436) scale(0.9)"><use href="#palm"/></g>
<g transform="translate(790 446) scale(0.7)"><use href="#palm"/></g>
</g>
<use href="#duneTile" x="960"/>
</g>
<!-- ============ ROAD (fast parallax) ============ -->
<rect x="0" y="534" width="960" height="3" fill="#533c24"/>
<rect x="0" y="537" width="960" height="3" fill="#8a6a45"/>
<rect x="0" y="540" width="960" height="100" fill="url(#roadG)"/>
<g>
<animateTransform attributeName="transform" type="translate" values="0 0; -960 0" dur="6.667s" repeatCount="indefinite"/>
<g id="roadTex">
<rect x="70" y="556" width="20" height="5" rx="2" fill="#7a5838" opacity="0.5"/>
<rect x="215" y="582" width="14" height="4" rx="2" fill="#66462e" opacity="0.6"/>
<rect x="330" y="610" width="24" height="5" rx="2" fill="#7a5838" opacity="0.5"/>
<rect x="415" y="556" width="12" height="4" rx="2" fill="#66462e" opacity="0.55"/>
<rect x="512" y="612" width="16" height="4" rx="2" fill="#7a5838" opacity="0.45"/>
<rect x="600" y="552" width="20" height="4" rx="2" fill="#66462e" opacity="0.6"/>
<rect x="705" y="618" width="22" height="5" rx="2" fill="#7a5838" opacity="0.5"/>
<rect x="810" y="556" width="14" height="5" rx="2" fill="#66462e" opacity="0.5"/>
<rect x="885" y="600" width="18" height="4" rx="2" fill="#7a5838" opacity="0.45"/>
</g>
<use href="#roadTex" x="960"/>
</g>
<line x1="-20" y1="588" x2="980" y2="588" stroke="#f5e3bd" stroke-width="9" stroke-dasharray="62 62">
<animate attributeName="stroke-dashoffset" values="0; 124" dur="0.861s" repeatCount="indefinite"/>
</line>
<!-- speed streaks + shadow -->
<rect x="250" y="452" width="46" height="3" rx="1.5" fill="#f3d39e" opacity="0.3"/>
<rect x="215" y="505" width="60" height="4" rx="2" fill="#f3d39e" opacity="0.22"/>
<rect x="230" y="558" width="40" height="3" rx="1.5" fill="#f3d39e" opacity="0.2"/>
<ellipse cx="485" cy="541" rx="125" ry="11.5" fill="#463119" opacity="0.5">
<animate attributeName="rx" values="125; 131; 125" dur="1.2s" repeatCount="indefinite"/>
</ellipse>
<!-- ============ FAR LEG (behind bike, darker) ============ -->
<g transform="translate(431 408)">
<g>
<animateTransform attributeName="transform" type="rotate" values="123.1 0 0; 105.3 0 0; 97.7 0 0; 101.7 0 0; 124.6 0 0; 170.2 0 0; 170.5 0 0; 147.5 0 0; 123.1 0 0" dur="2.4s" repeatCount="indefinite"/>
<line x1="0" y1="0" x2="86" y2="0" stroke="#d97f22" stroke-width="12.5" stroke-linecap="round"/>
<g transform="translate(86 0)">
<g>
<animateTransform attributeName="transform" type="rotate" values="-100.3 0 0; -95 0 0; -104 0 0; -124 0 0; -146.2 0 0; -158.2 0 0; -140.4 0 0; -117.4 0 0; -100.3 0 0" dur="2.4s" repeatCount="indefinite"/>
<line x1="0" y1="0" x2="76" y2="0" stroke="#d97f22" stroke-width="10.5" stroke-linecap="round"/>
<path d="M 68 -7 L 90 -4.5 L 102 0 L 96 7 L 70 5 Z" fill="#c9701a"/>
</g>
</g>
</g>
</g>
<!-- ============ BIKE ============ -->
<!-- rear wheel -->
<g>
<animateTransform attributeName="transform" type="rotate" values="0 370 485; 90 370 485; 180 370 485; 270 370 485; 360 370 485" dur="2.4s" repeatCount="indefinite"/>
<use href="#wheelBody" x="370" y="485"/>
</g>
<!-- chain + rear cog -->
<line x1="467" y1="455" x2="384" y2="471" stroke="#3b3530" stroke-width="2.5" opacity="0.9"/>
<line x1="476" y1="482" x2="382" y2="491" stroke="#3b3530" stroke-width="2.5" opacity="0.9"/>
<circle cx="370" cy="485" r="11" fill="none" stroke="#332d28" stroke-width="2.5"/>
<circle cx="370" cy="485" r="4" fill="#332d28"/>
<!-- frame -->
<g fill="none" stroke-linecap="round">
<g stroke="#a3241a" stroke-width="13">
<path d="M 434 400 L 478 466"/>
<path d="M 432 392 L 536 400"/>
<path d="M 538 400 L 540 444 L 546 479"/>
<path d="M 476 464 L 374 481"/>
<path d="M 440 438 L 372 481"/>
</g>
<g stroke="#dd3b2a" stroke-width="9">
<path d="M 434 400 L 478 466"/>
<path d="M 432 392 L 536 400"/>
<path d="M 538 400 L 540 444 L 546 479"/>
<path d="M 476 464 L 374 481"/>
<path d="M 440 438 L 372 481"/>
</g>
<g stroke="#ef6d57" stroke-width="3.5">
<path d="M 434 397 L 476 462"/>
<path d="M 432 389 L 532 397"/>
</g>
</g>
<!-- saddle, seat post, handlebar -->
<line x1="430" y1="374" x2="430" y2="401" stroke="#9a928b" stroke-width="5"/>
<path d="M 402 358 Q 428 348 452 358 Q 457 368 448 372 Q 430 379 414 373 Q 404 368 402 358 Z" fill="#2e2a25"/>
<path d="M 540 401 C 560 400 582 399 598 399 C 610 399 619 408 614 424" fill="none" stroke="#dd3b2a" stroke-width="7" stroke-linecap="round"/>
<!-- crankset (pedaling cranks) -->
<g transform="translate(478 469)">
<g>
<animateTransform attributeName="transform" type="rotate" values="0; 45; 90; 135; 180; 225; 270; 315; 360" dur="2.4s" repeatCount="indefinite"/>
<line x1="0" y1="-34" x2="0" y2="2" stroke="#2f2a24" stroke-width="4.5" stroke-linecap="round"/>
<circle r="15" fill="none" stroke="#3b3530" stroke-width="3"/>
<circle r="8" fill="none" stroke="#3b3530" stroke-width="2"/>
<line x1="0" y1="2" x2="0" y2="36" stroke="#332d27" stroke-width="5.5" stroke-linecap="round"/>
<rect x="-15" y="33.5" width="30" height="5.5" rx="2" fill="#b5452e"/>
<line x1="-15" y1="36" x2="15" y2="36" stroke="#8a3323" stroke-width="1.5"/>
</g>
</g>
<!-- front wheel -->
<g>
<animateTransform attributeName="transform" type="rotate" values="0 545 485; 90 545 485; 180 545 485; 270 545 485; 360 545 485" dur="2.4s" repeatCount="indefinite"/>
<use href="#wheelBody" x="545" y="485"/>
</g>
<!-- ============ PELICAN (bobbing, leaning forward) ============ -->
<g>
<animateTransform attributeName="transform" type="translate" values="0 0; 0 -3; 0 0; 0 -3; 0 0" dur="1.2s" repeatCount="indefinite"/>
<g transform="rotate(-5 430 410)">
<path d="M 346 428 L 318 442 L 336 462 L 350 454 Z" fill="#53321e"/>
<path d="M 346 418 C 338 442 352 472 390 482 C 432 492 486 470 500 436 C 508 418 500 398 488 384 C 478 372 460 364 438 368 C 400 374 352 388 346 418 Z" fill="url(#bodyG)"/>
<path d="M 458 396 C 478 402 490 416 490 430 C 492 442 482 454 468 458 C 452 450 448 430 452 414 C 454 404 455 400 458 396 Z" fill="#a8734a" opacity="0.8"/>
<path d="M 486 372 L 478 388 M 494 370 L 484 382" stroke="#7c4a26" stroke-width="2" stroke-linecap="round"/>
<path d="M 396 384 C 426 368 458 360 478 366 C 486 369 484 376 474 382 C 446 398 416 408 392 404 C 386 400 388 390 396 384 Z" fill="#5f3a22"/>
<path d="M 428 378 C 452 368 470 366 476 372 C 464 386 440 394 424 392 Z" fill="#74472c"/>
<path d="M 404 396 C 430 384 456 378 468 376" fill="none" stroke="#8a5a33" stroke-width="2"/>
<path d="M 498 340 C 494 332 488 330 484 334 C 486 340 490 344 496 344 Z" fill="#9a5f33"/>
<circle cx="510" cy="363" r="24" fill="#9a5f33"/>
<circle cx="502" cy="354" r="5.2" fill="#f8f3e6"/>
<circle cx="501" cy="355" r="2.7" fill="#221a12"/>
<circle cx="500" cy="353.5" r="1" fill="#ffffff" opacity="0.9"/>
<path d="M 528 350 C 566 354 602 359 618 366 L 614 373 C 580 368 544 365 530 360 Z" fill="#f2a94d"/>
<path d="M 534 361 L 614 372" fill="none" stroke="#cf8133" stroke-width="1.8"/>
<path d="M 606 362 L 617 367" fill="none" stroke="#c97a2e" stroke-width="1.5"/>
<circle cx="535" cy="353" r="1.6" fill="#b37a2c"/>
<!-- jiggling throat pouch -->
<g>
<animateTransform attributeName="transform" type="rotate" values="-8 532 362; 8 532 362; -8 532 362" dur="1.2s" repeatCount="indefinite"/>
<path d="M 532 362 C 540 376 558 389 580 391 C 600 393 616 386 615 371 C 610 363 554 361 532 362 Z" fill="#f7e3ab" stroke="#e2c57d" stroke-width="1.5"/>
<path d="M 552 376 C 566 385 580 390 592 390" fill="none" stroke="#e6cb85" stroke-width="1.5"/>
</g>
<!-- feet on the drop bars -->
<ellipse cx="608" cy="412" rx="9" ry="5.5" fill="#f0932e" transform="rotate(30 608 412)"/>
<line x1="606" y1="410" x2="613" y2="413" stroke="#b96a1c" stroke-width="1.6"/>
<ellipse cx="614" cy="422" rx="8" ry="5" fill="#f0932e" transform="rotate(45 614 422)"/>
</g>
</g>
<!-- ============ NEAR LEG (in front of the bike) ============ -->
<g transform="translate(430 410)">
<g>
<animateTransform attributeName="transform" type="rotate" values="124.6 0 0; 170.2 0 0; 170.5 0 0; 147.5 0 0; 123.1 0 0; 105.3 0 0; 97.7 0 0; 101.7 0 0; 124.6 0 0" dur="2.4s" repeatCount="indefinite"/>
<line x1="0" y1="0" x2="86" y2="0" stroke="#f0932e" stroke-width="13" stroke-linecap="round"/>
<g transform="translate(86 0)">
<g>
<animateTransform attributeName="transform" type="rotate" values="-146.2 0 0; -158.2 0 0; -140.4 0 0; -117.4 0 0; -100.3 0 0; -95 0 0; -104 0 0; -124 0 0; -146.2 0 0" dur="2.4s" repeatCount="indefinite"/>
<line x1="0" y1="0" x2="76" y2="0" stroke="#f0932e" stroke-width="11.5" stroke-linecap="round"/>
<path d="M 68 -7 L 90 -4.5 L 102 0 L 96 7 L 70 5 Z" fill="#f0932e"/>
<path d="M 88 -3 L 99 0 M 91 2 L 99 4" fill="none" stroke="#b96a1c" stroke-width="1.6"/>
</g>
</g>
</g>
</g>
</svg>