Got stuck while creating centred version

[azz]

I was trying to convert @orta's centred variant into your data.json format but got stuck.

Here's the code I was using to do the generation:

// In browser devtools, select parent `<g>` tag, then:
const getColor = color => {
  switch (color) {
    case "#56B3B4":
      return 1;
    case "#EA5E5E":
      return 2;
    case "#FBBF47":
      return 3;
    case "#C693C6":
      return 4;
    default:
      return 0;
  }
};

dashes = JSON.stringify(
  Array.from($0.children).map(node => ({
    length: node.width.baseVal.value,
    start: node.x.baseVal.value,
    line: node.y.baseVal.value,
    color: getColor(node.getAttribute("fill"))
  }))
);

// In node.js
dashes = JSON.parse(`<PASTE>`);
console.log(
  JSON.stringify(
    _.values(_.groupBy(dashes, dash => dash.line)).map(x => ({
      initialOffset: 0,
      dashes: x.map(dash => _.omit(dash, "line"))
    })),
    0,
    2
  )
);

[orta]

The initial offset of 0 is probably the cause, trying to reproduce now - @azz do you have the JSON around? I'm happy to edit it manually

If you compare the the previous one the offset is used to move bars left or right from a center point

[orta]

Another possible option is that it's not set to the max width of 685

[azz]

Interim JSON

```json [{"length":20,"start":410,"line":60,"color":1},{"length":70,"start":260,"line":220,"color":2},{"length":40,"start":380,"line":140,"color":4},{"length":50,"start":320,"line":140,"color":2},{"length":50,"start":260,"line":140,"color":1},{"length":70,"start":260,"line":180,"color":4},{"length":50,"start":260,"line":100,"color":4},{"length":110,"start":310,"line":40,"color":3},{"length":40,"start":260,"line":40,"color":2},{"length":30,"start":300,"line":200,"color":3},{"length":30,"start":260,"line":200,"color":1},{"length":90,"start":340,"line":120,"color":1},{"length":40,"start":290,"line":120,"color":3},{"length":20,"start":260,"line":120,"color":2},{"length":50,"start":350,"line":60,"color":4},{"length":80,"start":260,"line":60,"color":1},{"length":100,"start":290,"line":160,"color":3},{"length":20,"start":260,"line":160,"color":4},{"length":60,"start":380,"line":80,"color":2},{"length":60,"start":380,"line":100,"color":3},{"length":50,"start":260,"line":80,"color":3},{"length":130,"start":260,"line":20,"color":1},{"length":70,"start":400,"line":20,"color":0},{"length":70,"start":100,"line":20,"color":0},{"length":70,"start":180,"line":20,"color":0},{"length":145,"start":195,"line":0,"color":0},{"length":50,"start":350,"line":0,"color":0},{"length":50,"start":105,"line":0,"color":0},{"length":50,"start":160,"line":220,"color":0},{"length":70,"start":180,"line":60,"color":0},{"length":50,"start":559,"line":0,"color":0},{"length":50,"start":41,"line":20,"color":0},{"length":139,"start":410,"line":0,"color":0},{"length":124,"start":515,"line":20,"color":0},{"length":110,"start":175,"line":240,"color":0},{"length":70,"start":95,"line":240,"color":0},{"length":70,"start":400,"line":160,"color":0},{"length":90,"start":480,"line":160,"color":0},{"length":90,"start":100,"line":140,"color":0},{"length":90,"start":120,"line":120,"color":0},{"length":90,"start":20,"line":120,"color":0},{"length":35,"start":580,"line":160,"color":0},{"length":70,"start":430,"line":140,"color":0},{"length":70,"start":590,"line":120,"color":0},{"length":60,"start":430,"line":40,"color":0},{"length":60,"start":140,"line":40,"color":0},{"length":60,"start":70,"line":40,"color":0},{"length":60,"start":160,"line":80,"color":0},{"length":115,"start":500,"line":40,"color":0},{"length":115,"start":410,"line":200,"color":0},{"length":145,"start":105,"line":200,"color":0},{"length":115,"start":135,"line":160,"color":0},{"length":40,"start":210,"line":40,"color":0},{"length":40,"start":25,"line":60,"color":0},{"length":40,"start":110,"line":80,"color":0},{"length":20,"start":230,"line":80,"color":0},{"length":110,"start":440,"line":120,"color":0},{"length":110,"start":140,"line":100,"color":0},{"length":205,"start":480,"line":80,"color":0},{"length":90,"start":440,"line":60,"color":0},{"length":90,"start":540,"line":60,"color":0},{"length":90,"start":10,"line":80,"color":0},{"length":100,"start":70,"line":60,"color":0},{"length":30,"start":478,"line":20,"color":0},{"length":40,"start":480,"line":220,"color":0},{"length":50,"start":75,"line":160,"color":0},{"length":30,"start":220,"line":220,"color":0},{"length":30,"start":220,"line":120,"color":0},{"length":20,"start":560,"line":120,"color":0},{"length":20,"start":450,"line":80,"color":0},{"length":20,"start":165,"line":0,"color":0},{"length":20,"start":160,"line":180,"color":0},{"length":90,"start":60,"line":220,"color":0},{"length":145,"start":450,"line":100,"color":0},{"length":90,"start":340,"line":180,"color":0},{"length":155,"start":440,"line":180,"color":0},{"length":60,"start":340,"line":200,"color":0},{"length":60,"start":395,"line":240,"color":0},{"length":60,"start":190,"line":180,"color":0},{"length":85,"start":65,"line":180,"color":0},{"length":60,"start":30,"line":140,"color":0},{"length":130,"start":510,"line":140,"color":0},{"length":130,"start":0,"line":100,"color":0},{"length":130,"start":340,"line":220,"color":0},{"length":90,"start":295,"line":240,"color":0},{"length":50,"start":320,"line":80,"color":0},{"length":50,"start":320,"line":100,"color":0},{"length":50,"start":200,"line":140,"color":0}] ```

Output JSON

```json { "initialOffset": 0, "dashes": [ { "length": 145, "start": 195, "color": 0 }, { "length": 50, "start": 350, "color": 0 }, { "length": 50, "start": 105, "color": 0 }, { "length": 50, "start": 559, "color": 0 }, { "length": 139, "start": 410, "color": 0 }, { "length": 20, "start": 165, "color": 0 } ] }, { "initialOffset": 0, "dashes": [ { "length": 130, "start": 260, "color": 1 }, { "length": 70, "start": 400, "color": 0 }, { "length": 70, "start": 100, "color": 0 }, { "length": 70, "start": 180, "color": 0 }, { "length": 50, "start": 41, "color": 0 }, { "length": 124, "start": 515, "color": 0 }, { "length": 30, "start": 478, "color": 0 } ] }, { "initialOffset": 0, "dashes": [ { "length": 110, "start": 310, "color": 3 }, { "length": 40, "start": 260, "color": 2 }, { "length": 60, "start": 430, "color": 0 }, { "length": 60, "start": 140, "color": 0 }, { "length": 60, "start": 70, "color": 0 }, { "length": 115, "start": 500, "color": 0 }, { "length": 40, "start": 210, "color": 0 } ] }, { "initialOffset": 0, "dashes": [ { "length": 20, "start": 410, "color": 1 }, { "length": 50, "start": 350, "color": 4 }, { "length": 80, "start": 260, "color": 1 }, { "length": 70, "start": 180, "color": 0 }, { "length": 40, "start": 25, "color": 0 }, { "length": 90, "start": 440, "color": 0 }, { "length": 90, "start": 540, "color": 0 }, { "length": 100, "start": 70, "color": 0 } ] }, { "initialOffset": 0, "dashes": [ { "length": 60, "start": 380, "color": 2 }, { "length": 50, "start": 260, "color": 3 }, { "length": 60, "start": 160, "color": 0 }, { "length": 40, "start": 110, "color": 0 }, { "length": 20, "start": 230, "color": 0 }, { "length": 205, "start": 480, "color": 0 }, { "length": 90, "start": 10, "color": 0 }, { "length": 20, "start": 450, "color": 0 }, { "length": 50, "start": 320, "color": 0 } ] }, { "initialOffset": 0, "dashes": [ { "length": 50, "start": 260, "color": 4 }, { "length": 60, "start": 380, "color": 3 }, { "length": 110, "start": 140, "color": 0 }, { "length": 145, "start": 450, "color": 0 }, { "length": 130, "start": 0, "color": 0 }, { "length": 50, "start": 320, "color": 0 } ] }, { "initialOffset": 0, "dashes": [ { "length": 90, "start": 340, "color": 1 }, { "length": 40, "start": 290, "color": 3 }, { "length": 20, "start": 260, "color": 2 }, { "length": 90, "start": 120, "color": 0 }, { "length": 90, "start": 20, "color": 0 }, { "length": 70, "start": 590, "color": 0 }, { "length": 110, "start": 440, "color": 0 }, { "length": 30, "start": 220, "color": 0 }, { "length": 20, "start": 560, "color": 0 } ] }, { "initialOffset": 0, "dashes": [ { "length": 40, "start": 380, "color": 4 }, { "length": 50, "start": 320, "color": 2 }, { "length": 50, "start": 260, "color": 1 }, { "length": 90, "start": 100, "color": 0 }, { "length": 70, "start": 430, "color": 0 }, { "length": 60, "start": 30, "color": 0 }, { "length": 130, "start": 510, "color": 0 }, { "length": 50, "start": 200, "color": 0 } ] }, { "initialOffset": 0, "dashes": [ { "length": 100, "start": 290, "color": 3 }, { "length": 20, "start": 260, "color": 4 }, { "length": 70, "start": 400, "color": 0 }, { "length": 90, "start": 480, "color": 0 }, { "length": 35, "start": 580, "color": 0 }, { "length": 115, "start": 135, "color": 0 }, { "length": 50, "start": 75, "color": 0 } ] }, { "initialOffset": 0, "dashes": [ { "length": 70, "start": 260, "color": 4 }, { "length": 20, "start": 160, "color": 0 }, { "length": 90, "start": 340, "color": 0 }, { "length": 155, "start": 440, "color": 0 }, { "length": 60, "start": 190, "color": 0 }, { "length": 85, "start": 65, "color": 0 } ] }, { "initialOffset": 0, "dashes": [ { "length": 30, "start": 300, "color": 3 }, { "length": 30, "start": 260, "color": 1 }, { "length": 115, "start": 410, "color": 0 }, { "length": 145, "start": 105, "color": 0 }, { "length": 60, "start": 340, "color": 0 } ] }, { "initialOffset": 0, "dashes": [ { "length": 70, "start": 260, "color": 2 }, { "length": 50, "start": 160, "color": 0 }, { "length": 40, "start": 480, "color": 0 }, { "length": 30, "start": 220, "color": 0 }, { "length": 90, "start": 60, "color": 0 }, { "length": 130, "start": 340, "color": 0 } ] }, { "initialOffset": 0, "dashes": [ { "length": 110, "start": 175, "color": 0 }, { "length": 70, "start": 95, "color": 0 }, { "length": 60, "start": 395, "color": 0 }, { "length": 90, "start": 295, "color": 0 } ] } ] ```

[orta]

Dang, I threw some time at it, and couldn't figure it out either :D

Though, I couldn't even get it to the state where a P showed. I put up a PR for making it static ATM to unblock - @sandhose any chance you can take a look at some point? <3

[sandhose]

Will try to do something today, sorry for the delay :c

[sandhose]

(btw for some reason I didn't have the mail notifications for this repo, so I just saw this issue right now. Sorry about that)

[sandhose]

const _ = require("lodash");

const dashes = JSON.parse(`<PASTE>`);

const offsets = [130, -100, 120, 40, -150, 100, 190, -30, 50, 150, -100, -50, -150];
const rolls = [1, -1, 1, 1, -1, 1, 2, -1, 1, -2, 1, 2, -1];

const lines = _.values(_.groupBy(dashes, dash => dash.line)).map((x, i) => ({
  initialOffset: offsets[i],
  roll: rolls[i],
  dashes: x.map(({ length, start, color }) => ({
    length: length - 10,
    start: start + 5,
    color
  }))
}));

const data = {
  total: Math.max(...dashes.map(({ length, start }) => length + start)),
  lines
};

console.log(JSON.stringify(data, 0, 2));

which yields this data.json: https://gist.github.com/sandhose/70726bca456acb47c56684b13a571b35

The -10 on the length and +5 on the start properties are there because of the rounded line caps. The dashes start and end right in the center of the rounded line cap, and not exactly at the edge. Because the lines are 10px wide, the start and end points have to be offset by 5px.

The lines in @azz screenshots are overlapping because of the total property, which should be equal to the total SVG width.

Also, @orta, some dashes aren't quite aligned ; in the original logo, all the dashes have coordinates which are multiples of ten. In your version, some are a bit off, which makes it a bit weird.

Will try to fix those coordinates :)

[orta]

Ah! Sorry @sandhose

[orta]

Revised SVG code, if that's easier to work with instead - think I got them all

<?xml version="1.0" encoding="UTF-8"?>
<svg width="685px" height="250px" viewBox="0 0 685 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <title>Group 15</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="prettier-homepage">
            <g id="Group-15">
                <rect id="Rectangle-Copy-71" fill="#56B3B4" x="410" y="60" width="20" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-72" fill="#EA5E5E" x="260" y="220" width="70" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-73" fill="#C693C6" x="380" y="140" width="40" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-74" fill="#EA5E5E" x="320" y="140" width="50" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-75" fill="#56B3B4" x="260" y="140" width="50" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-76" fill="#C693C6" x="260" y="180" width="70" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-77" fill="#C693C6" x="260" y="100" width="50" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-78" fill="#FBBF47" x="310" y="40" width="110" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-79" fill="#EA5E5E" x="260" y="40" width="40" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-80" fill="#FBBF47" x="300" y="200" width="30" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-81" fill="#56B3B4" x="260" y="200" width="30" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-52" fill="#56B3B4" x="340" y="120" width="90" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-82" fill="#FBBF47" x="290" y="120" width="40" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-83" fill="#EA5E5E" x="260" y="120" width="20" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-84" fill="#C693C6" x="350" y="60" width="50" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-85" fill="#56B3B4" x="260" y="60" width="80" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-86" fill="#FBBF47" x="290" y="160" width="100" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-87" fill="#C693C6" x="260" y="160" width="20" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-88" fill="#EA5E5E" x="380" y="80" width="60" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-89" fill="#FBBF47" x="380" y="100" width="60" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-90" fill="#FBBF47" x="260" y="80" width="50" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-91" fill="#56B3B4" x="260" y="20" width="130" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-92" fill="#C6CBD0" opacity="0.5" x="400" y="20" width="70" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-141" fill="#C6CBD0" opacity="0.5" x="100" y="20" width="70" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-109" fill="#C6CBD0" opacity="0.5" x="180" y="20" width="70" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-106" fill="#C6CBD0" opacity="0.5" x="195" y="0" width="145" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-107" fill="#C6CBD0" opacity="0.5" x="350" y="0" width="50" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-140" fill="#C6CBD0" opacity="0.5" x="105" y="0" width="50" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-136" fill="#C6CBD0" opacity="0.5" x="160" y="220" width="50" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-122" fill="#C6CBD0" opacity="0.5" x="180" y="60" width="70" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-110" fill="#C6CBD0" opacity="0.5" x="559" y="0" width="50" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-155" fill="#C6CBD0" opacity="0.5" x="41" y="20" width="50" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-108" fill="#C6CBD0" opacity="0.5" x="410" y="0" width="139" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-113" fill="#C6CBD0" opacity="0.5" x="520" y="20" width="124" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-144" fill="#C6CBD0" opacity="0.5" x="175" y="240" width="110" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-147" fill="#C6CBD0" opacity="0.5" x="95" y="240" width="70" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-93" fill="#C6CBD0" opacity="0.5" x="400" y="160" width="70" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-118" fill="#C6CBD0" opacity="0.5" x="480" y="160" width="90" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-129" fill="#C6CBD0" opacity="0.5" x="100" y="140" width="90" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-127" fill="#C6CBD0" opacity="0.5" x="120" y="120" width="90" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-151" fill="#C6CBD0" opacity="0.5" x="20" y="120" width="90" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-119" fill="#C6CBD0" opacity="0.5" x="580" y="160" width="35" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-94" fill="#C6CBD0" opacity="0.5" x="430" y="140" width="70" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-105" fill="#C6CBD0" opacity="0.5" x="590" y="120" width="70" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-95" fill="#C6CBD0" opacity="0.5" x="430" y="40" width="60" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-138" fill="#C6CBD0" opacity="0.5" x="140" y="40" width="60" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-150" fill="#C6CBD0" opacity="0.5" x="70" y="40" width="60" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-124" fill="#C6CBD0" opacity="0.5" x="160" y="80" width="60" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-116" fill="#C6CBD0" opacity="0.5" x="500" y="40" width="115" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-120" fill="#C6CBD0" opacity="0.5" x="410" y="200" width="115" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-134" fill="#C6CBD0" opacity="0.5" x="105" y="200" width="145" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-130" fill="#C6CBD0" opacity="0.5" x="135" y="160" width="115" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-111" fill="#C6CBD0" opacity="0.5" x="210" y="40" width="40" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-157" fill="#C6CBD0" opacity="0.5" x="20" y="60" width="40" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-149" fill="#C6CBD0" opacity="0.5" x="110" y="80" width="40" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-123" fill="#C6CBD0" opacity="0.5" x="230" y="80" width="20" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-96" fill="#C6CBD0" opacity="0.5" x="440" y="120" width="110" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-125" fill="#C6CBD0" opacity="0.5" x="140" y="100" width="110" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-115" fill="#C6CBD0" opacity="0.5" x="480" y="80" width="205" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-97" fill="#C6CBD0" opacity="0.5" x="440" y="60" width="90" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-143" fill="#C6CBD0" opacity="0.5" x="540" y="60" width="90" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-152" fill="#C6CBD0" opacity="0.5" x="10" y="80" width="90" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-142" fill="#C6CBD0" opacity="0.5" x="70" y="60" width="100" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-112" fill="#C6CBD0" opacity="0.5" x="480" y="20" width="30" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-121" fill="#C6CBD0" opacity="0.5" x="480" y="220" width="40" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-153" fill="#C6CBD0" opacity="0.5" x="75" y="160" width="50" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-135" fill="#C6CBD0" opacity="0.5" x="220" y="220" width="30" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-126" fill="#C6CBD0" opacity="0.5" x="220" y="120" width="30" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-156" fill="#C6CBD0" opacity="0.5" x="560" y="120" width="20" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-98" fill="#C6CBD0" opacity="0.5" x="450" y="80" width="20" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-139" fill="#C6CBD0" opacity="0.5" x="165" y="0" width="20" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-132" fill="#C6CBD0" opacity="0.5" x="160" y="180" width="20" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-137" fill="#C6CBD0" opacity="0.5" x="60" y="220" width="90" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-99" fill="#C6CBD0" opacity="0.5" x="450" y="100" width="145" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-100" fill="#C6CBD0" opacity="0.5" x="340" y="180" width="90" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-114" fill="#C6CBD0" opacity="0.5" x="440" y="180" width="155" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-101" fill="#C6CBD0" opacity="0.5" x="340" y="200" width="60" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-146" fill="#C6CBD0" opacity="0.5" x="395" y="240" width="60" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-131" fill="#C6CBD0" opacity="0.5" x="190" y="180" width="60" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-133" fill="#C6CBD0" opacity="0.5" x="65" y="180" width="85" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-154" fill="#C6CBD0" opacity="0.5" x="30" y="140" width="60" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-117" fill="#C6CBD0" opacity="0.5" x="510" y="140" width="130" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-148" fill="#C6CBD0" opacity="0.5" x="0" y="100" width="130" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-102" fill="#C6CBD0" opacity="0.5" x="340" y="220" width="130" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-145" fill="#C6CBD0" opacity="0.5" x="295" y="240" width="90" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-103" fill="#C6CBD0" opacity="0.5" x="320" y="80" width="50" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-104" fill="#C6CBD0" opacity="0.5" x="320" y="100" width="50" height="10" rx="5"></rect>
                <rect id="Rectangle-Copy-128" fill="#C6CBD0" opacity="0.5" x="200" y="140" width="50" height="10" rx="5"></rect>
            </g>
        </g>
    </g>
</svg>

[sandhose]

Looking good!

https://sandhose.github.io/prettier-animated-logo/

With @azz script, which I tweaked a bit to run the browser part with puppeteer.

Now, the two logos are extracted from the sketch file (using sketchtool) to make it easier to update (needs macOS, so I pushed the SVG file in the repo). The JSON files are now created from the SVG directly.

[orta]

THESE LOOK AWESOMMMMMMEE

[azz]

:tada:

Do we have a way to generate the non-rolling version, too? I like the interactive version for the main header. We could use the rolling icon version in the footer?

[sandhose]

THESE LOOK AWESOMMMMMMEE

🙌

Do we have a way to generate the non-rolling version, too?

Right now, by commenting a bunch of lines, yes. But I want to find a proper way to activate the roll animation on click/drag. I don't have time to do that right now, but probably will have tomorrow or Wednesday.