deezer-streaming.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450">
	<style>
		.title {
			font-family:Tahoma;
			font-size:25px;
			font-weight:bold;
		}

		rect.block {
			fill:#29e;
		}

		text.block {
			font-family:Tahoma;
			font-size:20px;
			font-weight:bold;
			alignment-baseline:middle;
			text-anchor:middle;
			text-transform:uppercase;
			letter-spacing:2px;
			fill:#FFF;
		}

		.tube {
			fill:#BBB;
		}

		.data {
			fill:red;
		}
	</style>

	<!-- WITHOUT STREAMING -->

	<text x="25" y="75" class="title">Without Streaming</text>

	<defs>
		<circle id="circle1" cx="125" cy="150" r="20" class="data"></circle>
		<circle id="circle2" cx="400" cy="150" r="20" class="data"></circle>
	</defs>

	<rect class="tube" x="175" y="130" width="150" height="40"></rect>
	<rect class="tube" x="475" y="130" width="150" height="40"></rect>
	<use href="#circle1"><animateTransform id="anim1" attributeName="transform" type="translate" values="0 0; 275 0" dur="3s" begin="0s;anim2.end" /></use>
	<use href="#circle2"><animateTransform id="anim2" attributeName="transform" type="translate" values="0 0; 275 0" dur="1.2s" begin="anim1.end" /></use>

	<rect class="block" x="25" y="100" width="150" height="100"></rect>
	<text class="block" x="100" y="150">Fetch</text>

	<rect class="data" x="325" y="100" width="150" height="100"></rect>
	<rect class="block" x="325" y="100" width="150" height="0">
		<animate attributeName="height" from="100" to="0" dur="3s" begin="0s;anim2.end" />
		<animate attributeName="height" from="0" to="100" dur="1.2s" begin="anim1.end" />
	</rect>
	<text class="block" x="400" y="150">Memory</text>

	<rect class="block" x="625" y="100" width="150" height="100"></rect>
	<text class="block" x="700" y="150">Render</text>

	<!-- WITH STREAMING -->

	<text x="25" y="300" class="title">With Streaming</text>

	<defs>
		<g id="circle3" transform="translate(125, 375)">
			<circle cx="-49" r="5" class="data"></circle>
			<circle cx="-35" r="5" class="data"></circle>
			<circle cx="-21" r="5" class="data"></circle>
			<circle cx="-7" r="5" class="data"></circle>
			<circle cx="7" r="5" class="data"></circle>
			<circle cx="21" r="5" class="data"></circle>
			<circle cx="35" r="5" class="data"></circle>
			<circle cx="49" r="5" class="data"></circle>
		</g>
		<g id="circle4" transform="translate(400, 375)">
			<circle cx="-45" r="10" class="data"></circle>
			<circle cx="-15" r="10" class="data"></circle>
			<circle cx="15" r="10" class="data"></circle>
			<circle cx="45" r="10" class="data"></circle>
		</g>
	</defs>

	<rect class="tube" x="175" y="365" width="150" height="20"></rect>
	<rect class="tube" x="475" y="365" width="150" height="20"></rect>
	<use href="#circle3"><animateTransform id="anim3" attributeName="transform" type="translate" values="0 0; 275 0" dur="2s" repeatCount="indefinite" /></use>
	<use href="#circle4"><animateTransform id="anim4" attributeName="transform" type="translate" values="0 0; 275 0" dur="2s" begin="1s" repeatCount="indefinite" /></use>

	<rect class="block" x="25" y="325" width="150" height="100"></rect>
	<text class="block" x="100" y="375">Fetch</text>

	<rect class="data" x="325" y="325" width="150" height="100"></rect>
	<rect class="block" x="325" y="325" width="150" height="80"></rect>
	<text class="block" x="400" y="375">Memory</text>

	<rect class="block" x="625" y="325" width="150" height="100"></rect>
	<text class="block" x="700" y="375">Render</text>

</svg>