Tiny JS lib to generate a text emblem
A Pen by George Hastings on CodePen.
Tiny JS lib to generate a text emblem
A Pen by George Hastings on CodePen.
<div class="emblem">George*Hastings*</div> |
//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'); |
* {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); | |
} | |
} | |
} |