SVG tracer

dabblet.css

/**
 * SVG tracer
 */

body {
  background: #f06;
  background: linear-gradient(45deg, #f06, yellow);
  min-height: 100%;
}

svg * {
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.linear { animation-timing-function: linear; animation-direction: normal; }
.gentle { animation-timing-function: ease-in-out; }

.faster { animation-duration: 2s; }
.fast   { animation-duration: 4s; }
.slow   { animation-duration: 8s; }
.slower { animation-duration: 16s; }

.turn   { animation-name: turner; }
.trace  { animation-name: tracer; }
.throb  { animation-name: throb;  }

.s1 { stroke-dasharray: 10 2; stroke-dashoffset: 0; }
.s2 { stroke-dasharray: 1 1 3 5 8 13 21 1; stroke-dashoffset: 0; }

@keyframes tracer {
  0%    { stroke-dasharray: 20 0; stroke-dashoffset: 0; }
  100%  { stroke-dasharray: 100 10; stroke-dashoffset: 0; }
}

@keyframes turner {
  from { transform: rotate(0); }
  to   { transform: rotate(1turn); }
}

@keyframes throb {
  0% { transform: scale(1.0); }
  50% { transform: scale(1.72); }
  100% { transform: scale(1.0); }
}

dabblet.html

<svg width="100%" height="800">

<!--<g transform="translate(400,150)" stroke-width="10" stroke="rgba(0, 0, 0, 0.5)" fill="none">
  <ellipse cx="0" cy="0" rx="40" ry="40" class="trace trace slow gentle"></ellipse>
</g>-->

<g transform="translate(400,200)" stroke-width="6" stroke="rgba(0, 0, 0, 0.5)" fill="none">
  <ellipse cx="0" cy="0" rx="40" ry="40" class="s2 turn slow linear"></ellipse>  
</g>

</svg>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}