ratarmount.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="610"
     height="120"
     viewBox="-5 -5 620 125"
     version="1.1"
     id="ratarmount-logo"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:svg="http://www.w3.org/2000/svg"
>
    <style>
:root {
    --color-ratar: #aa00cc;
    --color-mount: #009900;
}

#ratar { stroke: var(--color-ratar); }
#stop-ratar { stop-color: var(--color-ratar); }
#mount { stroke: var(--color-mount); }
#stop-mount { stop-color: var(--color-mount); }

/* On hover does not work for this SVG when inlined into the rendered Github Readme.md. */
.gloweffect:hover { filter: url(#glow); }
/* .gloweffect { filter: url(#glow); } */
    </style>
    <defs id="definitions">
        <linearGradient
           xlink:href="#linearGradientStops"
           id="linearGradient1"
           gradientUnits="userSpaceOnUse"
           x1="190" y1="0" x2="320" y2="0"/>
        <linearGradient id="linearGradientStops">
            <stop offset="0" id="stop-ratar" style="stop-color: #aa00cc"/>
            <stop offset="1" id="stop-mount" style="stop-color: #009900"/>
        </linearGradient>
        <filter id="animated-glow">
            <feGaussianBlur stdDeviation="1" result="blur1">
                <animate attributeName="stdDeviation" calcMode="linear" keyTimes="0.0; 0.96; 0.98; 1.0"
                         values="0; 0; 1; 0" dur="20s" repeatCount="indefinite"/>
            </feGaussianBlur>
            <feGaussianBlur stdDeviation="2" result="blur2">
                <animate attributeName="stdDeviation" calcMode="linear" keyTimes="0.0; 0.96; 0.98; 1.0"
                         values="0; 0; 2; 0" dur="20s" repeatCount="indefinite"/>
            </feGaussianBlur>
            <feGaussianBlur stdDeviation="4" result="blur3">
                <animate attributeName="stdDeviation" calcMode="linear" keyTimes="0.0; 0.96; 0.98; 1.0"
                         values="0; 0; 4; 0" dur="20s" repeatCount="indefinite"/>
            </feGaussianBlur>
            <feColorMatrix in="SourceGraphic" type="saturate" values="2" result="luminescence">
                <animate attributeName="values" calcMode="linear" keyTimes="0.0; 0.94; 0.98; 1.0"
                         values="1; 1; 2; 1" dur="20s" repeatCount="indefinite"/>
            </feColorMatrix>
            <feMerge>
                <feMergeNode in="blur1"/>
                <feMergeNode in="blur2"/>
                <feMergeNode in="blur3"/>
                <feMergeNode in="SourceGraphic"/>
                <feMergeNode in="luminescence"/>
            </feMerge>
        </filter>
        <filter id="glow">
            <feGaussianBlur stdDeviation="1" result="blur1"/>
            <feGaussianBlur stdDeviation="2" result="blur2"/>
            <feGaussianBlur stdDeviation="4" result="blur3"/>
            <feColorMatrix in="SourceGraphic" type="saturate" values="2" result="luminescence"/>
            <feMerge>
                <feMergeNode in="blur1"/>
                <feMergeNode in="blur2"/>
                <feMergeNode in="blur3"/>
                <feMergeNode in="SourceGraphic"/>
                <feMergeNode in="luminescence"/>
            </feMerge>
        </filter>
    </defs>
    <g id="ratarmount" class="gloweffect" style="
        fill: none;
        stroke-width: 10;
        stroke-linecap: round;
        stroke-miterlimit: 4;
        stroke-dasharray: none;
        stroke-opacity:1;">
        <g id="ratar" style="stroke: #aa00cc">
            <g id="r" transform="translate(30, 0)">
                <path d="m 0,50 c -11,0 -20,9 -20,20 v 30"/>
            </g>
            <g id="a" transform="translate(50, 0)">
                <circle id="a-ring" cx="25" cy="75" r="25"/>
                <path d="m 50,75 v 25" id="a-tail"/>
            </g>
            <g id="left-t" transform="translate(125, 0)">
                <path d="M 0,10 v 90"/>
            </g>
            <g id="mirrored-a" transform="translate(150, 0)">
                <circle id="mirrored-a-ring" cx="25" cy="75" r="25"/>
                <path d="m 0,75 0,25" id="mirrored-a-tail"/>
            </g>
            <g id="mirrored-r" transform="translate(220, 0)">
                <path d="m 0,50 c 11,0 20,9 20,20 v 30"/>
            </g>
        </g>
        <g id="mount" style="stroke:#009900" transform="translate(255, 0)">
            <g id="m">
                <path d="m 50,100 v -30 c 0,-11 -9,-20 -20,-20 -11,0 -20,9 -20,20 v 30 m 80,0 v -30 c 0,-11 -9,-20 -20,-20 -11,0 -20,9 -20,20"/>
            </g>
            <g id="o" transform="translate(110, 0)">
                <circle cx="25" cy="75" r="25"/>
            </g>
            <g id="u" transform="translate(205, 0)">
                <path d="m 25,50 v 25 c 0,13.8 -11,25 -25,25 -13.8,0 -25,-11 -25,-25 v -25"/>
            </g>
            <g id="n" transform="translate(250, 0)">
                <path d="m 0,100 v -25 c 0,-13.8 11,-25 25,-25 13.8,0 25,11 25,25 v 25"/>
            </g>
            <path id="right-t" d="m 325,10 v 90"/>
        </g>
        <g id="animated-t-bar">
            <path id="right-t-bar" d="M 560,30 h 40" style="stroke:url(#linearGradient1)">
                <animate attributeName="d"
                    calcMode="spline"
                    keyTimes="0.0; 0.7; 0.75; 0.95; 1.0"
                    values="M 240,30 H 595;
                            M 240,30 H 595;
                            M 565,30 H 595;
                            M 565,30 H 595;
                            M 240,30 H 595"
                    dur="20s"
                    repeatCount="indefinite"/>
            </path>
        </g>
        <path style="stroke:url(#linearGradient1)" d="M 10,30 H 600" id="roof">
            <!--
            Multiply length with cosine to simulate an animation as if the line was rotating with constant speed:
            python3 -c 'import numpy as np; \
                cs = 0.5 + 0.5 * np.cos( np.linspace( 0, 1, 24, endpoint = True ) * 2 * np.pi ); \
                cs = np.concatenate( (np.ones( 48 ), cs) ); \
                print( ";\n".join( f"M {105 - c * 90},30 H {145 + c * 450}" for c in cs ) )'

            <animate attributeName="d" values="... output from Python script ..." dur="8s" repeatCount="indefinite"/>
            -->
            <animate attributeName="d"
                calcMode="spline"
                keyTimes="0.0; 0.7; 0.75; 0.95; 1.0"
                values="M 15,30 H 240;
                        M 15,30 H 240;
                        M 105,30 H 145;
                        M 105,30 H 145;
                        M 15,30 H 240"
                dur="20s"
                repeatCount="indefinite"/>
        </path>
    </g>
</svg>