查看 SVG 源码
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 560" width="800" height="560" role="img" aria-labelledby="ttl dsc">
<title id="ttl">A pelican riding a bicycle</title>
<desc id="dsc">Cartoon pelican in a red helmet pedalling a teal cruiser bicycle along a sunny road, with a fish in the front basket.</desc>
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#79cfef"></stop>
<stop offset="55%" stop-color="#c6ecfb"></stop>
<stop offset="100%" stop-color="#f1fbff"></stop>
</linearGradient>
<radialGradient id="sunG" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff9cf"></stop>
<stop offset="65%" stop-color="#ffe06a"></stop>
<stop offset="100%" stop-color="#ffd23f" stop-opacity="0"></stop>
</radialGradient>
<linearGradient id="bodyG" x1="0" y1="0" x2="0.8" y2="1">
<stop offset="0%" stop-color="#ffffff"></stop>
<stop offset="55%" stop-color="#f3f5ed"></stop>
<stop offset="100%" stop-color="#d3d8c9"></stop>
</linearGradient>
<linearGradient id="beakG" x1="0.1" y1="0" x2="0.9" y2="1">
<stop offset="0%" stop-color="#ffd685"></stop>
<stop offset="45%" stop-color="#ffa53c"></stop>
<stop offset="100%" stop-color="#e87a1a"></stop>
</linearGradient>
<linearGradient id="frameG" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#31c6b4"></stop>
<stop offset="100%" stop-color="#0f7d76"></stop>
</linearGradient>
<linearGradient id="roadG" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#6c7785"></stop>
<stop offset="100%" stop-color="#3d4653"></stop>
</linearGradient>
<g id="cloud" fill="#ffffff">
<ellipse cx="0" cy="10" rx="48" ry="15"></ellipse>
<circle cx="-20" cy="2" r="17"></circle>
<circle cx="6" cy="-10" r="22"></circle>
<circle cx="30" cy="0" r="15"></circle>
</g>
<path id="spokes" d="M0,-58 L0,58 M29,-50 L-29,50 M50,-29 L-50,29 M58,0 L-58,0 M50,29 L-50,-29 M29,50 L-29,-50"></path>
</defs>
<rect width="800" height="560" fill="url(#sky)"></rect>
<g transform="translate(700,86)">
<circle r="46" fill="#ffe873" opacity=".35"></circle>
<circle r="30" fill="url(#sunG)"></circle>
<g stroke="#ffe873" stroke-width="6" stroke-linecap="round" opacity=".65">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="70s" repeatCount="indefinite"></animateTransform>
<line x1="0" y1="-56" x2="0" y2="-72"></line><line x1="0" y1="56" x2="0" y2="72"></line>
<line x1="-56" y1="0" x2="-72" y2="0"></line><line x1="56" y1="0" x2="72" y2="0"></line>
<line x1="-40" y1="-40" x2="-51" y2="-51"></line><line x1="40" y1="40" x2="51" y2="51"></line>
<line x1="40" y1="-40" x2="51" y2="-51"></line><line x1="-40" y1="40" x2="-51" y2="51"></line>
</g>
</g>
<g opacity=".95">
<animateTransform attributeName="transform" type="translate" from="-260 0" to="900 0" dur="55s" begin="-8s" repeatCount="indefinite"></animateTransform>
<use href="#cloud" transform="translate(80,116)"></use>
</g>
<g opacity=".8">
<animateTransform attributeName="transform" type="translate" from="-300 0" to="900 0" dur="74s" begin="-40s" repeatCount="indefinite"></animateTransform>
<use href="#cloud" transform="translate(300,66) scale(.8)"></use>
</g>
<path fill="#b7e3bd" d="M0,452 C70,398 150,392 220,430 C280,462 320,450 390,430 C470,406 540,384 620,406 C700,428 760,446 800,436 L800,497 L0,497 Z"></path>
<path fill="#83cc90" d="M0,464 C90,442 170,456 250,460 C330,464 400,450 470,448 C560,444 660,458 800,450 L800,497 L0,497 Z"></path>
<rect x="0" y="497" width="800" height="63" fill="url(#roadG)"></rect>
<line x1="0" y1="499" x2="800" y2="499" stroke="#8f9aa6" stroke-width="4" opacity=".6"></line>
<line x1="-40" y1="532" x2="840" y2="532" stroke="#f6d97a" stroke-width="7" stroke-dasharray="46 34" opacity=".9">
<animate attributeName="stroke-dashoffset" from="0" to="80" dur="0.45s" repeatCount="indefinite"></animate>
</line>
<g fill="none" stroke="#ffffff" stroke-linecap="round" opacity=".85">
<path d="M60,168 L152,168" stroke-width="8">
<animate attributeName="opacity" values="0;.9;0" dur="1.1s" repeatCount="indefinite"></animate>
</path>
<path d="M24,246 L112,246" stroke-width="6">
<animate attributeName="opacity" values="0;.85;0" dur="1.4s" begin="-0.4s" repeatCount="indefinite"></animate>
</path>
<path d="M70,322 L146,322" stroke-width="5">
<animate attributeName="opacity" values="0;.7;0" dur="0.9s" begin="-0.6s" repeatCount="indefinite"></animate>
</path>
</g>
<ellipse cx="408" cy="497" rx="176" ry="9" fill="#1b2430" opacity=".2"></ellipse>
<g>
<circle cx="250" cy="420" r="70" fill="none" stroke="#28303c" stroke-width="14"></circle>
<circle cx="250" cy="420" r="61" fill="none" stroke="#cfd7df" stroke-width="6"></circle>
<g transform="translate(250,420)">
<g>
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1.15s" repeatCount="indefinite"></animateTransform>
<use href="#spokes" stroke="#9aa5b1" stroke-width="3"></use>
</g>
<circle r="9" fill="#d6dee5" stroke="#7c8693" stroke-width="2"></circle>
</g>
<circle cx="560" cy="420" r="70" fill="none" stroke="#28303c" stroke-width="14"></circle>
<circle cx="560" cy="420" r="61" fill="none" stroke="#cfd7df" stroke-width="6"></circle>
<g transform="translate(560,420)">
<g>
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1.15s" repeatCount="indefinite"></animateTransform>
<use href="#spokes" stroke="#9aa5b1" stroke-width="3"></use>
</g>
<circle r="9" fill="#d6dee5" stroke="#7c8693" stroke-width="2"></circle>
</g>
</g>
<g stroke="url(#frameG)" stroke-width="11" stroke-linecap="round" fill="none">
<path d="M250,420 L388,422"></path>
<path d="M250,420 L336,310"></path>
<path d="M336,310 L390,422"></path>
<path d="M336,310 L548,302"></path>
<path d="M390,422 L548,302"></path>
<path d="M546,288 L562,346"></path>
<path d="M558,342 C552,372 552,396 560,420"></path>
</g>
<path d="M400,414 L544,306" stroke="#7fe3d6" stroke-width="3" opacity=".55" fill="none"></path>
<g fill="none" stroke="#2b3440" stroke-width="8" stroke-linecap="round">
<path d="M546,290 L540,270"></path>
<path d="M540,270 C536,258 520,252 506,258 C496,262 492,272 496,280"></path>
</g>
<ellipse cx="500" cy="274" rx="10" ry="7" fill="#2b3440" transform="rotate(-32 500 274)"></ellipse>
<g>
<circle cx="528" cy="250" r="9" fill="#f4c552" stroke="#b8891f" stroke-width="2"></circle>
<line x1="528" y1="259" x2="528" y2="264" stroke="#b8891f" stroke-width="3"></line>
</g>
<g transform="rotate(-14 472 336)">
<rect x="461" y="312" width="22" height="46" rx="8" fill="#9adcf2" stroke="#57a9c4" stroke-width="2"></rect>
<rect x="466" y="304" width="12" height="10" rx="3" fill="#ef5a41" stroke="#b93a26" stroke-width="2"></rect>
<path d="M458,330 C470,336 484,336 486,330" fill="none" stroke="#8d97a3" stroke-width="3"></path>
</g>
<path d="M250,409 L388,395 A27,27 0 0 1 388,449 L250,431 A11,11 0 0 1 250,409 Z" fill="none" stroke="#3a4250" stroke-width="4.5" stroke-dasharray="6 4">
<animate attributeName="stroke-dashoffset" from="0" to="-100" dur="1s" repeatCount="indefinite"></animate>
</path>
<circle cx="250" cy="420" r="11" fill="#c3ccd5" stroke="#7c8693" stroke-width="2"></circle>
<circle cx="388" cy="422" r="27" fill="#dbe2e9" stroke="#7c8693" stroke-width="3"></circle>
<circle cx="388" cy="422" r="29.5" fill="none" stroke="#8d97a3" stroke-width="4" stroke-dasharray="3 6"></circle>
<circle cx="388" cy="422" r="12" fill="#aeb8c2"></circle>
<path d="M388,422 L364,396" stroke="#4b5563" stroke-width="9" stroke-linecap="round"></path>
<rect x="342" y="388" width="34" height="9" rx="3" fill="#2b3440"></rect>
<g>
<path d="M352,292 C350,324 356,358 362,382" fill="none" stroke="#d9822a" stroke-width="12" stroke-linecap="round"></path>
<path d="M354,376 C348,388 350,398 358,402 L382,400 L378,408 L348,408 C340,400 342,386 348,376 Z" fill="#d9822a"></path>
</g>
<path d="M388,422 L412,448" stroke="#4b5563" stroke-width="10" stroke-linecap="round"></path>
<circle cx="388" cy="422" r="6" fill="#2b3440"></circle>
<rect x="396" y="444" width="40" height="10" rx="4" fill="#2b3440"></rect>
<path d="M336,310 L330,288" stroke="#8d97a3" stroke-width="7" stroke-linecap="round"></path>
<path d="M292,286 C302,276 332,272 354,276 C368,279 368,289 354,291 C330,295 304,293 292,286 Z" fill="#2b3440"></path>
<g>
<path d="M392,294 C406,330 408,374 402,412" fill="none" stroke="#ef9b3c" stroke-width="13" stroke-linecap="round"></path>
<path d="M396,404 C396,422 402,434 412,440 L438,442 L434,450 L398,448 C386,442 382,420 384,404 Z" fill="#ef9b3c" stroke="#d9822a" stroke-width="1.5"></path>
</g>
<g>
<animateTransform attributeName="transform" type="translate" values="0,0; 0,-4; 0,0; 0,-2; 0,0" keyTimes="0;0.3;0.55;0.8;1" dur="1.6s" repeatCount="indefinite"></animateTransform>
<path d="M278,244 C254,234 226,228 204,232 L224,248 L198,254 L230,264 L208,277 L246,275 C264,273 276,262 280,252 Z" fill="#dee3d5" stroke="#b1b8a6" stroke-width="2.5"></path>
<path d="M262,256 C248,232 262,206 292,192 C324,177 372,172 404,190 C432,205 440,240 422,268 C404,294 364,306 330,302 C296,298 276,280 262,256 Z" fill="url(#bodyG)" stroke="#b1b8a6" stroke-width="2.5"></path>
<path d="M300,294 C332,306 374,298 414,268 C408,292 382,308 350,310 C326,310 310,302 300,294 Z" fill="#c6cdbe" opacity=".65"></path>
<g fill="none" stroke="#c4cbb9" stroke-width="2.5" stroke-linecap="round">
<path d="M286,226 C300,240 300,258 288,272"></path>
<path d="M304,206 C320,222 322,250 308,268"></path>
</g>
<path d="M382,208 C394,176 412,148 442,124 C452,116 468,118 474,130 C480,142 470,152 458,158 C436,170 420,192 414,216 C408,232 388,228 382,208 Z" fill="#f4f5ee" stroke="#b1b8a6" stroke-width="2.5"></path>
<path d="M478,86 C520,86 566,98 606,117 C616,122 617,129 609,133 C578,146 549,158 529,178 C513,194 501,212 483,219 C465,226 452,214 454,197 C456,179 466,158 478,144 Z" fill="url(#beakG)" stroke="#c96a17" stroke-width="2.5">
<animate attributeName="d" dur="1.8s" repeatCount="indefinite" values="M478,86 C520,86 566,98 606,117 C616,122 617,129 609,133 C578,146 549,158 529,178 C513,194 501,212 483,219 C465,226 452,214 454,197 C456,179 466,158 478,144 Z; M478,86 C520,86 566,98 606,117 C616,122 617,129 609,133 C578,149 551,167 534,191 C518,213 503,236 483,242 C462,247 449,228 452,205 C454,183 466,160 478,144 Z; M478,86 C520,86 566,98 606,117 C616,122 617,129 609,133 C578,146 549,158 529,178 C513,194 501,212 483,219 C465,226 452,214 454,197 C456,179 466,158 478,144 Z"></animate>
</path>
<path d="M606,130 C568,134 520,140 488,147" fill="none" stroke="#c96a17" stroke-width="3" stroke-linecap="round" opacity=".85"></path>
<path d="M482,92 C522,92 564,104 602,121" fill="none" stroke="#fff1c6" stroke-width="4" stroke-linecap="round" opacity=".5"></path>
<g fill="none" stroke="#d67d1c" stroke-width="2.5" stroke-linecap="round" opacity=".75">
<path d="M470,150 C486,168 486,196 472,214">
<animate attributeName="d" dur="1.8s" repeatCount="indefinite" values="M470,150 C486,168 486,196 472,214;M468,150 C490,176 490,216 474,236;M470,150 C486,168 486,196 472,214"></animate>
</path>
<path d="M494,158 C508,174 508,196 496,212">
<animate attributeName="d" dur="1.8s" repeatCount="indefinite" values="M494,158 C508,174 508,196 496,212;M494,160 C512,184 512,212 498,230;M494,158 C508,174 508,196 496,212"></animate>
</path>
</g>
<ellipse cx="470" cy="108" rx="32" ry="28" fill="url(#bodyG)" stroke="#b1b8a6" stroke-width="2.5"></ellipse>
<circle cx="487" cy="100" r="9" fill="#ffffff" stroke="#8e94a0" stroke-width="1.5"></circle>
<circle cx="490" cy="100" r="4.6" fill="#242a35"></circle>
<circle cx="492" cy="97" r="1.7" fill="#ffffff"></circle>
<path d="M476,86 C486,82 496,84 502,90" fill="none" stroke="#a9b0a2" stroke-width="2.5" stroke-linecap="round"></path>
<path d="M434,98 C432,68 456,50 480,52 C504,54 518,72 516,94 C500,86 460,88 434,98 Z" fill="#ef5a41" stroke="#b93a26" stroke-width="2.5"></path>
<path d="M508,92 C522,92 530,98 528,104 C520,100 510,98 504,98 Z" fill="#b93a26"></path>
<g stroke="#b93a26" stroke-width="4.5" stroke-linecap="round">
<line x1="452" y1="74" x2="462" y2="64"></line>
<line x1="470" y1="70" x2="480" y2="60"></line>
<line x1="488" y1="74" x2="498" y2="66"></line>
</g>
<path d="M344,212 C376,200 412,204 444,218 C472,230 498,244 514,252 C522,256 522,266 514,268 C496,272 472,268 448,260 C416,250 384,242 360,234 C344,228 336,220 344,212 Z" fill="#e5e9dd" stroke="#b1b8a6" stroke-width="2.5"></path>
<g fill="none" stroke="#c2c8b8" stroke-width="2.5" stroke-linecap="round">
<path d="M368,226 C400,236 430,246 460,256"></path>
<path d="M384,218 C416,228 446,240 474,252"></path>
</g>
<path d="M498,250 C510,254 518,258 520,264 C516,269 506,269 498,264 Z" fill="#d3d9cb" stroke="#b1b8a6" stroke-width="2"></path>
</g>
<g>
<path d="M574,296 L642,296 L634,336 L582,336 Z" fill="#c98b4b" stroke="#8b5a28" stroke-width="2.5"></path>
<g stroke="#8b5a28" stroke-width="2" opacity=".75" fill="none">
<path d="M578,310 L638,310"></path>
<path d="M581,324 L636,324"></path>
<path d="M596,297 L593,335"></path>
<path d="M614,297 L612,335"></path>
<path d="M630,297 L628,335"></path>
</g>
<path d="M600,300 C594,286 598,270 612,258 C614,274 622,288 632,298 Z" fill="#8ed8e8" stroke="#409fb5" stroke-width="2.5"></path>
<g stroke="#409fb5" stroke-width="1.8" opacity=".8" fill="none">
<path d="M606,290 C612,282 616,274 616,266"></path>
<path d="M616,294 C622,288 626,282 629,276"></path>
</g>
</g>
</svg>