Polygon Tree

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>
SCSS
body { margin-top: 20px; background: #a2d6eb; } svg { position: absolute; left: 50%; margin-left: -200px; polygon { stroke-width: 1; } } .green-lighter { background: #a5df66; fill: #a5df66; stroke: #a5df66; } .green-light { background: #79b544; fill: #79b544; stroke: #79b544; } .green-norm { background: #619b37; fill: #619b37; stroke: #619b37; } .green-dark { background: #54892f; fill: #54892f; stroke: #54892f; } .green-darker { background: #3c6720; fill: #3c6720; stroke: #3c6720; } .brown-light { background: #d5bc79; fill: #d5bc79; } .brown-dark { background: #996d2e; fill: #996d2e; } #cloud1 { animation: bounce1 2s ease-in-out 0s infinite alternate; } #cloud2 { animation: bounce2 3s ease-in-out 0s infinite alternate; } @keyframes bounce1 { from { transform: translateY(0px); } to { transform: translateY(-4px); } } @keyframes bounce2 { from { transform: translateY(0px); } to { transform: translateY(-6px); } }
JAVASCRIPT
Expand for more options Login