Untitled

dabblet.css

@-keyframes reveal {
     0% {
         left: 0;
     }
     100% {
         left: 100%;
     }
 }
 .container {
     position: relative;
     top: 0;
     left: 0;
 }
 .cache {
     position: absolute;
     z-index: 10;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background-color: white;
     animation: reveal 10s linear infinite;
 }
 .line {
     position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
     height: 5px;
     width: 0;
     background-color: blue;
 }
 .line-bis {
 	background-color: orange;
 }
 .master {
     width: 500px;
 }
 .develop-l {
     top: 0;
     left: 50px;
     width: 50px;
     transform: rotate(45deg);
     transform-origin: 0 0;
 }
 .develop {
     left: 82px;
     top: 34px;
     width: 200px;
 }
 .commit {
     position: absolute;
     z-index: 2;
     border: 5px blue solid;
     background-color: white;
     width: 10px;
     height: 10px;
     border-radius: 10px;
 }
 .commit-bis {
 	border-color: orange;
 }
 .commit-last {
     top: -7px;
     left: 480px;
 }
 .commit-first {
     top: 28px;
     left: 100px;
 }
 .commit-second {
     top: 28px;
     left: 160px;
 }
 .commit-third {
     top: 28px;
     left: 220px;
 }
 .commit-fourth {
     top: 28px;
     left: 280px;
 }
 .commit-merge {
     top: -5px;
     left: 45px;
 }

dabblet.html

<div class="container">
    <div class="cache"></div> 
    <div class="line master"></div>
    <div class="line line-bis develop-l"></div>
    <div class="line line-bis develop"></div>
    <div class="commit commit-last"></div>
    <div class="commit commit-merge"></div>
    <div class="commit commit-bis commit-first"></div>
    <div class="commit commit-bis commit-second"></div>
    <div class="commit commit-bis commit-third"></div>
    <div class="commit commit-bis commit-fourth"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}