Deliverable 1: Jie Wei Lin's Sunset
Below is a sunset I created to demonstrate the features of VML.
VML Code
<v:group id="sunset" style="position:relative; top:0px; left:0px; width:480px; height:300px" coordorigin="0,0" coordsize="480,300" >
<v:rect
fill="false"
stroke="false"
strokecolor="white"
strokeweight="0.75pt"
border="0"
style="position:absolute;
top:0px; left:0;
width:480px;
height:100px">
<v:fill Type="Gradient"
Angle="360"
color="#ff6600"
color2="yellow"
Focus="50%" />
</v:rect>
<v:rect
fill="true"
stroke="true"
strokecolor="yellow"
strokeweight="0.75pt"
border="0"
border="0"
style="position:absolute;
top:100px; left:0;
width:480px;
height:50px">
<v:fill Type="Gradient"
Angle="360"
color="yellow"
color2="#EFF8Ad"/>
</v:rect>
<v:rect
fill="true"
stroke="true"
strokecolor="#EFF8Ad"
strokeweight="0.75pt"
style=" position:absolute;
top:150px; left:0;
width:480px;
height:50px">
<v:fill Type="Gradient"
Angle="360"
color="#EFF8Ad"
color2="#ADDE63"
/>
</v:rect>
<v:rect
fill="true"
stroke="true"
strokecolor="#ADDE63"
strokeweight="0.75pt"
style="position:absolute;
top:200px; left:0;
width:480px;
height:50px">
<v:fill Type="Gradient" Angle="360"
color="#ADDE63"
color2="#218429"
/>
</v:rect>
<v:rect
fill="true"
stroke="true"
strokecolor="#218429"
strokeweight="0.75pt"
style="position:absolute;
top:250px; left:0;
width:480px;
height:100px">
<v:fill Type="Gradient" Angle="360"
color="#218429"
color2="#186321"
/>
</v:rect>
<!-- sun -->
<v:oval filled="true" fillcolor="#ff3300"
stroke="true"
strokecolor="red"
strokeweight="0.75pt"
style="top:50px; left:50px; width:70px;height:70px">
<v:fill Type="Gradient"
color="red"
color2="#990000"
focus="30%" />
</v:oval>
<!-- group components for the house together -->
<v:group id="house" style="position:absolute; top:50px; left:250px; width:100px; height:200px"
coordorigin="0,0" coordsize="20, 40"
>
<!-- roof -->
<v:polyline filled="true" fillcolor="gray"
points="0, 20, 20, 0, 40, 20">
<v:fill Type="Gradient" Angle="330"
color="silver"
color2="gray"/>
</v:polyline>
<!-- chimmy -->
<v:shapetype id="chimmy"
coordsize="10, 3"
fillcolor="black"
path="M 28,12 L 28, 7 30,7 30,12 X E">
<v:fill Type="Gradient" Angle="330"
color="silver"
color2="gray"/>
</v:shapetype>
<v:shape type="#chimmy" style="width:10px; height:3px" />
<!-- small smoke -->
<v:oval id="smoke1" filled="true" fillcolor="#ff3300"
stroke="true"
strokecolor="white"
strokeweight="0.75pt"
style="height:2px; width:2px; top:5px; left:28px">
<v:fill Type="Gradient"
color="white"
color2="silver"
focus="30%" />
</v:oval>
<!-- bigger smoke -->
<v:oval id="smoke2" filled="true" fillcolor="#ff3300"
stroke="true"
strokecolor="white"
strokeweight="0.75pt"
style="height:3px; width:3px; top:2px; left:28px">
<v:fill Type="Gradient"
color="white"
color2="silver"
focus="30%" />
</v:oval>
<!-- wall -->
<v:rect filled="true" fillcolor="gray"
style="height:20px; width:30px; top:20px; left:5px">
<v:fill Type="Gradient" Angle="330"
color="silver"
color2="gray"/>
</v:rect>
<!-- window -->
<v:rect filled="true" fillcolor="#ff9900"
style="height:7px; width:5px; top:25px; left:25px">
<v:fill Type="Gradient" Angle="80"
color="#ff9900"
color2="yellow"/>
</v:rect>
<!-- door -->
<v:rect filled="true" fillcolor="black"
style="height:15px; width:10px; top:25px; left:13px">
<v:fill Type="Gradient" Angle="330"
color="silver"
color2="#404040"/>
</v:rect>
</v:group>
</v:group>
|