JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.

Any URL's added here will be added as `<script>`

s in order, and run *before* the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

` ````
<div id="container" ></div>
```

` ````
html,
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #1d1f20;
overflow: hidden;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#container {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
p {
color: #ffa500;
position: absolute;
height: auto;
width: auto;
white-space: nowrap;
font-weight: bold;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
```

` ````
var readyStateCheckInterval = setInterval( function() {
if (document.readyState === "complete") {
clearInterval(readyStateCheckInterval);
window.addEventListener("resize", resizeHandler);
init();
animate();
}
}, 10);
var caption = "CIRCULAR LOGIC WORKS, BECAUSE ",
resizeTimeoutId = -1,
container,
currentYRotation = 0,
currentXRotation = 0,
xRotationDirection = 1,
maxXRotation = 28,
animating = false;
function animate(){
window.requestAnimationFrame(animate, container);
if(animating){
update();
}
}
//avoid running script repeatedly if a browser window is being resized by dragging
function resizeHandler(){
animating = false
if(resizeTimeoutId==-1){
container.innerHTML = "";
}
clearTimeout(resizeTimeoutId);
resizeTimeoutId = setTimeout(init, 300 );
}
function init(){
container = document.getElementById("container");
container.innerHTML = "";
renderText();
currentYRotation = 270;
currentXRotation = -maxXRotation;
xRotationDirection = 1;
animating = true;
}
function update(){
setTransform(container, "rotateX("+currentXRotation+"deg) rotateY("+currentYRotation+"deg)");
currentYRotation -= .6;
currentXRotation += (.2 * xRotationDirection);
if(currentXRotation>maxXRotation){
currentXRotation = maxXRotation;
xRotationDirection = -1;
}
if(currentXRotation<-maxXRotation){
currentXRotation = -maxXRotation;
xRotationDirection = 1;
}
}
function renderText(){
var i, segments = [],
character, characters = [],
space = 0;
var fontSize = getFontSize();
for(i=0; i<caption.length; i++){
character = document.createElement("p");
character.appendChild(document.createTextNode(caption.charAt(i) ) );
container.appendChild(character);
characters[i] = character;
character.style.fontSize = fontSize + "px";
segments[i] = character.clientWidth || space;
if(i==1){
space = segments[i];
}
}
var circumference = getCircumferenceForSegments(segments);
positionCharacters(characters, segments, circumference);
}
function positionCharacters(characters, segments, circumference){
var i, x, z,
segment,
segmentAngle,
radian = 0,
transform = "",
radius = (circumference / Math.PI ) / 2;
for(i=0; i<segments.length; i++){
segment = segments[i];
segmentAngle = -radian + (Math.PI - solveAngle(segment, radius, radius));
x = radius + Math.cos(radian) * radius;
z = Math.sin(radian) * radius;
transform = "translateX( "+ x +"px ) translateZ( "+ z +"px ) rotateY( "+ segmentAngle +"rad )";
setTransform(characters[i], transform);
radian -= solveAngle(radius, radius, segment);
}
}
function getFontSize(){
var fontSize = 300, targetWidth = window.innerWidth * 3;
var test = document.createElement("p");
test.innerHTML = caption;
document.body.appendChild(test);
while(fontSize>10){
test.style.fontSize = fontSize + "px";
if(test.clientWidth < targetWidth){
break;
}
fontSize -= 3;//slow, I know
}
document.body.removeChild(test);
return fontSize;
}
function setTransform(element, transform){
element.style.webkitTransform = transform;
element.style.MozTransform = transform;
element.style.msTransform = transform;
element.style.OTransform = transform;
element.style.transform = transform;
}
//Estimates circumference by adding lengths of segments together
//then aligns segments along a circle with this estimated circumference
//returns a circumference with "overflow" of estimated circumference added to itself
function getCircumferenceForSegments(segments){
var circumference = 0, radian = 0;
segments.forEach(function(element){
circumference += element;
});
var radius = (circumference / Math.PI ) / 2;
segments.forEach(function(element){
radian += solveAngle(radius, radius, element);
});
return circumference + (radian - Math.PI*2) * radius;
}
//from : http://www.nayuki.io/res/triangle-solver-javascript/triangle-solver.js
function solveAngle(a, b, c) { // Returns angle C using law of cosines
var temp = (a * a + b * b - c * c) / (2 * a * b);
if (temp >= -1 && temp <= 0.9999999)
return Math.acos(temp);
else if (temp <= 1) {
// Improves numerical stability for angles near 0.
// For cases where a ~= b, and both a and b are much greater than c.
// Based on the fact that cos C ~= 1 - C^2 / 2.
return Math.sqrt((c * c - (a - b) * (a - b)) / (a * b));
}
return NaN;
}
```

999px

Shift F
Opt F
Find & Replace

Also see: Tab Triggers