Skip to content

Instantly share code, notes, and snippets.

@made-by-chris

made-by-chris/index.html

Created November 21, 2018 18:20
Show Gist options
  • Save made-by-chris/1a581373e87caf8bbaf6e50de42e57cb to your computer and use it in GitHub Desktop.
Save made-by-chris/1a581373e87caf8bbaf6e50de42e57cb to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/yawoce
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
body {
margin: 0;
overflow: hidden;
}
circle {
position: absolute;
border-radius: 23%;
animation-iteration-count: infinite;
animation-timing-function: linear;
box-shadow: 0px 0px 15px #888888;
}
circle:nth-of-type(1) {
top: calc(50% - 12.5vmax);
left: calc(50% - 12.5vmax);
width: 25vmax;
height: 25vmax;
z-index: 10000;
animation-name: cw;
}
circle:nth-of-type(2) {
top: calc(50% - 25vmax);
left: calc(50% - 25vmax);
width: 50vmax;
height: 50vmax;
animation-name: acw;
z-index: 9999;
}
circle:nth-of-type(3) {
top: calc(50% - 37.5vmax);
left: calc(50% - 37.5vmax);
animation-name: cw;
z-index: 9998;
width: 75vmax;
height: 75vmax;
}
circle:nth-of-type(4) {
top: calc(50% - 50.5vmax);
left: calc(50% - 50.5vmax);
animation-name: acw;
width: 100vmax;
height: 100vmax;
z-index: 9997;
}
circle:nth-of-type(5) {
top: calc(50% - 70vmax);
left: calc(50% - 70vmax);
animation-name: acw;
z-index: 9996;
width: 140vmax;
height: 140vmax;
}
.a {
background: rgb(200,200,200);
animation-duration: 1000ms;
animation-name: acw;
}
.b {
background: rgb(180,180,180);
animation-name: cw;
animation-duration: 2000ms;
}
.c {
background: rgb(160,160,160);
animation-name: acw;
animation-duration: 3000ms;
}
.d {
background: rgb(190,190,190);
animation-name: cw;
animation-duration: 4000ms;
}
.e {
background: rgb(130,130,130);
animation-name: cw;
animation-duration: 4000ms;
}
@keyframes ripple {
0% {
border-radius: 48%;
transform:rotate(0deg)
}
50% {
transform:rotate(180deg);
border-radius: 50%;
}
100% {
border-radius: 48%px;
transform:rotate(360deg);
}
}
@keyframes cw {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
@keyframes acw {
from {
transform:rotate(0deg);
}
to {
transform:rotate(-360deg);
}
}
</style>
</head>
<body>
<circle class="a"></circle>
<circle class="b"></circle>
<circle class="c"></circle>
<circle class="d"></circle>
<circle class="e"></circle>
<script id="jsbin-javascript">
const levelOne =
{
0: {
background: "red",
rotation: -100,
text: "haha",
sides: 3
},
1: {
background: "teal",
rotation: 100,
text: "",
sides: 4
},
2: {
background: "orange",
rotation: -200,
text: "",
sides: 4
},
3: {
background: "gray",
rotation: 200,
text: "",
sides: 4
},
4: {
background: "lightblue",
rotation: 100,
text: "",
sides: 4
},
}
function buildLevel(rings) {
const level = rings.map((ring) => {
})
}
buildLevel(levelOne)
</script>
<script id="jsbin-source-css" type="text/css">body {
margin: 0;
overflow: hidden;
}
circle {
position: absolute;
border-radius: 23%;
animation-iteration-count: infinite;
animation-timing-function: linear;
box-shadow: 0px 0px 15px #888888;
}
circle:nth-of-type(1) {
top: calc(50% - 12.5vmax);
left: calc(50% - 12.5vmax);
width: 25vmax;
height: 25vmax;
z-index: 10000;
animation-name: cw;
}
circle:nth-of-type(2) {
top: calc(50% - 25vmax);
left: calc(50% - 25vmax);
width: 50vmax;
height: 50vmax;
animation-name: acw;
z-index: 9999;
}
circle:nth-of-type(3) {
top: calc(50% - 37.5vmax);
left: calc(50% - 37.5vmax);
animation-name: cw;
z-index: 9998;
width: 75vmax;
height: 75vmax;
}
circle:nth-of-type(4) {
top: calc(50% - 50.5vmax);
left: calc(50% - 50.5vmax);
animation-name: acw;
width: 100vmax;
height: 100vmax;
z-index: 9997;
}
circle:nth-of-type(5) {
top: calc(50% - 70vmax);
left: calc(50% - 70vmax);
animation-name: acw;
z-index: 9996;
width: 140vmax;
height: 140vmax;
}
.a {
background: rgb(200,200,200);
animation-duration: 1000ms;
animation-name: acw;
}
.b {
background: rgb(180,180,180);
animation-name: cw;
animation-duration: 2000ms;
}
.c {
background: rgb(160,160,160);
animation-name: acw;
animation-duration: 3000ms;
}
.d {
background: rgb(190,190,190);
animation-name: cw;
animation-duration: 4000ms;
}
.e {
background: rgb(130,130,130);
animation-name: cw;
animation-duration: 4000ms;
}
@keyframes ripple {
0% {
border-radius: 48%;
transform:rotate(0deg)
}
50% {
transform:rotate(180deg);
border-radius: 50%;
}
100% {
border-radius: 48%px;
transform:rotate(360deg);
}
}
@keyframes cw {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
@keyframes acw {
from {
transform:rotate(0deg);
}
to {
transform:rotate(-360deg);
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">const levelOne =
{
0: {
background: "red",
rotation: -100,
text: "haha",
sides: 3
},
1: {
background: "teal",
rotation: 100,
text: "",
sides: 4
},
2: {
background: "orange",
rotation: -200,
text: "",
sides: 4
},
3: {
background: "gray",
rotation: 200,
text: "",
sides: 4
},
4: {
background: "lightblue",
rotation: 100,
text: "",
sides: 4
},
}
function buildLevel(rings) {
const level = rings.map((ring) => {
})
}
buildLevel(levelOne)
</script></body>
</html>
Raw
jsbin.yawoce.css
body {
margin: 0;
overflow: hidden;
}
circle {
position: absolute;
border-radius: 23%;
animation-iteration-count: infinite;
animation-timing-function: linear;
box-shadow: 0px 0px 15px #888888;
}
circle:nth-of-type(1) {
top: calc(50% - 12.5vmax);
left: calc(50% - 12.5vmax);
width: 25vmax;
height: 25vmax;
z-index: 10000;
animation-name: cw;
}
circle:nth-of-type(2) {
top: calc(50% - 25vmax);
left: calc(50% - 25vmax);
width: 50vmax;
height: 50vmax;
animation-name: acw;
z-index: 9999;
}
circle:nth-of-type(3) {
top: calc(50% - 37.5vmax);
left: calc(50% - 37.5vmax);
animation-name: cw;
z-index: 9998;
width: 75vmax;
height: 75vmax;
}
circle:nth-of-type(4) {
top: calc(50% - 50.5vmax);
left: calc(50% - 50.5vmax);
animation-name: acw;
width: 100vmax;
height: 100vmax;
z-index: 9997;
}
circle:nth-of-type(5) {
top: calc(50% - 70vmax);
left: calc(50% - 70vmax);
animation-name: acw;
z-index: 9996;
width: 140vmax;
height: 140vmax;
}
.a {
background: rgb(200,200,200);
animation-duration: 1000ms;
animation-name: acw;
}
.b {
background: rgb(180,180,180);
animation-name: cw;
animation-duration: 2000ms;
}
.c {
background: rgb(160,160,160);
animation-name: acw;
animation-duration: 3000ms;
}
.d {
background: rgb(190,190,190);
animation-name: cw;
animation-duration: 4000ms;
}
.e {
background: rgb(130,130,130);
animation-name: cw;
animation-duration: 4000ms;
}
@keyframes ripple {
0% {
border-radius: 48%;
transform:rotate(0deg)
}
50% {
transform:rotate(180deg);
border-radius: 50%;
}
100% {
border-radius: 48%px;
transform:rotate(360deg);
}
}
@keyframes cw {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
@keyframes acw {
from {
transform:rotate(0deg);
}
to {
transform:rotate(-360deg);
}
}
Raw
jsbin.yawoce.js
const levelOne =
{
0: {
background: "red",
rotation: -100,
text: "haha",
sides: 3
},
1: {
background: "teal",
rotation: 100,
text: "",
sides: 4
},
2: {
background: "orange",
rotation: -200,
text: "",
sides: 4
},
3: {
background: "gray",
rotation: 200,
text: "",
sides: 4
},
4: {
background: "lightblue",
rotation: 100,
text: "",
sides: 4
},
}
function buildLevel(rings) {
const level = rings.map((ring) => {
})
}
buildLevel(levelOne)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment