RAVN Preloader

dabblet.css

/**
 * RAVN Preloader
 */

body {
	background: black;
	text-align: center;
}

.logo {
	width: 80%;
	margin: 50px;
}

.logo--letters path {
	animation: anim-fade-out 1.6s alternate infinite 0s;
}
.logo--letters path.logo--R {
	animation-delay: 0s;
}
.logo--letters path.logo--A {
	animation-delay: 0.5s;
}
.logo--letters path.logo--V {
	animation-delay: 1s;
}
.logo--letters path.logo--N {
	animation-delay: 1.5s;
}

.logo--chevron {
	display: none;
}

@keyframes anim-fade-out {
	0% {
		opacity: 1;
	}
	
	100% {
		opacity: 0;
	}
}

dabblet.html

<div class="logo">
    <svg  viewBox="0 0 134 218" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
        <!-- Generator: Sketch 3.0.4 (8054) - http://www.bohemiancoding.com/sketch -->
        <title>full logo</title>
        <desc>Created with Sketch.</desc>
        <defs></defs>
        <g id="Landing" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
            <g transform="translate(-164.000000, -95.000000)">
                <g transform="translate(164.000000, 95.000000)">
                    <g class="logo--chevron" transform="translate(0.000000, 165.000000)" sketch:type="MSShapeGroup">
                        <rect id="bar" fill="#FFFFFF" x="0" y="0" width="134" height="53"></rect>
                        <path d="M46.843502,15.8558333 L67.5192832,38.2814583 L88.5855655,15.8558333" id="chevron" stroke="#000000" stroke-width="2"></path>
                    </g>
                    <g class="logo--letters" transform="translate(5.000000, 0.000000)" fill="#FFFFFF" sketch:type="MSShapeGroup">
                        <path class="logo--R" d="M1.94903226,77 L1.94903226,41.0145161 L30.8448387,41.0145161 C35.2848609,41.0145161 38.8296642,41.4620923 41.4793548,42.3572581 C44.1290455,43.2524238 46.1699928,44.5414432 47.6022581,46.2243548 C49.0345233,47.9072665 49.9833848,49.9840199 50.448871,52.4546774 C50.9143572,54.9253349 51.1470968,57.7361133 51.1470968,60.8870968 C51.1470968,62.1045222 51.1649998,63.4830568 51.2008065,65.0227419 C51.2366131,66.5624271 51.3082253,68.084186 51.4156452,69.5880645 C51.5230651,71.091943 51.6841925,72.5062837 51.8990323,73.831129 C52.113872,75.1559744 52.4003208,76.2122541 52.7583871,77 L55.1216129,77 C54.7635466,76.4987072 54.4770978,75.6035548 54.2622581,74.3145161 C54.0474183,73.0254774 53.8683878,71.5932337 53.7251613,70.0177419 C53.5819348,68.4422502 53.4745165,66.848879 53.4029032,65.2375806 C53.33129,63.6262823 53.2954839,62.2835538 53.2954839,61.2093548 C53.2954839,58.1299846 53.1164534,55.3729154 52.7583871,52.9380645 C52.4003208,50.5032136 51.6841989,48.3906541 50.61,46.6003226 C49.5358011,44.809991 47.9961391,43.3598443 45.9909677,42.2498387 C43.9857964,41.1398332 41.3719516,40.3700021 38.1493548,39.9403226 L38.1493548,39.7254839 C43.5203494,38.5080584 47.6380502,36.1985654 50.5025806,32.7969355 C53.3671111,29.3953056 54.7277427,25.1164774 54.5845161,19.9603226 C54.4412896,13.228676 52.5077606,8.26953206 48.783871,5.08274194 C45.0599814,1.89595181 39.187782,0.302580645 31.1670968,0.302580645 L-0.199354839,0.302580645 L-0.199354839,77 L1.94903226,77 Z M1.94903226,38.866129 L1.94903226,2.45096774 L31.7041935,2.45096774 C39.0087462,2.45096774 44.272242,3.97272672 47.4948387,7.01629032 C50.7174355,10.0598539 52.3645158,14.302876 52.436129,19.7454839 C52.436129,23.1113072 51.8274254,25.9936977 50.61,28.3927419 C49.3925746,30.7917862 47.7813003,32.7790244 45.776129,34.3545161 C43.7709577,35.9300079 41.4614647,37.0758029 38.8475806,37.7919355 C36.2336966,38.5080681 33.4945305,38.866129 30.63,38.866129 L1.94903226,38.866129 Z"></path>
                        <path class="logo--N" d="M65.1335341,76.821959 L65.1335341,153.519378 L67.2819211,153.519378 L67.2819211,79.5074428 L67.4967599,79.5074428 L119.917405,153.519378 L123.139986,153.519378 L123.139986,76.821959 L120.991599,76.821959 L120.991599,150.833894 L120.77676,150.833894 L68.3561147,76.821959 L65.1335341,76.821959 Z"></path>
                        <path class="logo--V" d="M59.094552,76.6821793 L30.950681,150.586695 L30.7358423,150.586695 L1.73261649,76.6821793 L-0.308351254,76.6821793 L29.6616487,153.379599 L32.0248746,153.379599 L61.2429391,76.6821793 L59.094552,76.6821793 Z"></path>
                        <path class="logo--A" d="M71.5428961,51.7564516 L110.643541,51.7564516 L120.740961,77 L123.104186,77 L92.8119283,0.302580645 L90.0190251,0.302580645 L58.9748315,77 L61.3380573,77 L71.5428961,51.7564516 Z M109.784186,49.6080645 L72.4022509,49.6080645 L91.3080573,2.45096774 L91.5228961,2.45096774 L109.784186,49.6080645 Z"></path>
                    </g>
                </g>
            </g>
        </g>
    </svg>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}