<!--   
  css-doodle: 
  http://yuanchuan.name/css-doodle/  
-->

<css-doodle>
  :doodle { 
    @grid: 1x10 / 61.8vmin; 
  }

  @place-cell: center; 
  @size: calc(@index() * 10%);
  
  border-radius: 50%;
  border-style: dashed;
  border-width: calc(@index() * 1vmin); 
  border-color: hsla(
    calc(20 * @index()), 70%, 68%, 
    calc(3 / @index() * .8)
  );
  
  --d: @rand(20s, 40s); 
  --rf: @rand(360deg);
  --rt: calc(var(--rf) + @pick(1turn, -1turn));

  animation: spin var(--d) linear infinite;
  @keyframes spin {
    from { transform: rotate(var(--rf)) }
    to   { transform: rotate(var(--rt)) }
  }
</css-doodle> 
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #0a0c27;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/52982/css-doodle.v0.2.0.min.js