JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://media.smashingmagazine.com/wp-content/uploads/2011/09/domplotter.js"></script>
<section class="stage"></section>
CSS
*{margin:0;padding:0;font-size:15px;font-family:helvetica,arial,sans-serif}
footer,section,header{display:block;}
h1{margin:1em 2em}
.stage{
width:400px;
height:400px;
margin:2em;
float:left;
position:relative;
background:#ccc;
overflow:hidden;
font-weight:bold;
text-align:center;
}
JavaScript
var stage = document.querySelector('.stage'),
message = 'Путин-вор!'.toUpperCase(),
plots = message.length,
increase = Math.PI * 2 / plots,
angle = -Math.PI,
turnangle = 0,
x = 0,
y = 0,
plotcache = [];
for( var i = 0; i < plots; i++ ) {
var p = new Plot( stage );
p.content( message.substr(i,1) );
p.setDimensions( 40, 40 );
plotcache.push( p );
}
function rotate(){
for( var i = 0; i < plots; i++ ) {
x = 100 * Math.cos( angle ) + 200;
y = 100 * Math.sin( angle ) + 200;
turnangle = Math.atan2( y - 200, x - 200 ) * 180 / Math.PI + 90 + 'deg';
plotcache[ i ].rotate( turnangle );
plotcache[ i ].position( x, y );
angle += increase;
}
angle += 0.06;
}
setInterval( rotate, 1000/40 );