Weather condition test svg

test-weather-condition.svg

<svg viewBox="0 0 640 400" width="640" height="400" xmlns="http://www.w3.org/2000/svg">
    <style>
        .conditions { font: bold 18px sans-serif; }
        .meta { font: normal 18px sans-serif; }
        .heavy { font: bold 50px sans-serif; }
        .alert { font: bold 50px sans-serif; text-transform: uppercase; fill: white; }
        .temperature { font: bold 100px sans-serif; text-transform: uppercase; fill: black; }
    </style>

    <!-- Simple rectangle -->
    <!--<rect width="100" height="100" />-->
    <!--<rect width="220" height="100" style="fill:none;stroke-width:10;stroke:rgb(0,0,0)"/>-->
    <!--<line x1="100" y1="0" x2="100" y2="100" stroke="black" stroke-width="5" />-->
    <!--<line x1="0" y1="320" x2="640" y2="320" stroke="black" stroke-width="5" />-->
    <!--<line x1="400" y1="0" x2="400" y2="400" stroke="black" stroke-width="5" />-->
    <!--<text x="440" y="370" class="heavy">23:55</text>-->
    <!--<rect x="5" y="325" width="386" height="50" fill="red" />-->
    <!--<text x="10" y="368" class="alert">Active Alert</text>-->
    <!--<text x="400" y="180" class="temperature">188°</text>-->
    <!-- Rounded corner rectangle -->
    <!--<rect x="120" width="100" height="100" rx="15" />-->
    <svg x="0" y="0" viewBox="0 0 400 320" width="400" height="320" xmlns="http://www.w3.org/2000/svg">
        <text x="50%" y="40" dominant-baseline="middle" text-anchor="middle" class="conditions">Conditions at: KBNA</text>
        <svg id="Expanded" viewBox="0 0 64 64" y="60" height="260" xmlns="http://www.w3.org/2000/svg"><title/><path d="M29.31,7a1,1,0,0,0,1-1V4a1,1,0,0,0-2,0V6A1,1,0,0,0,29.31,7Z"/><path d="M38.36,9.46A1,1,0,0,0,39.19,9s.31-.47,1.1-1.91a1,1,0,0,0-1.76-1c-.74,1.36-1,1.76-1,1.76a1,1,0,0,0,.28,1.39A1,1,0,0,0,38.36,9.46Z"/><path d="M44.92,16a1.12,1.12,0,0,0,.31,0,15.27,15.27,0,0,0,2-1,1,1,0,0,0,.4-1.36,1,1,0,0,0-1.36-.4,16.28,16.28,0,0,1-1.67.85A1,1,0,0,0,44,15.33,1,1,0,0,0,44.92,16Z"/><path d="M46.41,24.2a1,1,0,0,0,1,1h2a1,1,0,0,0,0-2h-2A1,1,0,0,0,46.41,24.2Z"/><path d="M14.41,32.7A1,1,0,0,0,13,32.41s-.41.27-1.76,1a1,1,0,0,0-.4,1.35,1,1,0,0,0,.88.52,1,1,0,0,0,.48-.12c1.44-.78,1.86-1.06,1.91-1.09A1,1,0,0,0,14.41,32.7Z"/><path d="M12.08,24.2a1,1,0,0,0-1-1h-2a1,1,0,0,0,0,2h2A1,1,0,0,0,12.08,24.2Z"/><path d="M11.26,15a16.08,16.08,0,0,0,2,1,1.12,1.12,0,0,0,.31,0,1,1,0,0,0,.94-.67,1,1,0,0,0-.6-1.28,13.6,13.6,0,0,1-1.69-.85,1,1,0,0,0-1,1.76Z"/><path d="M19.18,8.78a1,1,0,0,0,.95.68,1.19,1.19,0,0,0,.32-.05,1,1,0,0,0,.63-1.27,16.08,16.08,0,0,0-1-2,1,1,0,0,0-1.76,1A16.77,16.77,0,0,1,19.18,8.78Z"/><path d="M55.87,43.29A21.47,21.47,0,0,0,43.16,27.71,14.31,14.31,0,0,0,33,10.38a14.13,14.13,0,0,0-17.49,10,14.28,14.28,0,0,0,3.13,13.35A21.3,21.3,0,0,0,14,43.29l-.21,1.06,1.07.12a19.74,19.74,0,0,1,8.49,3l.55.36.54-.37a18.79,18.79,0,0,1,9.34-3.07V57.25c0,2.14,2,3.75,4.67,3.75S43,59.35,43,57.25a1,1,0,0,0-2,0c0,1-1.11,1.75-2.54,1.75s-2.67-.75-2.67-1.75V44.37a19.64,19.64,0,0,1,9.74,3.09l.56.36.54-.37a18.83,18.83,0,0,1,8.35-3l1.07-.12ZM17.43,20.91a12,12,0,0,1,5.65-7.41,12.19,12.19,0,0,1,9.39-1.19A12.31,12.31,0,0,1,41.27,27l-.44-.12-.65-.17-1.07-.24-.65-.12c-.39-.06-.79-.11-1.18-.15l-.57-.06c-.58-.05-1.17-.08-1.76-.08s-1.32,0-2,.1h-.15c-.63.06-1.25.16-1.86.28l-.23,0A17.64,17.64,0,0,0,29,27L28.7,27c-.58.18-1.14.38-1.7.61l-.26.11c-.56.23-1.1.49-1.63.77l-.25.13c-.53.29-1.05.59-1.56.93l-.2.14a18.2,18.2,0,0,0-1.51,1.1l-.13.11c-.51.42-1,.85-1.46,1.31h0A12.28,12.28,0,0,1,17.43,20.91ZM46.09,45.43A21.73,21.73,0,0,0,35,42.34h-.14a20.87,20.87,0,0,0-10.89,3.1,21.3,21.3,0,0,0-7.69-2.8A19.44,19.44,0,0,1,35,28.08c.57,0,1.15,0,1.71.07a19.24,19.24,0,0,1,17,14.49A20.64,20.64,0,0,0,46.09,45.43Z"/></svg>
    </svg>
    <svg x="400" y="0" viewBox="0 0 240 320" width="240" height="320" xmlns="http://www.w3.org/2000/svg">
        <svg x="0" y="0" viewBox="0 0 240 180" width="240" height="180" xmlns="http://www.w3.org/2000/svg">
            <text x="50%" y="80%" dominant-baseline="middle" text-anchor="middle" class="temperature">108°</text>
        </svg>
        <svg x="0" y="180" viewBox="0 0 240 140" width="240" height="140" xmlns="http://www.w3.org/2000/svg">
            <text x="50%" y="60" dominant-baseline="middle" text-anchor="middle" class="meta">Last updated:</text>
            <text x="50%" y="90" dominant-baseline="middle" text-anchor="middle" class="meta">2020-10-04 19:59:53 CDT</text>
        </svg>
    </svg>
    <svg x="0" y="320" viewBox="0 0 640 80" width="640" height="80" xmlns="http://www.w3.org/2000/svg">
        <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" class="conditions">There are currently no weather alerts for your location.</text> 
    </svg>
    <polyline
        points="0,0 640,0 640,400 0,400 0,0"
        fill="none" stroke="black" stroke-width="10" />
    <polyline
        points="0,320 640,320 640,0 400,0 400,320"
        fill="none" stroke="black" stroke-width="5" />
</svg>