SOURCE

console 命令行工具 X clear

                    
>
console
formulanimator(document.querySelector('g'));
<script src="https://rawcdn.githack.com/strangerintheq/formulanimator/0.0.1/formulanimator.js"></script>
<svg viewbox="-10,-10,20,20" height=100vh width=100vw>
  <g fill="white">
    <circle r="2" data-fill="`hsl(${(50*t)%360},55%,55%)`"></circle>
    <circle r="0.2" 
      data-cx="Math.cos(t*2)*9" data-cy="Math.sin(t*2)*4"></circle>
    <circle transform="rotate(45)" r="0.2" 
      data-cx="Math.cos(t*3+2)*9" data-cy="Math.sin(t*3+2)*4"></circle>
    <circle transform="rotate(-45)" r="0.2" 
      data-cx="Math.cos(t*4+4)*9" data-cy="Math.sin(t*4+4)*4"></circle>
    <circle transform="rotate(90)" r="0.2" 
      data-cx="Math.cos(t*5+5)*9" data-cy="Math.sin(t*5+5)*4"></circle>
  </g>  
  
  <g stroke-width="0.03" stroke="white" fill="none">
    <ellipse rx="9" ry="4"></ellipse>  
    <ellipse transform="rotate(45)" rx="9" ry="4"></ellipse> 
    <ellipse transform="rotate(-45)" rx="9" ry="4"></ellipse> 
    <ellipse transform="rotate(90)" rx="9" ry="4"></ellipse> 
  </g>
</svg>

<a target="_blank" href="https://github.com/strangerintheq/formulanimator" class="title">formulanimator.js</a>
body {
    background: black;
    overflow:hidden;
    margin:0;
}

.title {
    left: calc(50vw - 50px);
    top: 0;
    width: 100%;
    color: white;
    display: inline-block;
    position:fixed;
}