Random Artboard

In this example below you will see how to do a Random Artboard with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by colormode, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright colormode ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Random Artboard</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
    <div class="section">
        <!-- POKEBALLS -->
        <div class="pokeball-container">
            <div class="pokeball">
                <div class="pokeball-half top"></div>
                <div class="pokeball-half bottom"></div>
            </div>
            <div class="pokeball-shadow"></div>
        </div>
        <div class="pokeball-container">
            <div class="pokeball">
                <div class="pokeball-half top"></div>
                <div class="pokeball-half bottom"></div>
            </div>
            <div class="pokeball-shadow"></div>
        </div>
        <div class="pokeball-container">
            <div class="pokeball">
                <div class="pokeball-half top"></div>
                <div class="pokeball-half bottom"></div>
            </div>
            <div class="pokeball-shadow"></div>
        </div>
        <!-- TABLE -->
        <div id="table"></div>
    </div>
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/colormode/random-artboard-PPovLN */
.pokeball-container {
    float: left;
    display:block;
    margin: 100px;
    z-index:10
}

.pokeball {
    display:block;
    max-width: 200px;
    max-height: 200px;
    height: 200px;
    width: 200px;
    border-radius:200px;
}

.pokeball-half {
    display: block;
    position:relative;
    height: 90px;
    width: 200px;
}

.pokeball-half.top {
    border-radius: 100px 100px 0 0/100px 100px 0 0;
    background-color: #ee5555;
    border-bottom:10px solid #333;
}

.pokeball-half.bottom {
    border-radius: 0 0 100px 100px/0 0 100px 100px;
    background-color: #ddd;
    border-top:10px solid #333
}

.pokeball::after {
    content: "";
    display:block;
    background-color: #ddd;
    width: 30px;
    height: 30px;
    border: 10px solid #333;
    border-radius: 30px;
    position:absolute;
    left:75px;
    top:75px;
}

.pokeball-shadow {
    width: 130px;
    height: 30px;
    margin:-15px 35px 0;
    background-color: rgba(1, 1, 1, .2);
    border-radius: 200px / 50px 50px;
}

.pokeball-container:nth-child(1) .pokeball{
    animation: pokeball-roll 2.1s ease-out 1.37s infinite;
}
.pokeball-container:nth-of-type(1){
    animation: pokeball-move 2.1s ease-out 1.37s infinite;
}

.pokeball-container:nth-child(2) .pokeball{
    animation: pokeball-roll 2s ease-out 1.1s infinite;
}
.pokeball-container:nth-of-type(2){
    animation: pokeball-move 2s ease-out 1.1s infinite;
}

.pokeball-container:nth-child(3) .pokeball{
    animation: pokeball-roll 1.9s ease-out 2.07s infinite;
}
.pokeball-container:nth-of-type(3){
    animation: pokeball-move 1.9s ease-out 2.07s infinite;
}

@keyframes pokeball-roll {
    0%   {transform: rotate(0deg)}
    10%  {transform: rotate(35deg)}
    20%  {transform: rotate(0deg)}
    30%  {transform: rotate(-30deg)}
    40% {transform: rotate(15deg)}
    50% {transform: rotate(0deg)}
}

@keyframes pokeball-move {
    0%   {transform:translateX(0)}
    10%  {transform:translateX(25px)}
    20%  {transform:translateX(0)}
    30%  {transform:translateX(-20px)}
    40%  {transform:translateX(10px)}
    50% {transform:translateX(0)}
    
}

Comments