index.html
<!DOCTYPE html>
<html>
<head>
<title>SVG shapes and animation sandbox</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<svg width="960" height="500">
<!--
powderblue royalblue steelblue slategray dodgerblue deepskyblue darkturquoise darkslateblue darkcyan cyan cornflowerblue cadetblue navy blue aqua -->
<!-- sky -->
<rect x="0" y="0" width="100%" height="10" fill="dodgerblue"></rect>
<rect x="0" y="5" width="100%" height="15" fill="darkturquoise"></rect>
<rect x="0" y="20" width="100%" height="20" fill="royalblue"></rect>
<rect x="0" y="35" width="100%" height="15" fill="dodgerblue"></rect>
<rect x="0" y="47" width="100%" height="10" fill="royalblue"></rect>
<rect x="0" y="55" width="100%" height="23" fill="darkturquoise"></rect>
<rect x="0" y="75" width="100%" height="20" fill="cyan"></rect>
<rect x="0" y="87" width="100%" height="22" fill="cornflowerblue"></rect>
<rect x="0" y="105" width="100%" height="15" fill="deepskyblue"></rect>
<rect x="0" y="115" width="100%" height="25" fill="dodgerblue"></rect>
<rect x="0" y="135" width="100%" height="15" fill="powderblue"></rect>
<rect x="0" y="145" width="100%" height="33" fill="darkturquoise"></rect>
<rect x="0" y="175" width="100%" height="30" fill="cyan"></rect>
<rect x="0" y="205" width="100%" height="35" fill="dodgerblue"></rect>
<rect x="0" y="235" width="100%" height="25" fill="powderblue"></rect>
<rect x="0" y="255" width="100%" height="35" fill="royalblue"></rect>
<rect x="0" y="287" width="100%" height="22" fill="cornflowerblue"></rect>
<rect x="0" y="305" width="100%" height="15" fill="deepskyblue"></rect>
<rect x="0" y="320" width="100%" height="20" fill="dodgerblue"></rect>
