SVG project

portals.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

    <!-- nice color combinations taken from http://www.colourlovers.com/ -->

    <path id="sky"
          d="M0,0 L10000,0 L10000,1200 L0,1200"
          fill="url(#sky-gradient)"/>

    <linearGradient id="sky-gradient">
        <stop offset="0" stop-color="#50BDD8"/>
        <stop offset="1" stop-color="blue"/>
    </linearGradient>

    <circle id="sun"
            r="65"
            cx="100"
            cy="100"
            stroke="orange"
            stroke-width="5"
            fill="yellow"
            />

    <path id="land"
          d="M0,300 L10000,300 L10000,1200 L0,1200"
          stroke-width="10"
          stroke="green"
          fill="#03AD09"/>

    <polyline id="grass"
              points="250,500 260,450 270,470 280,410 290,500 300,430 310,400 320,440 330,500"
              fill="green"
              stroke="green"
              stroke-width="10"
            />

    <ellipse id="ball"
             rx="35"
             ry="35"
             stroke="#9F111B"
             stroke-width="5"
             fill="#B11623"
             cx="500"
             cy="50"
            >

        <animate id="fall"
                 attributeName="cy"
                 from="50"
                 to="500"
                 dur="1s"
                 end="500"
                 repeatDur="indefinite"
                />
    </ellipse>

    <ellipse id="blue-portal"
             rx="100" ry="15"
             cx="500" cy="25"
             fill="#107FC9"
             stroke="#0E4EAD"
             stroke-width="5"
            />

    <ellipse id="orange-portal"
             rx="100" ry="15"
             cx="500" cy="540"
             fill="#F38630"
             stroke="#FA6900"
             stroke-width="5"
            />

</svg>