Chris Pollett > Students >
Namon

    ( Print View )

    [Bio]

    [CS297Proposal]

    [Del1VML]

    [Del1SVG]

    [Del2Latex]

    [Del2MML]

    [Del3]

    [Del4]

    [CS297Report-PDF]

    [CS298Proposal]

    [CS298FinalReport-PDF]

    [CS298Presentation-PDF]

    [DemoSquareroot]

    [DemoSubscript]

    [DemoFraction]

                           

























Deliverable 1 (SVG): Namon's SVG Sunset

Here is a sunset I drew to get familiar with SVG.

The first project deliverable - sunset picture using SVG

SVG Code

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
   width="1000" height="600" viewBox="-50 -50 950 550">
   
<!-- Author: Namon Nuttayasakul -->
<!-- Date:   02/08/02-->
<!-- Title:  Sunset with SVG-->

<!-- Background-->
<defs>
   <linearGradient id="light" x1="0%" y1="0%" x2="50%" y2="100%"
      spreadMethod="pad" gradientUnits="objectBoundingBox">

      <stop offset="5%" style="stop-color:#FA6820;stop-opacity:.5"/>
      <stop offset="12%" style="stop-color:#FA6820;stop-opacity:.4"/>
      <stop offset="28%" style="stop-color:#FA6820;stop-opacity:.3"/>
      <stop offset="45%" style="stop-color:#FA6820;stop-opacity:.2"/>
      <stop offset="60%" style="stop-color:#FA6820;stop-opacity:.1"/>
      <stop offset="88%" style="stop-color:#FA6820;stop-opacity:.025"/>
      </linearGradient>	
</defs>

<rect x="-50" y="-80" width="1000" height="600" fill="url(#light)"/>


<!--Hills-->
<g transform="translate(-40 0) scale(0.95 0.95)">
   <path d="M 0 500 
      C 350 300 300 300 600 500"
      fill="rgb(12,51,3)" stroke="none" stroke-width="1"/>
</g>

<g transform="translate(0 0) scale(0.95 0.95)">
   <path d="M 300 500
      C 710 100 780 100 1000 500"      
      fill="rgb(12,51,3)" stroke="black" stroke-width="1"/>
</g>

<!--Sun-->
<g>
   <defs>
      <linearGradient id="suncolor">
         <stop offset="5%" stop-color="rgb(25,33,4)" />
         <stop offset="95%" stop-color="rgb(252,98,77)" />
      </linearGradient>
   </defs>

   <g transform="translate(50,80) scale(0.9 0.9)">
      <ellipse fill="url(#suncolor)" stroke="#FFFFFE" stroke-width="1"  
         cx="centerX" cy="0" rx="100" ry="100"/>
   </g>

 </g>


<!--Plane-->
<g transform="translate(500 200) scale(0.8 0.8)">
    <path d="M 0 0 L 2.5 2.5 L 10 2.5 L 15 15 L 20 15 L 15 2.5 L 35 2.5
    	     L 40 10 L 45 10 L 35 0 L 45 -10 L 40 -10 L 35 -2.5 L 15 -2.5
    	     L 20 -15 L 15 -15 L 10 -2.5 L 2.5 -2.5 z"
            fill="blue" stroke="blue" stroke-width="3" />
         
</g>


</svg>