dmarov/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vis Network | Custom shape update</title>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
      }
    </style>
  </head>
  <body>
    <div id="mynetwork"></div>

    <script type="text/javascript">
      function ctxRendererSquare({
        ctx,
        id,
        x,
        y,
        state: { selected, hover },
        style,
        label,
      }) {
        return {
          drawNode() {
            ctx.save();
            var r = style.size;
            ctx.fillStyle = "red";
            ctx.fillRect(x - r, y - r, 2 * r, 2 * r);
            ctx.fill();
            ctx.stroke();
            ctx.restore();
          },
          nodeDimensions: { width: 20, height: 20 },
        };
      }

      function ctxRendererCircle({
        ctx,
        id,
        x,
        y,
        state: { selected, hover },
        style,
        label,
      }) {
        return {
          drawNode() {
            ctx.save();
            var r = style.size;
            ctx.arc(x, y, r, 0, 2 * Math.PI);
            ctx.fillStyle = "green";
            ctx.fill();
            ctx.stroke();
            ctx.restore();
          },
          nodeDimensions: { width: 20, height: 20 },
        };
      }

      var nodes = new vis.DataSet([
        { id: 1, shape: "custom", ctxRenderer: ctxRendererSquare },
      ]);

      var edges = new vis.DataSet([]);

      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
      var options = {};
      var network = new vis.Network(container, data, options);

      var iter = 0;

      setInterval(() => {
        nodes.updateOnly({
          id: 1,
          ctxRenderer: iter % 2 ? ctxRendererSquare : ctxRendererCircle,
        });
        iter++;
      }, 1000);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Vis Network \| Custom shape update</title>

	<script
	type="text/javascript"
	src="../../../standalone/umd/vis-network.min.js"
	></script>

	<style type="text/css">
	#mynetwork {
	width: 600px;
	height: 400px;
	border: 1px solid lightgray;
	}
	</style>
	</head>
	<body>
	<div id="mynetwork"></div>

	<script type="text/javascript">
	function ctxRendererSquare({
	ctx,
	id,
	x,
	y,
	state: { selected, hover },
	style,
	label,
	}) {
	return {
	drawNode() {
	ctx.save();
	var r = style.size;
	ctx.fillStyle = "red";
	ctx.fillRect(x - r, y - r, 2 * r, 2 * r);
	ctx.fill();
	ctx.stroke();
	ctx.restore();
	},
	nodeDimensions: { width: 20, height: 20 },
	};
	}

	function ctxRendererCircle({
	ctx,
	id,
	x,
	y,
	state: { selected, hover },
	style,
	label,
	}) {
	return {
	drawNode() {
	ctx.save();
	var r = style.size;
	ctx.arc(x, y, r, 0, 2 * Math.PI);
	ctx.fillStyle = "green";
	ctx.fill();
	ctx.stroke();
	ctx.restore();
	},
	nodeDimensions: { width: 20, height: 20 },
	};
	}

	var nodes = new vis.DataSet([
	{ id: 1, shape: "custom", ctxRenderer: ctxRendererSquare },
	]);

	var edges = new vis.DataSet([]);

	var container = document.getElementById("mynetwork");
	var data = {
	nodes: nodes,
	edges: edges,
	};
	var options = {};
	var network = new vis.Network(container, data, options);

	var iter = 0;

	setInterval(() => {
	nodes.updateOnly({
	id: 1,
	ctxRenderer: iter % 2 ? ctxRendererSquare : ctxRendererCircle,
	});
	iter++;
	}, 1000);
	</script>
	</body>
	</html>