JSFiddle - React, Tailwind, and code Playground

by jcutrell

HTML

<div id="holder"></div>
<h1 id="title">BELIEVE.<br></h1>

CSS

h1, svg {
    float: left;
}
h1 {
    font-size: 4em;
    font-weight: bold;
    color: #fff;
    font-family: sans-serif;
    line-height: 400px;
    position: relative;
}
body {
    background: #484848;
}
@-webkit-keyframes rotate {
 from {
   -webkit-transform: rotateZ(0deg);
 }
 to {
   -webkit-transform: rotateZ(45deg);
 }
}
@-webkit-keyframes animateC {
   0% {
        stroke: rgb(100,255,255);
    }
    33% {
        stroke: rgb(255,100,255);
    }
    66% {
            stroke: rgb(255,255,100);
    }
    100% {
        stroke: rgb(100,255,255);
    }
}
svg {
-webkit-animation-name: rotate;
 -webkit-animation-duration: 20s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-direction: alternate;
}
path {
    stroke: red;
 -webkit-animation-name: animateC;
 -webkit-animation-duration: 10s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
}
path:hover {
    stroke-width: 3;
    cursor: pointer;
}
svg:hover {
    -webkit-transform: rotateZ(0deg);
    -webkit-transition: all 1s;
    -webkit-animation: none;
}

JavaScript

//x = cx + r * cos(a)
//y = cy + r * sin(a)
var r = Raphael("holder", 400, 400);
var rad = 50, cx = 200, cy = 200;

function curve(x, y, ax, ay, bx, by, zx, zy, color) {
    var p = [["M", cx, cy], ["L", cx, cy]];
    var path = [["M", x, y], ["C", ax, ay, bx, by, zx, zy]],
        temppath = r.path(p).animate({path:path, "stroke-width": 1.4, "stroke-linecap": "round"},500)
}
var items = 70;
for (var i = 0; i<items; i++){
    var angle = (Math.PI*2)/items * (i+1);
    var sin = Math.sin(angle);
    var cos = Math.cos(angle);
    var x = cx + rad * cos;
    var y = cy + rad * sin;
    var last = (Math.PI*2)/items * (i+ Math.floor(items/10));
    curve(x, y,
          x+cos*30, y+sin*30,
          x+cos*60, y+sin*60,
          x+Math.cos(last)*100, y+Math.sin(last)*100);
}