🚀 improve svg stack generation

packages/svg-creator/grid.ts

@@ -46,7 +46,7 @@ export const createGrid = (
     const m = (s - d) / 2;
 
     if (t !== null) {
-      const animationName = "a" + id;
+      const animationName = id;
       // @ts-ignore
       const fill = colorDots[color];
 
@@ -56,7 +56,7 @@ export const createGrid = (
           `${percent(t + 0.0001)}%,100%{fill:${colorEmpty}}` +
           "}",
 
-        `.c.${id}{fill:${fill};animation-name: ${animationName}}`
+        `.c.${id}{fill: ${fill};animation-name: ${animationName}}`
       );
     }
 

packages/svg-creator/index.ts

@@ -97,7 +97,7 @@ export const createSvg = (
   const style = elements
     .map((e) => e.styles)
     .flat()
-    .join("");
+    .join("\n");
 
   const svg = [
     h("svg", {

packages/svg-creator/snake.ts

@@ -67,7 +67,7 @@ export const createSnake = (
 
     ...snakeParts.map((positions, i) => {
       const id = `s${i}`;
-      const animationName = "a" + id;
+      const animationName = id;
 
       return [
         `@keyframes ${animationName} {` +

packages/svg-creator/stack.ts

@@ -18,8 +18,9 @@ export const createStack = (
   const svgElements: string[] = [];
   const styles = [
     `.u{ 
+      transform-origin: 0 0;
+      transform: scale(0,1);
       animation: none linear ${duration}ms infinite;
-      fill:transparent;
     }`,
   ];
 
@@ -28,31 +29,54 @@ export const createStack = (
     .filter((a) => a.t !== null)
     .sort((a, b) => a.t! - b.t!) as any[];
 
+  const blocks: { color: Color; ts: number[] }[] = [];
+  stack.forEach(({ color, t }) => {
+    const latest = blocks[blocks.length - 1];
+    if (latest?.color === color) latest.ts.push(t);
+    else blocks.push({ color, ts: [t] });
+  });
+
   const m = width / stack.length;
   let i = 0;
-  for (const { color, t } of stack) {
-    const x = (i * width) / stack.length;
+  let nx = 0;
+  for (const { color, ts } of blocks) {
     const id = "u" + (i++).toString(36);
-    const animationName = "a" + id;
+    const animationName = id;
+    const x = (nx * m).toFixed(1);
+
     // @ts-ignore
     const fill = colorDots[color];
 
+    nx += ts.length;
+
     svgElements.push(
       h("rect", {
         class: `u ${id}`,
         height: sizeDot,
-        width: (m + 0.6).toFixed(1),
-        x: x.toFixed(1),
+        width: (ts.length * m + 0.6).toFixed(1),
+        x,
         y,
       })
     );
+
     styles.push(
       `@keyframes ${animationName} {` +
-        `${percent(t - 0.0001)}%{fill:transparent}` +
-        `${percent(t + 0.0001)}%,100%{fill:${fill}}` +
+        [
+          ...ts.map((t, i, { length }) => [
+            { scale: i / length, t: t - 0.0001 },
+            { scale: (i + 1) / length, t: t + 0.0001 },
+          ]),
+          [{ scale: 1, t: 1 }],
+        ]
+          .flat()
+          .map(
+            ({ scale, t }) =>
+              `${percent(t)}%{transform:scale(${scale.toFixed(2)},1)}`
+          )
+          .join("\n") +
         "}",
 
-      `.u.${id}{animation-name:${animationName}}`
+      `.u.${id}{fill:${fill};animation-name:${animationName};transform-origin:${x}px 0}`
     );
   }