aosc_logo_tweaking_draft.svg

<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect width="100%" height="100%" fill="rgba(0, 0, 0, 0.0)" />
    <defs>
        <clipPath id="half">
            <rect x="0" y="0" width="500" height="1000" />
        </clipPath>
        <clipPath id="althalf">
            <rect x="500" y="0" width="500" height="1000" />
        </clipPath>
        <linearGradient id="grad-red" gradientTransform="rotate(0)">
            <stop offset="0%" stop-color="rgba(193, 2, 2, 1)" />
            <stop offset="44%" stop-color="rgba(193, 2, 2, 1)" />
            <stop offset="66%" stop-color="rgba(193, 2, 2, 0.67)" />
            <stop offset="100%" stop-color="rgba(193, 2, 2, 0)" />
        </linearGradient>
        <linearGradient id="grad-yellow" gradientTransform="rotate(0)">
            <stop offset="0%" stop-color="rgba(237, 184, 1, 1)" />
            <stop offset="44%" stop-color="rgba(237, 184, 1, 1)" />
            <stop offset="66%" stop-color="rgba(237, 184, 1, 0.67)" />
            <stop offset="100%" stop-color="rgba(237, 184, 1, 0)" />
        </linearGradient>
        <linearGradient id="grad-blue" gradientTransform="rotate(0)">
            <stop offset="0%" stop-color="rgba(0, 77, 153, 1)" />
            <stop offset="44%" stop-color="rgba(0, 77, 153, 1)" />
            <stop offset="66%" stop-color="rgba(0, 77, 153, 0.67)" />
            <stop offset="100%" stop-color="rgba(0, 77, 153, 0)" />
        </linearGradient>
        <linearGradient id="grad-white" gradientTransform="rotate(0)">
            <stop offset="0%" stop-color="rgba(255, 255, 255, 1)" />
            <stop offset="44%" stop-color="rgba(255, 255, 255, 1)" />
            <stop offset="66%" stop-color="rgba(255, 255, 255, 0.67)" />
            <stop offset="100%" stop-color="rgba(255, 255, 255, 0)" />
        </linearGradient>
    </defs>
    <!-- Black background -->
    <circle cx="500" cy="500" r="500" fill="rgba(0, 0, 0, 1)" />

    <g transform="rotate(-10 500 500)">
        <!-- Big circles: Red/Yellow -->
        <circle cx="500" cy="500" r="300" stroke="url(#grad-red)" stroke-width="200" fill="none"
            clip-path="url(#half)" transform="rotate(0 500 500)" />
        <circle cx="500" cy="500" r="300" stroke="url(#grad-yellow)" stroke-width="200" fill="none"
            clip-path="url(#half)" transform="rotate(180 500 500)" />

        <!-- Big black gaps -->
        <circle cx="500" cy="200" r="130" fill="black" transform="rotate(0 500 500)"
            clip-path="url(#althalf)" />
        <circle cx="500" cy="200" r="130" fill="black" transform="rotate(180 500 500)"
            clip-path="url(#althalf)" />

        <!-- Ribbon heads -->
        <circle cx="500" cy="200" r="100" fill="rgba(193, 2, 2, 1)" transform="rotate(0 500 500)" />
        <circle cx="500" cy="200" r="100" fill="rgba(237, 184, 1, 1)"
            transform="rotate(180 500 500)" />

        <!-- Small circles: Blue/White -->
        <g id="inner-ring" transform="rotate(25 500 500) scale(1, -1) translate(0, -1000)">
            <!-- Ribbon bodies -->
            <circle cx="500" cy="500" r="120" stroke="url(#grad-blue)" stroke-width="100"
                fill="none"
                clip-path="url(#half)" transform="rotate(0 500 500)" />
            <circle cx="500" cy="500" r="120" stroke="url(#grad-white)" stroke-width="100"
                fill="none"
                clip-path="url(#half)" transform="rotate(180 500 500)" />
            <!-- Small black gaps -->
            <circle cx="500" cy="380" r="78" fill="black"
                transform="rotate(0 500 500)" clip-path="url(#althalf)" />
            <circle cx="500" cy="380" r="78" fill="black"
                transform="rotate(180 500 500)" clip-path="url(#althalf)" />
            <!-- Ribbon heads -->
            <circle cx="500" cy="380" r="50" fill="rgba(0, 77, 153, 1)"
                transform="rotate(0 500 500)" />
            <circle cx="500" cy="380" r="50" fill="rgba(255, 255, 255, 1)"
                transform="rotate(180 500 500)" />
        </g>
    </g>
</svg>