<svg id="hsvg" width="320" height="320" viewBox="0 0 320 320" fill="none" stroke="#008000" stroke-linecap="round"></svg>

<script>
drawHexagon = (total) => {
	let pathstr = '\n\t<defs>', usestr = '';
	Array(total).fill(0).forEach((id,idx) => {
		id = idx + 1;
		let bstr = idx === 0 ? '0s' : `p1.begin+${idx}s`;
		pathstr += `
		<path id="r${id}">
			<animate id="p${id}" attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite" begin="${bstr}"/>
			<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite" begin="${bstr}"/>
		</path>`;
		Array(total).fill(0).forEach((u,k) => {
			u = k + 1;
			let angle = id % 2 === 0 ? 360 / total * k + 30 : 360 / total * k;
			usestr += `\n\t<use xlink:href="#r${id}" transform="rotate(${angle} 160 160)"></use>`;
		});
	});
	pathstr += '\n\t</defs>\n';
	return pathstr + usestr + '\n';
};

hsvg.innerHTML = drawHexagon(6);
</script>