Weather SVG

weather.svg

<svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 870 280"
        onload="init()">

    <script type="text/ecmascript"><![CDATA[
        function init() {
            var location = window.location.hash ? decodeURIComponent(window.location.hash.substr(1)) : "Aachen",
                xmlhttp = new XMLHttpRequest(),
                locationQuery = escape("select item.condition from weather.forecast where woeid in (select woeid from geo.places(1) where text='" + location + "') and u='c'"),
                locationUrl = "https://query.yahooapis.com/v1/public/yql?q=" + locationQuery + "&format=json",
                request = new XMLHttpRequest();
            request.open('GET', locationUrl, true);

            request.onload = function() {
                if (request.status >= 200 && request.status < 400) {
                    document.getElementById("location").textContent = location;
                    changeWeatherData(request.responseText);
                }
            };
            request.send();
        }

        function changeWeatherData(json) {
            weatherData = JSON.parse(json);

            if (weatherData.query.count > 0) {
                weather = weatherData.query.results.channel.item.condition;

                // weather code table at https://developer.yahoo.com/weather/documentation.html
                if (weather.code <= 19 || weather.code >= 37) {
                    icon = "rain"
                } else if (weather.code >= 31 && weather.code <= 36) {
                    icon = "sun"
                } else {
                    icon = "clouds"
                }

                document.getElementById("temperature").textContent = weather.temp + "°C";
                document.getElementById("weathertext").textContent = weather.text;
                document.getElementById("weathericon").setAttribute("href", "#" + icon);
            } else {
                document.getElementById("weathertext").textContent = "Error";
            }
        }
    ]]></script>

    <defs>
        <polygon points="25,0 0,50 50,50" id="triangle-1"/>

        <!-- sun icon -->
        <g fill="#ffbb00" id="sun" transform="translate(80,-25)">
            <g fill="#ffbb00" transform="rotate(0, 25, 25)">
                <use href="#triangle-1" transform="translate(0, -100)"/>
                <use href="#triangle-1" transform="rotate(45, 25, 25) translate(0, -100)"/>
                <use href="#triangle-1" transform="rotate(90, 25, 25) translate(0, -100)"/>
                <use href="#triangle-1" transform="rotate(135, 25, 25) translate(0, -100)"/>
                <use href="#triangle-1" transform="rotate(180, 25, 25) translate(0, -100)"/>
                <use href="#triangle-1" transform="rotate(225, 25, 25) translate(0, -100)"/>
                <use href="#triangle-1" transform="rotate(275, 25, 25) translate(0, -100)"/>
                <use href="#triangle-1" transform="rotate(320, 25, 25) translate(0, -100)"/>
                <circle cx="25" cy="25" r="70"/>
                <animateTransform
                        attributeName="transform"
                        dur="20s"
                        type="rotate"
                        from="0 25 25"
                        to="360 25 25"
                        repeatCount="indefinite"
                />
            </g>
        </g>

        <!-- clouds icon -->
        <g fill="#adadad" transform="translate(-15, -30)" id="clouds">
            <circle cx="0" cy="30" r="100">
                <animate attributeName="r" values="80; 120; 80" dur="20s" repeatCount="indefinite" />
            </circle>
            <circle cx="100" cy="0" r="110">
                <animate attributeName="r" values="80; 120; 80" dur="21s" repeatCount="indefinite" />
            </circle>
            <circle cx="100" cy="30" r="120">
                <animate attributeName="r" values="90; 130; 90" dur="19s" repeatCount="indefinite" />
            </circle>
            <circle cx="200" cy="30" r="90">
                <animate attributeName="r" values="80; 120; 80" dur="18s" repeatCount="indefinite" />
            </circle>
        </g>

        <!-- rain icon -->
        <g id="drop" opacity="1">
            <path d='   M64 152 
                        C96 152 116 120 128 80 
                        C156 -16 152 -16 64 22 
                        C24 40 0 48 0 88 
                        C0 128 24 152 64 152 
                        Z' />
        </g>
        <g fill="#3AA2D9" transform="translate(-60, -60)" id="rain">
            <use x="0" y="0" href="#drop">
                <animate attributeName="opacity" values="0.8; 1; 0" dur="1s" repeatCount="indefinite" />
                <animateTransform
                        attributeName="transform"
                        dur="1s"
                        type="translate"
                        from="20, -20"
                        to="-20, 20"
                        repeatCount="indefinite"
                />
            </use>
            <use x="120" y="50" href="#drop">
                <animate attributeName="opacity" values="0.8; 1; 0" dur="0.8s" repeatCount="indefinite" />
                <animateTransform
                        attributeName="transform"
                        dur="0.8s"
                        type="translate"
                        from="20, -20"
                        to="-20, 20"
                        repeatCount="indefinite"
                />
            </use>
            <use x="260" y="0" href="#drop">
                <animate attributeName="opacity" values="0.8; 1; 0" dur="0.9s" repeatCount="indefinite" />
                <animateTransform
                        attributeName="transform"
                        dur="0.9s"
                        type="translate"
                        from="20, -20"
                        to="-20, 20"
                        repeatCount="indefinite"
                />
            </use>
        </g>
    </defs>

    <g>
        <use id="weathericon" x="140" y="140" href="#rain"></use>
        <text id="location" x="600" y="70" fill="#212121" text-anchor="middle" font-family="sans-serif" font-size="40">Aachen</text>
        <text id="temperature" x="600" y="180" fill="#212121" text-anchor="middle" font-family="sans-serif" font-size="100" font-weight="bold">15°C
        </text>
        <text id="weathertext" x="600" y="230" fill="#212121" text-anchor="middle" font-family="sans-serif" font-size="40">Rainy</text>

        <animate attributeName="opacity" values="0; 1" dur="0.4s" repeatCount="1" />
    </g>
</svg>