Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Ignacio Garcias Awesome Website</title>
  <style>
svg{
  border: 5px red solid;
  height:600px;
  width:600px;
}
  </style>
</head>
<body>
  <h1>SPRING TIME BOIIIIS</h1>
  <br>
<svg>
  <defs>
  <lineargradient id="linear3" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stop-color="blue"/>
        <stop offset="83%" stop-color="green"/>
        <stop offset="100%" stop-color="green"/>
  </lineargradient>

    </defs>


    <g>
    <path
      stroke="red"
      fill="none"
      stroke-width="10px"
      d="m02,500 C12,200 600,200 600,500"
      /><!--red-->
    <path
      stroke="orange"
      fill="none"
      stroke-width="10px"
      d="m12,500 C22,210 590,210 590,500"
      /> <!--orange-->
    <path
      stroke="yellow"
      fill="none"
      stroke-width="10px"
      d="m22,500 C32,220 580,220 580,500"
      /> <!--yellow-->
    <path
      stroke="yellow"
      fill="none"
      stroke-width="10px"
      d="m32,500 C32,230 570,230 570,500"
      /> <!--yellow-->
    <path
      stroke="hsl(90, 100%, 50%)"
      fill="none"
      stroke-width="10px"
      d="m42,500 C42,240 560,240 560,500"
      /> <!--Green-->
    <path
      stroke="blue"
      fill="none"
      stroke-width="10px"
      d="m52,500 C52,250 550,250 550,500"
      /> <!--blue-->
      <path
      stroke="hsl(275, 100%, 25%)   "
      fill="none"
      stroke-width="10px"
      d="m62,500 C62,260 540,260 540,500"
      /> <!--purple-->
    </g>

 <rect x="295" y="430" width="10" height="100" style="stroke:none; fill: hsl(90, 100%, 47%);"/>
  <circle cx="300" cy="430" r="1"  stroke="black" stroke-width="2" fill="yellow">

    <!--<animate attributeName="cy"-->
    <!--from="610"-->
    <!--to="430"-->
    <!--begin="0s"-->
    <!--dur="1s"-->
    <!--repeatcount="1"-->
    <!--fill="freeze"/>-->

      <animatetransform
      attributeType="xml"
      attributeName="r"
      type="scale"
      from="1 "
      to="20"
       begin="2s"
       dur="2s"
       repeatCount="indefinite"
       fill="freeze"
      />

        </circle>
  <ellipse cx="20" cy="20" rx="7" ry="15" style="fill:hsl(300, 100%, 94%); stroke:hsl(326, 81%, 84%);stroke-width:3px;">

    <animate attributename="cx"
  from="50"
  to="150"
  begin="10s"
  dur="5s"
  repeatcount="indefinite"
  fill="freeze"/>

    <animatetransform attributeName="transform"
      type="scale"
      from="1 1"
      to="1 1 "
       begin="4s"
       dur="10s"
       repeatCount="freeze"
      />

    <animatetransform attributeName="transform"
    type="rotate"
    from="0 100 100"
    to="360 100 100"
    begin="9s"
    dur="10s"
    repeatCount="indefinite"
    />
    </ellipse>


<rect x="0" y="500" width="600" height="100" style="stroke:none; fill:hsl(120, 100%, 30%);"/>

</svg>


</body>
</html>