Optimade Animation (Live Logo) released under CC BY 4.0

Dear Friends!

Please feel free to use this piece of SVG/CSS code in your apps and presentations! The license is CC BY 4.0. Also, since this is just the code, it’s very easy to modify it.

logo-animate

Enjoy :smiling_face: And cudos to the modern web-standards :smiling_face:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" viewBox="0 0 55 55">
    <g id="between">
        <path stroke="#9ed700" stroke-width="1.15" d="m27 14.5 11-6.553" />
        <path stroke="#00acd9" stroke-width="1.15" d="M37.825 33.25 38 46.053" />
        <path stroke="#7a2dd0" stroke-width="1.15" d="M16.175 33.25 5 27" />
    </g>
    <g id="outside">
        <path stroke="#00acd9" stroke-width="1.15" d="M49 27 38 46.053" />
        <path stroke="#f1f1f1" stroke-width="2" d="M38 46.053H16" />
        <path stroke="#7a2dd0" stroke-width="1.15" d="M16 46.053 5 27" />
        <path stroke="#f1f1f1" stroke-width="2" d="M5 27 16 7.947" />
        <path stroke="#9ed700" stroke-width="1.15" d="M16 7.947h22" />
        <path stroke="#f1f1f1" stroke-width="2" d="M38 7.947 49 27" />
        <circle cx="49" cy="27" r="3.5" fill="#00acd9" />
        <circle cx="38" cy="46.053" r="3.5" fill="#00acd9" />
        <circle cx="16" cy="46.053" r="3.5" fill="#7a2dd0" />
        <circle cx="5" cy="27" r="3.5" fill="#7a2dd0" />
        <circle cx="16" cy="7.947" r="3.5" fill="#9ed700" />
        <circle cx="38" cy="7.947" r="3.5" fill="#9ed700" />
    </g>
    <g id="inside">
        <path stroke="#ff414d"
            d="m27 39.5-10.825-6.25M16.175 33.25v-12.5M16.175 20.75 27 14.5M27 14.5l10.825 6.25M37.825 20.75v12.5M37.825 33.25 27 39.5" />
        <circle cx="27" cy="39.5" r="2.5" fill="#ff414d" />
        <circle cx="16.175" cy="33.25" r="2.5" fill="#ff414d" />
        <circle cx="16.175" cy="20.75" r="2.5" fill="#ff414d" />
        <circle cx="27" cy="14.5" r="2.5" fill="#ff414d" />
        <circle cx="37.825" cy="20.75" r="2.5" fill="#ff414d" />
        <circle cx="37.825" cy="33.25" r="2.5" fill="#ff414d" />
    </g>
    <style>
        svg > * {
            transform-origin: center;
            --deg: 360deg;
            --dur: 3s;
        }

        #inside {
            animation: swing var(--dur) infinite;
        }

        #between {
            animation: fade var(--dur) infinite;
            opacity: 0;
        }

        #outside {
            animation: swing var(--dur) infinite;
            --deg: -360deg;
        }

        @keyframes fade {
            65% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes swing {
            75% {
                transform: rotate(var(--deg));
            }
            100% {
                transform: rotate(var(--deg));
            }
        }
    </style>
    <metadata>
        <cc:Work>
            <cc:license>https://creativecommons.org/licenses/by/4.0/</cc:license>
            <cc:attributionName>Evgeny Blokhin, Alexander Volkov</cc:attributionName>
            <cc:attributionURL>https://tilde.pro</cc:attributionURL>
        </cc:Work>
    </metadata>
</svg>
1 Like

Looks great! I just added the link at Logotypes and graphics · Materials-Consortia/OPTIMADE Wiki · GitHub too. Would you like to add any attribution info inside the svg metadata?

Sure! I’ve added meta inside SVG :+1: