Add Fediverse logo

[fgaz]

The icon I want is:

• Name: Fediverse
• URL: it isn't a single platform so https://en.wikipedia.org/wiki/Fediverse
• Link to icon: the most used one is https://commons.wikimedia.org/wiki/File:Fediverse_logo_proposal.svg or https://commons.wikimedia.org/wiki/File:Fediverse_logo_proposal_(mono_version).svg

• Vector version of the logo: see above
• Official style guide or brand guide: n/a

[wweverma1]

@edent can I start working on this?

[edent]

Go for it! Remember to follow the guide in the contributing documentation.

[cormullion]

I had a go at making this but I couldn't get it smaller than 1734 bytes. I'll leave the source here in case anyone knows a few more tricks to get the size down without losing detail, but I've run out of time and inspiration:

<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Fediverse" role="img"
viewBox="0 0 512 512"><rect
width="512" height="512"
rx="15%"
fill="#fff"/>
<circle fill="red" cx="104.8" cy="179" r="36.8" /> 
<circle fill="#00a3ff" cx="333.8" cy="407.1" r="36.8" /> 
<circle fill="#9500ff" cx="137" cy="376" r="36.8" /> 
<circle fill="#ffca00" cx="282.4" cy="88.5" r="36.8" /> 
<circle fill="#64ff00" cx="423.2" cy="229.4" r="36.8" /> 
<path fill="#5b36e9" d="M296.2 388.4c-4 7.8-5.3 16.6-4 25.2l-119.4-19c4-7.7 5.4-16.5 4-25.2Zm0 0" />
<path fill="#d0188f" d="M142.6 335.2c-8.7-1.4-17.5 0-25.2 4l-19-119.5c8.6 1.3 17.4 0 25.2-4Zm0 0"/>
<path fill="#f47601" d="M145.6 172.6a41.2 41.2 0 0 0-11.6-22.8L241.8 95a41.2 41.2 0 0 0 11.6 22.6Zm0 0"/>
<path fill="#ebe305" d="M301.3 125.2c7.7-4 14-10.3 17.9-18l85.6 85.6c-7.7 4-14 10.2-18 18Zm0 0" />
<path fill="#30b873" d="M394.4 258.6c6.1 6.2 14 10.2 22.6 11.6L362.2 378a41.2 41.2 0 0 0-22.8-11.6Zm0 0" />
<path fill="#57c115" d="M339.4 366.4c-8.5-1.3-17.3 0-25 4L291 224.2l26.4 4.1 22 138.1M286.1 192l26.5 4.2-11.2-71c-7.8 4-16.6 5.4-25.2 4l10 62.9" />
<path fill="#5496be" d="M176.8 369.4a41.2 41.2 0 0 0-11.6-22.6l132-67.2 4.2 26.4-124.6 63.4m149.3-104.6 4.1 26.4 64.2-32.6a41.2 41.2 0 0 1-11.6-22.7l-56.7 28.9" 
/>
<path fill="#a730b8" d="M123.6 215.8c7.8-4 14-10.4 18-18.2l104.7 104.8-23.8 12-98.9-98.6m145.6 109.6-23.7 12.2 50.8 50.9c4-7.8 10.3-14.1 18.1-18.1l-45-45" 
/>
<path fill="#ce3d1a" d="M253.4 117.6a41.2 41.2 0 0 0 22.7 11.6l-67.2 132-19-19 63.5-124.6m-59.2 172.5-19-19-32.6 64.1a41.2 41.2 0 0 1 22.6 11.6l28.9-56.8" 
/>
<path fill="#dbb210" d="M386.8 210.7c-4 7.8-5.4 16.6-4 25.2l-146.2-23.2 12.1-23.8 138.1 21.8m-182.3-3 12.1-23.9-71-11.2c1.3 8.5 0 17.3-4 25l62.9 10" 
/>
</svg>

[edent]

Using https://jakearchibald.github.io/svgomg/ gets it down to 1.3KB.

<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Fediverse"
viewBox="0 0 512 512"><rect
width="512" height="512"
fill="#fff"
rx="15%"/><circle cx="104.8" cy="179" r="36.8" fill="red"/><circle cx="333.8" cy="407.1" r="36.8" fill="#00a3ff"/><circle cx="137" cy="376" r="36.8" fill="#9500ff"/><circle cx="282.4" cy="88.5" r="36.8" fill="#ffca00"/><circle cx="423.2" cy="229.4" r="36.8" fill="#64ff00"/><path fill="#5b36e9" d="M296 388c-4 8-5 17-4 26l-119-19c4-8 5-17 4-26Zm0 0"/><path fill="#d0188f" d="M143 335c-9-1-18 0-26 4L98 220c9 1 18 0 26-4Zm0 0"/><path fill="#f47601" d="M146 173a41 41 0 0 0-12-23l108-55a41 41 0 0 0 11 23Zm0 0"/><path fill="#ebe305" d="M301 125c8-4 14-10 18-18l86 86c-8 4-14 10-18 18Zm0 0"/><path fill="#30b873" d="M394 259c6 6 14 10 23 11l-55 108a41 41 0 0 0-23-12Zm0 0"/><path fill="#57c115" d="M339 366c-8-1-17 0-25 4l-23-146 26 4 22 138m-53-174 27 4-12-71c-7 4-16 6-25 4l10 63"/><path fill="#5496be" d="M177 369a41 41 0 0 0-12-22l132-67 4 26-124 63m149-104 4 26 64-32a41 41 0 0 1-11-23l-57 29"/><path fill="#a730b8" d="M124 216c7-4 14-11 18-18l104 104-23 12-99-98m145 109-24 13 51 51c4-8 11-15 18-19l-45-45"/><path fill="#ce3d1a" d="M253 118a41 41 0 0 0 23 11l-67 132-19-19 63-124m-59 172-19-19-32 64a41 41 0 0 1 22 12l29-57"/><path fill="#dbb210" d="M387 211c-4 7-6 16-4 25l-146-23 12-24 138 22m-182-3 12-24-71-11c1 8 0 17-4 25l62 10"/></svg>

[cormullion]

Good work! - I see little room for any more surgery though... 😄

[Eiim]

The circles can have a white stroke added (roughly r=38.9 and stroke-width=4.2 in the style). Then you can turn the outside lines into just two-point lines that go center-to-center and have a thick stroke, and the interior lines can at least be brought in further to the centers of the circles and then the ends can be straight instead of curved. Getting the overlaps in the center probably won't work as cleanly, so it might be best to just leave those nodes alone, but improving the outside ring should help a lot. I might take a crack at it some time but I don't have a lot of spare time the next week or so here.

[Eiim]

Looking at the lengths of things in the code more closely, it might not actually improve it, or at least not as much as I first thought. Probably still worth a shot to see if it helps though.

[Eiim]

At the very least, there were a few excess commands at the end of some of the path data, which saves 20 or so bytes:

<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Fediverse"
viewBox="0 0 512 512"><rect
width="512" height="512"
fill="#fff"
rx="15%"/><circle cx="104.8" cy="179" r="36.8" fill="red"/><circle cx="333.8" cy="407.1" r="36.8" fill="#00a3ff"/><circle cx="137" cy="376" r="36.8" fill="#9500ff"/><circle cx="282.4" cy="88.5" r="36.8" fill="#ffca00"/><circle cx="423.2" cy="229.4" r="36.8" fill="#64ff00"/><path fill="#5b36e9" d="M296 388c-4 8-5 17-4 26l-119-19c4-8 5-17 4-26Z"/><path fill="#d0188f" d="M143 335c-9-1-18 0-26 4L98 220c9 1 18 0 26-4Z"/><path fill="#f47601" d="M146 173a41 41 0 0 0-12-23l108-55a41 41 0 0 0 11 23Z"/><path fill="#ebe305" d="M301 125c8-4 14-10 18-18l86 86c-8 4-14 10-18 18Z"/><path fill="#30b873" d="M394 259c6 6 14 10 23 11l-55 108a41 41 0 0 0-23-12Z"/><path fill="#57c115" d="M339 366c-8-1-17 0-25 4l-23-146 26 4 22 138m-53-174 27 4-12-71c-7 4-16 6-25 4Z"/><path fill="#5496be" d="M177 369a41 41 0 0 0-12-22l132-67 4 26-124 63m149-104 4 26 64-32a41 41 0 0 1-11-23Z"/><path fill="#a730b8" d="M124 216c7-4 14-11 18-18l104 104-23 12-99-98m145 109-24 13 51 51c4-8 11-15 18-19Z"/><path fill="#ce3d1a" d="M253 118a41 41 0 0 0 23 11l-67 132-19-19 63-124m-59 172-19-19-32 64a41 41 0 0 1 22 12Z"/><path fill="#dbb210" d="M387 211c-4 7-6 16-4 25l-146-23 12-24 138 22m-182-3 12-24-71-11c1 8 0 17-4 25Z"/></svg>

Technically, all the Zs are unnecessary as well since you're not using stroke currently, which could be 10 more bytes.

[cormullion]

improving the outside ring should help a lot

Yes, I forgot I didn't have to make the whole thing transparent (habits...), so I used black edges to hide the ends of thicker lines. But sadly it didn't get me down below 1K - this attempt is about 1400 bytes. stroke and stroke-width are too long! 😄

I'm leaving this for now, but happy if someone else has superior surgical skills! :)

<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Fediverse"
viewBox="0 0 512 512">
<rect
width="512" height="512"
fill="#000"
rx="15%"/>
<path stroke="#5b36e9" stroke-width="24" d="M104.8 179 137 376"/><path stroke="#d0188f" stroke-width="24" d="m137 376 201 31.1"/><path stroke="#f47601" stroke-width="24" d="m338 407.1 85.2-177.7"/><path stroke="#ebe305" stroke-width="24" d="M423.2 229.4 282.4 88.5"/><path stroke="#30b873" stroke-width="24" d="M282.4 88.5 104.8 179"/><path fill="#57c115" d="M339 366c-8-1-17 0-25 4l-23-146 26 4 22 138m-53-174 27 4-12-71c-7 4-16 6-25 4"/><path fill="#5496be" d="M177 369a41 41 0 0 0-12-22l132-67 4 26-124 63m149-104 4 26 64-32a41 41 0 0 1-11-23"/><path fill="#a730b8" d="M124 216c7-4 14-11 18-18l104 104-23 12-99-98m145 109-24 13 51 51c4-8 11-15 18-19"/><path fill="#ce3d1a" d="M253 118a41 41 0 0 0 23 11l-67 132-19-19 63-124m-59 172-19-19-32 64a41 41 0 0 1 22 12"/><path fill="#dbb210" d="M387 211c-4 7-6 16-4 25l-146-23 12-24 138 22m-182-3 12-24-71-11c1 8 0 17-4 25"/><circle cx="104.8" cy="179" r="43" fill="red" stroke="#000" stroke-width="6"/><circle cx="333.8" cy="407.1" r="43" fill="#00a3ff" stroke="#000" stroke-width="6"/><circle cx="137" cy="376" r="43" fill="#9500ff" stroke="#000" stroke-width="6"/><circle cx="282.4" cy="88.5" r="43" fill="#ffca00" stroke="#000" stroke-width="6"/><circle cx="423.2" cy="229.4" r="43" fill="#64ff00" stroke="#000" stroke-width="6"/></svg>

[kuubeu]

Hi, path surgeon here! The operation was a success, got it down to 1013B! If someone has some spare time, I think the original logo could be matched more closely by widening the gaps and maybe shrinking the circles. Here's my code:

<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Fediverse"
viewBox="0 0 512 512"><rect
width="512" height="512"
rx="15%"/><g stroke-width="25"><path stroke="#d0188f" d="m104.8 179 32 197"/><path stroke="#5b36e9" d="m137 376 201 31"/><path stroke="#30b873" d="m424 228-86 179"/><path stroke="#ebe305" d="m282 88 141 141"/><path stroke="#f47601" d="m105 179 178-91"/></g><path fill="#57c115" d="M301 125h-26l11 67 27 4m4 32-26-4 23 146h26"/><path fill="#5496be" d="M165 347v28l136-69-4-26m33 12-4-26 67-34v28"/><path fill="#a730b8" d="M142 198l-18 18 99 98 23-12m-1 36 24-13 45 45-18 19"/><path fill="#ce3d1a" d="M253 118h29l-73 143-19-19m4 48-19-19-38 76h28"/><path fill="#dbb210" d="M140 172v26l64 10 12-24m33 5-12 24 152 24v-26"/><g stroke-width="4" stroke="#000"><circle cx="105" cy="179" r="43" fill="red"/><circle cx="334" cy="407" r="43" fill="#0af"/><circle cx="137" cy="376" r="43" fill="#90f"/><circle cx="282.4" cy="88.5" r="43" fill="#fc0"/><circle cx="423" cy="229.4" r="43" fill="#6f0"/></g></svg>

[edent]

That looks amazing!

[gucr]

Here is an alternative with <use> (818B without the line breaks), but this is SVG2 as the xmlns:href declaration is skipped.

<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Fediverse"
viewBox="0 0 512 512"><rect
width="512" height="512"
rx="15%"/>

  <g id="o">
    <path d="M301 235l23 146a38 38 0 0125-4l-22-138m-32-40-9-62a38 38 0 0025-5l11 71" opacity=".8"/>
    <circle id="c" cx="435" cy="239" r="35" />
  </g>
  <path id="b" d="m349 377 0 0a38 38 0 0123 12L427 280a38 38 0 01-22-11"/>

  <g fill="#64FF00">
    <use href="#o"/>
    <use fill="#30B873" href="#b"/>
  </g>

  <g transform="rotate(72 265 265)" fill="#00A3FF">
    <use href="#o"/>
    <use fill="#5B36E9" href="#b"/>
  </g>

  <g transform="rotate(144 265 265)" fill="#9500FF">
    <use href="#o"/>
    <use fill="#D0188F" href="#b"/>
  </g>

  <g transform="rotate(216 265 265)" fill="red">
    <use href="#o"/>
    <use fill="#F47601" href="#b"/>
  </g>

  <g transform="rotate(288 265 265)" fill="#FFCA00">
    <use href="#o"/>
    <use fill="#30b873" href="#b"/>
  </g>
</svg>

Or 877B With the xlink declaration:

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:x="http://www.w3.org/1999/xlink"
aria-label="Fediverse"
viewBox="0 0 512 512"><rect
width="512" height="512"
rx="15%"/><g id="a"><path d="m301 235 23 146a38 38 0 0 1 25-4l-22-138m-32-40-9-62a38 38 0 0 0 25-5l11 71" opacity=".8"/><circle cx="435" cy="239" r="35"/></g><path id="b" d="M349 377a38 38 0 0 1 23 12l55-109a38 38 0 0 1-22-11"/><g fill="#64FF00"><use x:href="#a"/><use x:href="#b" fill="#30B873"/></g><g fill="#00A3FF" transform="rotate(72 265 265)"><use x:href="#a"/><use x:href="#b" fill="#5B36E9"/></g><g fill="#9500FF" transform="rotate(144 265 265)"><use x:href="#a"/><use x:href="#b" fill="#D0188F"/></g><g fill="red" transform="rotate(216 265 265)"><use x:href="#a"/><use x:href="#b" fill="#F47601"/></g><g fill="#FFCA00" transform="rotate(288 265 265)"><use x:href="#a"/><use x:href="#b" fill="#30b873"/></g></svg>

[cormullion]

Nice! You've lost a yellow shape (top right outer).