Emblem - Auto generate circular text

emblem-auto-generate-circular-text.markdown

Emblem - Auto generate circular text

Tiny JS lib to generate a text emblem

A Pen by George Hastings on CodePen.

License.

index.html

<div class="emblem">George*Hastings*</div>

script.js

//https://github.com/GeorgeHastings/emblem

var Emblem = {
  init: function(el, str) {
    var element = document.querySelector(el);
    var text = str ? str : element.innerHTML;
    element.innerHTML = '';
    for (var i = 0; i < text.length; i++) {
      var letter = text[i];
      var span = document.createElement('span');
      var node = document.createTextNode(letter);
      var r = (360/text.length)*(i);
      var x = (Math.PI/text.length).toFixed(0) * (i);
      var y = (Math.PI/text.length).toFixed(0) * (i);
      span.appendChild(node);
      span.style.webkitTransform = 'rotateZ('+r+'deg) translate3d('+x+'px,'+y+'px,0)';
      span.style.transform = 'rotateZ('+r+'deg) translate3d('+x+'px,'+y+'px,0)';
      element.appendChild(span);
    }
  }
};

Emblem.init('.emblem');

style.scss

* {box-sizing: border-box;}

html,
body {
  height: 100%;
	margin: 0;
  overflow: hidden;
  border: 4px solid #003A6F;
  background:  #FFFCEC;
  font-family: 'Arial';
}

.emblem {
	position: absolute;
	left: 0;
	right: 0;
  top: 25vh;
	margin: 0 auto;
	width: 50vh;
	height: 50vh;
	border-radius: 50%;
  font-weight: bold;
	color:  #003A6F;
	animation: spinZ 20s linear infinite;
	text-align: center;

	span {
		position: absolute;
		display: inline-block;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		text-transform: uppercase;
		font-size: 5vh;
		transition: all .5s cubic-bezier(0,0,0,1);
	}

	@keyframes spinZ {
		0% {
			transform: rotateZ(360deg);
		}
		100% {
			transform: rotateZ(0deg);
		}
	}
}