How to use the @cycle/dom.svg function in @cycle/dom

const render = (state) =>
  svg('g', [
    svg('rect', {
      x: state.graph.bounds.minX,
      y: state.graph.bounds.minY,
      width: state.graph.bounds.maxX - state.graph.bounds.minX,
      height: state.graph.bounds.maxY - state.graph.bounds.minY,
      fill: 'none',
      attributes: {
        'data-background': state.mode,
        'data-transient-edge':
          state.transientEdge === null ? void 0 : 'true',
      },
    }),

    state.graph.nodes.map((node, nodeIndex) =>
      renderNode(state, node, nodeIndex)
    ).toArray(),

]),

    svg('g', {
      transform: `translate(50, ${60 + deltaNetworkHeight})`,
    }, [
      svg('rect', {
        attributes: {
          x: 0,
          y: 0,
          width: 100,
          height: 30,
          class: 'fsm-block-clock',
        },
      }),

      svg('text', {
        class: 'fsm-block-label',
        transform: 'translate(50, 15)',
        x: 0,
        y: 0,
        'text-anchor': 'middle',
        'dominant-baseline': 'central',
        fill: 'white',
      }, 'Taktglied'),

      IF(!editable, () =>
        svg('g', {
          class: 'fsm-button-tick',
          'data-fsm-action': 'tick',
        }, [
          svg('rect', {
            attributes: {

}),
  svg('path', {
    class: 'graph-edge-line-background',
    d: bezierString(edge.path),
    stroke: 'none',
    'stroke-width': 100,
    fill: 'none',
    key: 'background-line',
  }),
  svg('polygon', {
    class: 'graph-edge-head',
    points: arrowHeadString(edge.path, 40),
    fill: 'black',
    key: 'head',
  }),
  svg('path', {
    class: 'graph-edge-line',
    d: bezierString(edge.path),
    stroke: 'black',
    'stroke-width': 5,
    fill: 'none',
    key: 'line',
  }),
  pathLabel(edge.path, edge.label, state.nodeRadius * 0.5),
])
;

export default (size) => svg('svg', {
  attributes: {
    preserveAspectRatio: 'xMidYMid meet',
    'aria-hidden': true,
    class: 'svg-icon',
    viewBox: '0 0 128 128',
    width: size,
    height: size,
  },
}, [
  svg('path', {
    class: 'icon-shape',
    d: `M46,89.201L117.692,17.509L127.591,27.409L55.899,
    99.101L55.903,99.104L46.003,109.003L46,109L45.997,
    109.003L36.097,99.104L36.1,99.101L0.627,63.627L10.526,
    53.727L46,89.201Z`,
  }),
]);

IF(selected !== null, () => {
    const dot = dots[selected];
    const zeroDot = dots[dot.baseIndex];
    const angle = dot.angle;
    const zeroAngle = zeroDot.angle;
    const x = Math.sin(angle) * radius;
    const y = -Math.cos(angle) * radius;
    const zeroX = Math.sin(zeroAngle) * (radius - 0.1);
    const zeroY = -Math.cos(zeroAngle) * (radius - 0.1);
    const mid = Math.abs(angle - zeroAngle) >= Math.PI;

    const largeArc = mid && !dot.negative;
    const sweep = !negativeClockwise && dot.negative;

    return svg('path', {
      key: 'arc',
      class: 'selection-arc',
      d: `M ${~~zeroX} ${~~zeroY}
          A ${~~radius - 0.05} ${~~radius - 0.05} 0
          ${largeArc ? 1 : 0} ${sweep ? 0 : 1}
          ${x} ${y}`,
      fill: 'none',
      'stroke-width': 10,
      'marker-end': 'url(#markerArrow)',
    });
  })
;

export function renderGraph(graph: dagre.graphlib.Graph, zaps: Array, id: string): VNode {
  const g = typeof graph['graph'] === 'function' ? graph['graph']() : {};
  const attrs = {
    width: g.width + 2 * DIAGRAM_PADDING_H + 100,
    height: g.height + 2 * DIAGRAM_PADDING_V,
  };
  return svg({ attrs, key: id }, [
    ...graph.edges().map(edge => renderEdge(edge, graph)),
    ...graph.nodes().map(identifier => renderNode(identifier, graph, zaps)),
  ]);
}

export default (size) => svg('svg', {
  attributes: {
    preserveAspectRatio: 'xMidYMid meet',
    'aria-hidden': true,
    class: 'svg-icon',
    viewBox: '0 0 128 128',
    width: size,
    height: size,
  },
}, [
  svg('path', {
    class: 'icon-shape',
    d: `M31.13,58.053C34.27,54.27 37.615,50.648 41.133,
    47.199C46.308,42.126 51.854,37.43 57.72,33.173C63.513,
    28.969 69.618,25.193 75.971,21.894C76.422,21.66 76.874,
    21.428 77.328,21.199L69.194,3.24L127.088,8.393L92.775,
    55.307L83.936,35.789C80.895,37.348 77.917,39.029 75.011,

markerHeight: 4,
        refX: 1,
        refY: 2,
        orient: 'auto',
        class: 'arrow-head',
      }, [
        svg('path', {
          d: 'M0,0 L0,4 L3,2 L0,0',
        }),
      ]),
    ]),

    svg('g', {
      transform: 'translate(50, 50)',
    }, [
      svg('rect', {
        attributes: {
          x: 0,
          y: 0,
          width: 100,
          height: deltaNetworkHeight,
          class: 'fsm-block-delta',
        },
      }),

      svg('text', {
        class: 'fsm-block-label',
        transform: 'translate(50, 15)',
        x: 0,
        y: deltaNetworkHeight - 25,
        'text-anchor': 'middle',
        'dominant-baseline': 'auto',

const renderEdge = (state, edge) =>
  svg('line', {
    x1: edge.fromX * state.scaleX,
    y1: edge.fromY * state.scaleY,
    x2: edge.toX * state.scaleX,
    y2: edge.toY * state.scaleY,
    'stroke-width': '3',
    class: 'tree-edge' + (edge.faded ? ' tree-faded' : ''),
    stroke: 'black',
    style: {
      stroke: attrBool(edge.color),
    },
  })
;

const renderEdge = (state, edge, index, transient = false) => svg('g', {
  class: 'graph-edge' +
  (isEdgeSelected(edge, state) ? ' state-selected' : '') +
  (transient ? ' state-transient' : '') +
  (edge.toIndex !== null ? ' state-valid' : ' state-invalid'),
  attributes: transient ? void 0 : {
    'data-action': edgeAction(state),
    'data-edge': `${edge.fromIndex},${edge.toIndex}`,
  },
  key: `edge-${index}-${edge.fromIndex}-${transient ? '?' : edge.toIndex}`,
},[
  //debugBezier(edge.path),
  svg('polygon', {
    class: 'graph-edge-line-background',
    points: arrowHeadString(edge.path, 40),
    fill: 'none',
    key: 'background-head',