Skip to content

Instantly share code, notes, and snippets.

@zegerk
Last active November 18, 2020 21:30
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save zegerk/fc3390fbb0bb577f3b9d6e981eb8a540 to your computer and use it in GitHub Desktop.
SVG heating buffer
<html>
<!--
License: https://opensource.org/licenses/MIT
Author Zeger Knops - zeger@zeger.nl
-->
<head>
<script src="https://code.jquery.com/jquery-git.slim.min.js"></script>
<script>
$(document).ready(function () {
let searchParams = new URLSearchParams(window.location.search);
$("#text-buffer-in").text(searchParams.get("bufferIn"));
$("#text-ch-buffer-out").text(searchParams.get("bufferOut"));
$("#text-ch-buffer-in").text(searchParams.get("bufferChIn"));
$("#text-tap-water-in").text(searchParams.get("tapWaterIn"));
$("#text-tap-water-out").text(searchParams.get("tapWaterOut"));
$("#text-mixer-in").text(searchParams.get("mixerIn"));
searchParams.get("fireplacePump") == 0 && $("#fireplace-pump-animation").hide();
searchParams.get("heatingPump") == 0 && $("#heating-pump-animation").hide();
/*
bufferIn=1 °C buffer in&bufferOut=2 °C buffer out&bufferChIn=3 °C buffer in&tapWaterIn=4 °C buffer in&tapWaterOut=5 °C buffer in&mixerIn=6 °C buffer in&fireplacePump=1&heatingPump=1
*/
});
</script>
</head>
<svg width="100%" height="350px">
<defs>
<linearGradient id="BufferVat" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
</defs>
<style>
text {
font-family: "Arial, Helvetica, sans-serif";
}
</style>
<!-- central heating -->
<circle cx="555" cy="40" r="30" stroke="black" stroke-width="3" fill="red" />
<!-- central heating pump -->
<circle cx="555" cy="40" r="22" stroke="black" stroke-width="3" fill="white" />
<polygon id="heating-pump-animation" points="555,60,572,30,538,30" stroke="black" stroke-width="2" fill="white">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 555 40" to="360 555 40" dur="10s" repeatCount="indefinite" />
</polygon>
<!-- house heating -->
<circle cx="555" cy="189" r="30" stroke="black" stroke-width="3" fill="url(#BufferVat)" />
<!-- Central heating to house -->
<path d="M 555 68 l 0 94" stroke="black" stroke-width="12" fill="none" />
<path d="M 555 68 l 0 94" stroke="red" stroke-width="6" fill="none" />
<!-- buffer -->
<rect x="210" y="10" width="160" height="320" rx="16" fill="url(#BufferVat)" style="stroke-width: 8; stroke: rgb(0, 0, 0);" />
<!-- tap water spiral -->
<path
d="M 430 60 h -64
h -77
c -70 10, -70 10, 0 18
c 70 10, 70 10, 0 18
c -70 10, -70 10, 0 18
c 70 10, 70 10, 0 18
c -70 10, -70 10, 0 18
c 70 10, 70 10, 0 18
c -70 10, -70 10, 0 18
c 70 10, 70 10, 0 20
c -70 10, -70 10, 0 18
c 70 10, 70 10, 0 20
c -70 10, -70 10, 0 18
c 70 10, 70 10, 0 18
c -70 10, -70 10, 0 18
h 150
"
stroke="black"
stroke-width="12"
fill="none"
/>
<path
d="M 430 60 h -64
h -77
c -70 10, -70 10, 0 18
c 70 10, 70 10, 0 18
c -70 10, -70 10, 0 18
c 70 10, 70 10, 0 18
c -70 10, -70 10, 0 18
c 70 10, 70 10, 0 18
c -70 10, -70 10, 0 18
c 70 10, 70 10, 0 20
c -70 10, -70 10, 0 18
c 70 10, 70 10, 0 20
c -70 10, -70 10, 0 18
c 70 10, 70 10, 0 18
c -70 10, -70 10, 0 18
h 150
"
stroke="aqua"
stroke-width="6"
fill="none"
/>
<text id="text-tap-water-in" x="385" y="318" fill="black">12.3 °C tap water in</text>
<text id="text-tap-water-out" x="385" y="80" fill="black">33.3 °C tap water out</text>
<!-- fireplace -->
<circle cx="100" cy="80" r="30" stroke="black" stroke-width="3" fill="url(#BufferVat)" />
<!-- fireplace pump -->
<circle cx="100" cy="160" r="22" stroke="black" stroke-width="3" fill="white" />
4
<polygon id="fireplace-pump-animation" points="100,180,117,150,83,150" stroke="black" stroke-width="2" fill="white">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 160" to="360 100 160" dur="10s" repeatCount="indefinite" />
</polygon>
<!-- Mixer -->
<circle cx="100" cy="219" r="20" stroke="black" stroke-width="3" fill="white" />
<!-- Mixer to pump -->
<path d="M 100 181 l 0 20" stroke="black" stroke-width="12" fill="none" />
<path d="M 100 181 l 0 20" stroke="blue" stroke-width="6" fill="none" />
<!-- Pump to fireplace -->
<path d="M 100 108 v 32" stroke="black" stroke-width="12" fill="none" />
<path d="M 100 108 v 32" stroke="blue" stroke-width="6" fill="none" />
<!-- Fireplace buffer in -->
<path d="M 100 52 v -12 l 114 0" stroke="black" stroke-width="12" fill="none" />
<path d="M 100 52 v -12 l 114 0" stroke="red" stroke-width="6" fill="none" />
<text id="text-buffer-in" x="100" y="30" fill="black">XX °C buffer in</text>
<!-- Fireplace to mixer -->
<path d="M 97 40 h -55 v 180 h 40" stroke="black" stroke-width="12" fill="none" />
<path d="M 97 40 h -55 v 180 h 40" stroke="red" stroke-width="6" fill="none" />
<!-- Fireplace buffer out -->
<path d="M 100 237 v 33 l 114 0" stroke="black" stroke-width="12" fill="none" />
<path d="M 100 237 v 33 l 114 0" stroke="blue" stroke-width="6" fill="none" />
<text id="text-mixer-in" x="100" y="290" fill="black">12.3 °C mixer in</text>
<!-- Central heating buffer out -->
<path d="M 366 40 l 160 0" stroke="black" stroke-width="12" fill="none" />
<path d="M 366 40 l 162 0" stroke="red" stroke-width="6" fill="none" />
<text id="text-ch-buffer-out" x="385" y="28" fill="black">XX °C buffer out</text>
<!-- Central heating buffer in -->
<path d="M 366 270 l 190 0 v -50" stroke="black" stroke-width="12" fill="none" />
<path d="M 366 270 l 190 0 v -53" stroke="blue" stroke-width="6" fill="none" />
<text id="text-ch-buffer-in" x="385" y="258" fill="black">XX °C buffer in</text>
</svg>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment