Untitled

dabblet.css

svg {    width: 400px;    height: 400px;}@keyframes circle_top {    0% {        /*stroke-dashoffset: 1832.365;*/    }    100% {        stroke-dashoffset: 1832.365;        /*stroke-dashoffset: 0;*/    }}@keyframes circle_bottom {    0% {        stroke-dashoffset: 1829.189;        fill: #fff;    }    80% {        fill: #fff;    }    100% {        stroke-dashoffset: 0;        fill: #1ba1e2;    }}@keyframes triangle_top {    0% {        stroke-dashoffset: 478.399;        fill: #fff;    }    80% {        fill: #fff;    }    100% {        stroke-dashoffset: 0;        fill: #1ba1e2;    }}@keyframes triangle_bottom {    0% {        stroke-dashoffset: 479.475;        fill: #fff;    }    80% {        fill: #fff;    }    100% {        stroke-dashoffset: 0;        fill: #1ba1e2;    }}.circle_top {    animation: circle_top 5s infinite linear;    stroke-linecap: round;    stroke-width: 10;    stroke-dasharray: 0, 0, 150, 1682.365;    stroke-dashoffset: 0;    stroke-linejoin: round;}.circle_bottom {    animation: circle_bottom 3s ease forwards;    stroke-dasharray: 1829.189;    stroke-dashoffset: 1829.189;}.triangle_top {    animation: triangle_top 3s ease forwards;    stroke-dasharray: 478.399;    stroke-dashoffset: 478.399;}.triangle_bottom {    animation: triangle_bottom 3s ease forwards;    stroke-dasharray: 479.475;    stroke-dashoffset: 479.475;}

dabblet.html

<svg id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 602 602">
				<path id="circle1" class="circle_top" stroke="#178bc4" stroke-width="2" fill="none" d="M225.874,64.573c8.1-7.51,20.753-7.034,28.263,1.068c2.245,2.42,3.76,5.252,4.588,8.228 c0.04,0.137,0.094,0.267,0.131,0.406l56.818,211.897l196.915,68.306l85.291-79.09C584.77,121.807,455.976,1.237,299,1.237 C142.573,1.237,14.132,120.967,0.263,273.78L225.874,64.573z"/>
				<polygon class="triangle_top" stroke="#178bc4" stroke-width="2" fill="#1BA1E2" points="270.035,270.341 228.78,116.429 119.216,218.025 "/>
				<path class="circle_bottom" stroke="#178bc4" stroke-width="2" fill="#1BA1E2" fill="#1BA1E2" d="M372.77,538.675c-6.118,5.678-14.835,6.787-21.972,3.5c-5.456-2.328-9.759-6.932-11.412-13.102 l-56.842-212.066L86.005,248.82L0.233,328.355C13.942,481.33,142.457,601.238,299,601.238 c155.916,0,284.035-118.947,298.604-271.045L372.77,538.675z"/>
				<polygon class="triangle_bottom" stroke="#178bc4" stroke-width="2" fill="#1BA1E2" points="328.188,332.845 369.554,487.113 479.358,385.292 "/>
			</svg>

dabblet.js

// alert('Hello world!');

settings.json

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