<!--



Generated by DrawGPT.

Free, open source, AI generated images in SVG, PNG, and HTML Canvas format.

https://drawgpt.ai



Created: 2025-05-19T03:50:00+00:00

-->

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"  >

  <title>Rise and Shine - Animated Sunshine Over Happy Hills</title>

  <desc>The sun rises, coffee winks, and birds stretch! Which is cheerier: the hills or your socks?</desc>

  <metadata type="keywords">sunrise, morning, hills, sunshine, happy</metadata>



  <!-- Animated blue sky background -->

  <rect id="bg-sky" class="background" x="0" y="0" width="512" height="512" fill="url(#gradSky1)" />

  <defs>

    <linearGradient id="gradSky1" x1="0" y1="0" x2="0" y2="1">

      <stop offset="0%" stop-color="#79cafc"/>

      <stop offset="50%" stop-color="#ffeccd">

        <animate attributeName="stop-color" values="#ffeccd;#fffee2;#ffeccd" dur="5s" repeatCount="indefinite"/>

      </stop>

      <stop offset="100%" stop-color="#fcf1be"/>

    </linearGradient>

    <radialGradient id="sunCore" cx="50%" cy="50%" r="60%" fx="50%" fy="53%">

      <stop offset="0%" stop-color="#fff384"/>

      <stop offset="80%" stop-color="#ffbb3a"/>

      <stop offset="100%" stop-color="#fcfcaf" stop-opacity="0"/>

    </radialGradient>

  </defs>



  <!-- Distant tiny mountains -->

  <path id="hills-back" class="hill" d="M0,290 Q50,240 150,290 T400,260 T512,300 L512,512 L0,512 Z"

        fill="#d2edbe" opacity="0.85"/>

  <!-- Main hills -->

  <path id="hills-main" class="hill" d="M0,370 Q100,300 210,370 T370,350 T512,390 L512,512 L0,512 Z"

        fill="#96da6d"/>

  <path id="hills-foreground" class="hill" d="M0,420 Q90,380 230,425 T400,390 T512,440 L512,512 L0,512 Z"

        fill="#58bd43"/>

  

  <!-- Animated sun rising up! -->

  <g id="sunrise-group" class="sun">

    <circle id="sun-core" class="sun-core" cx="256" cy="450" r="53" fill="url(#sunCore)">

      <animate attributeName="cy" dur="5s" values="450;170;450" keyTimes="0;0.5;1" repeatCount="indefinite"/>

    </circle>

    <!-- Sun face -->

    <ellipse id="sun-eye-l" class="sun-eye" cx="240" cy="170" rx="5" ry="8" fill="#7c5912">

      <animate attributeName="cy" dur="5s" values="170;144;170" keyTimes="0;0.5;1" repeatCount="indefinite"/>

    </ellipse>

    <ellipse id="sun-eye-r" class="sun-eye" cx="272" cy="170" rx="5" ry="8" fill="#7c5912">

      <animate attributeName="cy" dur="5s" values="170;144;170" keyTimes="0;0.5;1" repeatCount="indefinite"/>

    </ellipse>

    <path id="sun-smile" class="sun-smile" d="M245,185 Q256,200 267,185"

          stroke="#bf6600" stroke-width="3" fill="none">

      <animate attributeName="d" dur="5s"

            values="M245,185 Q256,200 267,185;M245,176 Q256,206 267,176;M245,185 Q256,200 267,185"

            keyTimes="0;0.5;1" repeatCount="indefinite"/>

    </path>

    <!-- Animate sun face rise and down together -->

    <g>

      <animateTransform attributeName="transform"

        type="translate"

        from="0,280"

        to="0,0"

        dur="2.5s"

        begin="0s"

        keyTimes="0;1"

        values="0,280;0,0"

        repeatCount="indefinite"

        fill="freeze" />

      <animateTransform attributeName="transform"

        type="translate"

        from="0,0"

        to="0,280"

        dur="2.5s"

        begin="2.5s"

        keyTimes="0;1"

        values="0,0;0,280"

        repeatCount="indefinite"

        fill="freeze" />

    </g>

    <!-- Sun rays - animate to stretch -->

    <g id="sun-rays" class="sun-ray">

      <g id="rays-rot" >

        <g>

            <line id="ray1" class="ray" x1="256" y1="117" x2="256" y2="67" stroke="#ffe274" stroke-width="9" stroke-linecap="round"/>

            <line id="ray2" class="ray" x1="292" y1="124" x2="340" y2="98" stroke="#ffe274" stroke-width="7" stroke-linecap="round"/>

            <line id="ray3" class="ray" x1="319" y1="151" x2="363" y2="140" stroke="#ffe274" stroke-width="6" stroke-linecap="round"/>

            <line id="ray4" class="ray" x1="331" y1="187" x2="384" y2="196" stroke="#ffe274" stroke-width="7" stroke-linecap="round"/>

            <line id="ray5" class="ray" x1="325" y1="227" x2="371" y2="255" stroke="#ffe274" stroke-width="6" stroke-linecap="round"/>

            <line id="ray6" class="ray" x1="288" y1="248" x2="312" y2="297" stroke="#ffe274" stroke-width="7" stroke-linecap="round"/>

            <line id="ray7" class="ray" x1="256" y1="257" x2="256" y2="307" stroke="#ffe274" stroke-width="9" stroke-linecap="round"/>

            <line id="ray8" class="ray" x1="224" y1="248" x2="200" y2="297" stroke="#ffe274" stroke-width="7" stroke-linecap="round"/>

            <line id="ray9" class="ray" x1="187" y1="227" x2="141" y2="255" stroke="#ffe274" stroke-width="6" stroke-linecap="round"/>

            <line id="ray10" class="ray" x1="179" y1="187" x2="128" y2="196" stroke="#ffe274" stroke-width="7" stroke-linecap="round"/>

            <line id="ray11" class="ray" x1="192" y1="151" x2="148" y2="140" stroke="#ffe274" stroke-width="6" stroke-linecap="round"/>

            <line id="ray12" class="ray" x1="219" y1="124" x2="171" y2="98" stroke="#ffe274" stroke-width="7" stroke-linecap="round"/>

        </g>

        <animateTransform attributeName="transform"

                          type="rotate"

                          values="0 256 184;15 256 184;0 256 184"

                          keyTimes="0;0.5;1"

                          dur="5s"

                          repeatCount="indefinite"/>

      </g>

      <!-- Rays shimmer length -->

      <g>

        <animateTransform 

          attributeName="transform"

          attributeType="XML"

          type="scale" 

          values="1,1;1.1,1.05;1,1"

          keyTimes="0;0.25;1"

          dur="5s"

          repeatCount="indefinite"

          additive="sum"

          />

      </g>

    </g>

  </g>

  

  <!-- Orbital animated twinkling stars fading as sun rises (they fade in early, out during day)-->

  <g id="night-stars" class="star">

    <circle id="star1" class="star-item" cx="60" cy="55" r="2" fill="#fbfbfe" opacity="0">

      <animate attributeName="opacity" values="0;1;0" keyTimes="0;0.1;1" dur="5s" repeatCount="indefinite"/>

    </circle>

    <circle id="star2" class="star-item" cx="100" cy="92" r="1.5" fill="#fafafe" opacity="0">

      <animate attributeName="opacity" values="0;0.9;0" keyTimes="0;0.12;1" dur="5s" repeatCount="indefinite"/>

    </circle>

    <circle id="star3" class="star-item" cx="437" cy="73" r="2.2" fill="#ffeef2" opacity="0">

      <animate attributeName="opacity" values="0;1;0" keyTimes="0;0.13;1" dur="5s" repeatCount="indefinite"/>

    </circle>

    <circle id="star4" class="star-item" cx="364" cy="48" r="1.7" fill="#fbfbfe" opacity="0">

      <animate attributeName="opacity" values="0;0.6;0" keyTimes="0;0.16;1" dur="5s" repeatCount="indefinite"/>

    </circle>

    <circle id="star5" class="star-item" cx="211" cy="61" r="1.1" fill="#fffafb" opacity="0">

      <animate attributeName="opacity" values="0;1;0" keyTimes="0;0.11;1" dur="5s" repeatCount="indefinite"/>

    </circle>

  </g>

  

  <!-- Happy birds animating across the sky -->

  <g id="birds" class="bird">

    <g id="bird1" class="bird-body">

      <path d="M105,90 Q113,89 118,93" fill="transparent" stroke="#59534e" stroke-width="3"/>

      <animateTransform attributeName="transform" type="translate" from="0,0" to="80,38" dur="5s" repeatCount="indefinite"/>

      <animateTransform attributeName="transform" type="scale"

        values="1,1;1,1.24;1,1"

        keyTimes="0;0.5;1"

        additive="sum"

        dur="1s" repeatCount="indefinite" />

    </g>

    <g id="bird2" class="bird-body">

      <path d="M170,125 Q177,123 182,130" fill="transparent" stroke="#7d4e22" stroke-width="2"/>

      <animateTransform attributeName="transform" type="translate" from="0,0" to="95,18" dur="5s" begin="1s" repeatCount="indefinite"/>

      <animateTransform attributeName="transform" type="scale"

            values="1,1;1,0.75;1,1"

            keyTimes="0;0.5;1"

            additive="sum"

            dur="0.8s" repeatCount="indefinite"/>

    </g>

  </g>

  

  <!-- Sleeping teacup "wakes up" as sun rises -->

  <g id="teacup-wakeup" class="teacup">

    <!-- Cup body -->

    <ellipse id="cup-body" class="cup" cx="404" cy="475" rx="38" ry="20" fill="#f9e3cf" stroke="#40281b" stroke-width="3"/>

    <ellipse id="cup-inner" class="cup-top" cx="404" cy="470" rx="30" ry="10" fill="#f8eada"/>

    <!-- Handle -->

    <path id="cup-handle" class="cup-handle" d="M437,482 Q460,475 446,460" fill="transparent" stroke="#dbb154" stroke-width="7"/>

    <!-- Face, animated! -->

    <ellipse id="cup-eye-l" class="cup-eye" cx="393" cy="477" rx="3" ry="4" fill="#653124">

      <animate attributeName="cy" values="479;477;479" keyTimes="0;0.65;1" dur="5s" repeatCount="indefinite"/>

    </ellipse>

    <ellipse id="cup-eye-r" class="cup-eye" cx="414" cy="477" rx="3" ry="4" fill="#653124">

      <animate attributeName="cy" values="479;477;479" keyTimes="0;0.7;1" dur="5s" repeatCount="indefinite"/>

    </ellipse>

    <path id="cup-smile" class="cup-smile" d="M398,485 Q404,493 410,485"

          stroke="#92672c" stroke-width="2" fill="none">

      <animate attributeName="d" 

        values="M398,489 Q404,492 410,489;M398,485 Q404,493 410,485;M398,489 Q404,492 410,489"

        keyTimes="0;0.38;1" dur="5s" repeatCount="indefinite"/>

    </path>

    <!-- Cup 'steam' animated lines -->

    <path id="steam1" class="steam" d="M400,457 Q402,445 406,457" stroke="#e2dbc2" stroke-width="3" fill="none" opacity="0.6">

      <animate attributeName="d" 

        values="M400,457 Q402,445 406,457;M400,452 Q404,440 406,460;M400,457 Q402,445 406,457"

        keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>

      <animate attributeName="opacity"

        values="0.7;1;0.7"

        dur="2s"

        repeatCount="indefinite"/>

    </path>

    <path id="steam2" class="steam" d="M408,457 Q410,440 412,454" stroke="#eaddca" stroke-width="3" fill="none" opacity="0.5">

      <animate attributeName="d"

        values="M408,457 Q410,440 412,454;M406,452 Q410,439 412,459;M408,457 Q410,440 412,454"

        keyTimes="0;0.4;1" dur="5s" repeatCount="indefinite"/>

      <animate attributeName="opacity"

        values="0.327;1;0.327"

        dur="1.8s"

        repeatCount="indefinite"/>

    </path>

  </g>

  <!-- Hilltop daisy that grows with the sun -->

  <g id="animated-daisy" class="flower">

    <g>

      <ellipse id="petal1" class="daisy-petal" cx="156" cy="418" rx="7" ry="18" fill="#fffdea" opacity="0.95">

        <animateTransform attributeName="transform" attributeType="XML"

                          type="scale"

                          values="1 1; 1.6 1.3; 1 1"

                          keyTimes="0;0.5;1"

                          dur="5s" repeatCount="indefinite"

                          additive="sum"

                          />

      </ellipse>

      <ellipse id="petal2" class="daisy-petal" cx="172" cy="410" rx="7" ry="18" fill="#fefff2" opacity="0.93"

        transform="rotate(24 164 414)">

        <animateTransform attributeName="transform" attributeType="XML"

                          type="scale"

                          values="1 1; 1.4 1.5; 1 1"

                          keyTimes="0;0.7;1"

                          dur="5s" 

                          repeatCount="indefinite"

                          additive="sum"/>

      </ellipse>

      <ellipse id="petal3" class="daisy-petal" cx="142" cy="414" rx="7" ry="18" fill="#fffefa" opacity="0.92"

        transform="rotate(-23 149 414)">

        <animateTransform attributeName="transform" attributeType="XML"

                          type="scale"

                          values="1 1; 1.6 1.2; 1 1"

                          keyTimes="0;0.55;1"

                          dur="5s" repeatCount="indefinite"

                          additive="sum"/>

      </ellipse>

      <circle id="daisy-center" class="daisy-core" cx="156" cy="419" r="10" fill="#ffe99d">

        <animate attributeName="r"

             values="10;16;10"

             keyTimes="0;0.5;1"

             dur="5s"

             repeatCount="indefinite"/>

      </circle>

    </g>

    <!-- Stem, leaves -->

    <rect id="daisy-stem" class="daisy-stem" x="154" y="428" width="4" height="25" fill="#9ac55f" rx="2">

      <animate attributeName="height" values="25;39;25" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>

    </rect>

    <ellipse id="daisy-leaf-l" class="daisy-leaf" cx="152" cy="440" rx="5" ry="14" fill="#6ffc89" transform="rotate(-23 152 440)"

      opacity="0.7"/>

    <ellipse id="daisy-leaf-r" class="daisy-leaf" cx="162" cy="450" rx="4" ry="11" fill="#96e26c" transform="rotate(23 162 450)"

      opacity="0.9"/>

  </g>



  <!-- Peaceful tree with an owl waking up -->

  <g id="waking-tree" class="tree">

    <rect id="tree-trunk" class="tree-trunk" x="36" y="343" width="24" height="75" fill="#704127" rx="10"/>

    <ellipse id="tree-canopy1" class="tree-canopy" cx="46" cy="345" rx="27" ry="17" fill="#7cd60c" opacity="0.72"/>

    <ellipse id="tree-canopy2" class="tree-canopy" cx="57" cy="330" rx="24" ry="20" fill="#88d272" opacity="0.75"/>

    <ellipse id="tree-canopy3" class="tree-canopy" cx="41" cy="326" rx="20" ry="14" fill="#93eb66" opacity="0.86"/>

    <ellipse id="tree-shadow" class="tree-shadow" cx="47" cy="424" rx="24" ry="6" fill="#517a3b" opacity="0.41"/>

    <!-- Small owl in a hollow -->

    <ellipse id="owl-hole" class="owl-hole" cx="52" cy="370" rx="9" ry="11" fill="#482413" opacity="0.75"/>

    <g id="owl" class="owl">

      <ellipse id="owl-body" class="owl-body" cx="52" cy="373" rx="4" ry="6" fill="#fcdaa2" />

      <ellipse id="owl-eye-l" class="owl-eye-l" cx="50" cy="371.4" rx="0.75" ry="0.75" fill="#613404">

        <animate attributeName="rx" values="0.75;2;0.75" keyTimes="0;0.6;1" dur="5s" repeatCount="indefinite"/>

      </ellipse>

      <ellipse id="owl-eye-r" class="owl-eye-r" cx="54" cy="371.4" rx="0.75" ry="0.75" fill="#613404">

        <animate attributeName="rx" values="0.75;2;0.75" keyTimes="0;0.6;1" dur="5s" repeatCount="indefinite"/>

      </ellipse>

      <path id="owl-beak" class="owl-beak" d="M52,375 L52.6,377 L51.4,377 Z" fill="#bc812d">

        <animate attributeName="d" 

               values="M52,375 L52.6,377 L51.4,377 Z;M52,375 L53,376.5 L51,376.5 Z;M52,375 L52.6,377 L51.4,377 Z"

               keyTimes="0;0.12;1" dur="5s" repeatCount="indefinite"/>

      </path>

    </g>

  </g>

  <!-- Light rays on grass foreground animating as breeze -->

  <path id="foreground-sheen" class="light-sheen" d="M20,470 Q110,490 250,448 T492,485"

    fill="none" stroke="#ecfadd" stroke-width="10" opacity="0.3">

    <animate attributeName="d" 

             values="M20,470 Q110,484 250,448 T492,485;M20,464 Q163,504 320,448 T492,465;M20,470 Q110,484 250,448 T492,485"

             keyTimes="0;0.55;1" dur="5s" repeatCount="indefinite"/>

  </path>

  <!-- More foreground flowers -->

  <ellipse id="f-flower1" class="foreground-flower" cx="205" cy="486" rx="8" ry="5" fill="#ffd2fc" opacity="0.84"/>

  <circle id="f-flower1-center" class="foreground-flower-center" cx="205" cy="486" r="2" fill="#fcfc80"/>

  <ellipse id="f-flower2" class="foreground-flower" cx="335" cy="470" rx="6" ry="10" fill="#76e7da" opacity="0.95"/>

  <ellipse id="f-flower3" class="foreground-flower" cx="325" cy="488" rx="7" ry="5" fill="#d7fc7b" opacity="0.82"/>

  <ellipse id="f-flower4" class="foreground-flower" cx="127" cy="492" rx="10" ry="5" fill="#ffc671" opacity="0.72"/>

  <ellipse id="f-flower5" class="foreground-flower" cx="188" cy="475" rx="6" ry="12" fill="#f8ea8a" opacity="0.7"/>

</svg>