HTML
<svg height="300px" width="400px" id="cloud1">
<polygon points="72,47 117,48 134,68 124,74 82,74 50,68" fill="white" />
<polygon points="92,60 134,68 124,74 82,74 50,68" fill="#f2f2f2" />
</svg>
<svg height="300px" width="400px" id="cloud2">
<polygon points="282,137 347,148 354,168 284,184 260,170 250,148" fill="white" />
<polygon points="354,168 284,184 260,170 250,148" fill="#f1f1f1" />
<polygon points="354,168 284,184 320,162" fill="#eaeaea" />
</svg>
<svg height="300px" width="400px">
<ellipse cx="188" cy="273" rx="80" ry="20" style="fill:url(#shadow);opacity:0.3;" />
<ellipse cx="188" cy="273" rx="24" ry="5" style="fill:url(#shadow);" />
<polygon points="182,211 187,211 187,274 180,274" fill="url(#trunkgrad)" />
<polygon points="187,211 196,211 198,274 187,274" class="brown-dark" />
<polygon points="187,28 154,162 116,159" class="green-lighter" />
<polygon points="154,162 116,159 155,218" class="green-light" />
<polygon points="187,28 216,114 154,162" class="green-norm" />
<polygon points="187,28 216,114 264,162 204,28" class="green-norm" />
<polygon points="216,114 264,162 223,210" class="green-dark" />
<polygon points="216,114 223,210 154,162" style="fill:#5c9433" />
<polygon points="154,162 223,210 188,211" class="green-darker" />
<polygon points="154,162 188,211 155,218" class="green-darker" />
<polygon points="200,70 216,114 185,137" class="green-light" />
<polygon points="216,114 220,167 185,137" style="fill:#588f32" />
<polygon points="216,114 250,148 220,167" style="fill:#598d33" />
<linearGradient id="trunkgrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#996d2e;stop-opacity:1" />
<stop offset="100%" style="stop-color:#d5bc79;stop-opacity:1" />
</linearGradient>
<radialGradient id="shadow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#666;
stop-opacity:0.7" />
<stop offset="100%" style="stop-color:#666;stop-opacity:0" />
</radialGradient>
</svg>
