Deliverable 1 (SVG): Namon's SVG Sunset
Here is a sunset I drew to get familiar with 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>
|
|