Minio logo loading

HTML
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 160 256" version="1.1" id="svg3092" height="218.14844" width="137"> <defs id="defs3094" /> <metadata id="metadata3097"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g transform="translate(0.99999967,-982.85149)" id="layer1"> <g transform="matrix(1.0112586,0,0,1.0112586,5.4603732,-13.223714)" id="g4144"> <g id="g4140"> <g style="image-rendering:auto" id="minio" transform="matrix(1.0000023,0,0,0.99999799,-739.31646,295.2269)"> <title id="title3337">Minio Logo</title> <path id="body" d="m 803.42903,801.80813 c 12.40802,4.17067 27.0499,9.11665 37.95186,12.80906 -12.01295,-21.20683 -27.84305,-34.11687 -37.95186,-40.78578 l 0,27.97672 z m 0,93.72113 -14.22303,8.96217 0,-92.45864 c -1.52985,-0.5139 -2.97948,-0.9981 -4.33405,-1.45259 -19.98593,-6.67189 -32.7207,-17.95703 -35.85168,-31.77904 -2.54577,-11.21386 1.55064,-23.02184 11.24654,-32.39691 8.84929,-8.55225 21.22761,-18.39964 31.17304,-26.31619 3.60329,-2.86658 6.73129,-5.3173 9.2028,-7.39669 2.31406,-1.93977 1.61598,-4.95488 0.57033,-6.21441 -1.74073,-2.09127 -4.61921,-1.74669 -6.56195,-0.32379 -0.10398,0.0802 -5.65595,4.40832 -5.65595,4.40832 l -8.58195,-11.57033 c 0,0 5.60843,-4.14096 5.8223,-4.30137 8.39777,-6.155 19.54034,-4.98758 25.92406,2.71509 3.19039,3.84093 4.68459,8.69779 4.20929,13.67051 -0.47232,4.9549 -2.84579,9.43153 -6.68078,12.5922 -2.58439,2.12988 -5.73912,4.64298 -9.39291,7.54522 -9.70779,7.72641 -21.78905,17.33915 -30.14226,25.41907 -6.1253,5.9233 -8.70671,12.67834 -7.26896,19.02345 1.9873,8.75424 11.33268,16.34105 26.32213,21.37911 l 0,-46.22486 c 40.29563,13.62298 68.76248,61.22321 78.20589,87.64039 0,0 -41.76308,-14.15768 -63.98286,-21.64051 l 0,78.7198" /> <path id="shadow" d="m 803.42903,826.12513 -14.22303,-4.78261 0,-9.30973 14.22303,4.77667 0,9.31567" /> <path id="beak" d="m 734.75566,745.06155 c -0.23469,0.16636 -0.54956,0.14853 -0.73077,-0.0743 -0.17823,-0.22576 -0.13063,-0.53766 0.0802,-0.73373 4.93113,-4.51525 24.45661,-23.86844 46.30805,-45.2624 l 8.58193,11.57033 c 0,0 -53.54135,34.01288 -54.23942,34.50007"/> </g> </g> </g> </g> </svg> <a class="a-minio" href="http://minio.io/" target="_blank">MINIO</a>
CSS
body { background-color: #32393f; } svg { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 50px; } #beak { stroke: #f14621; stroke-width: 1; fill: #f14621; fill-opacity: 0; stroke-dasharray: 500; stroke-dashoffset: 500; animation: 5s draw forwards; } #body { fill-opacity: 0; fill: #fff; stroke: #fff; stroke-width: 1px; stroke-dasharray: 780; stroke-dashoffset: 780; -webkit-animation: 5s draw forwards; } #shadow { fill: #cdccca; fill-opacity: 0; animation: 3s shadow forwards; animation-delay: 4s; } @-webkit-keyframes shadow { from { fill-opacity: 0; } to { fill-opacity: 1; } } @-webkit-keyframes beak { 0% { stroke-dashoffset: 200; } 75% { stroke-dashoffset: 0; fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } } @-webkit-keyframes draw { 0% { stroke-dashoffset: 780; } 75% { fill-opacity: 0; stroke-dashoffset: 0; } 100% { fill-opacity: 1; stroke-dashoffset: 0; } } .a-minio { font-family: Arial; font-size: 20px; color: rgba(255,255,255,0.5); position: absolute; left: 25px; bottom: 20px; text-decoration: none; } .a-minio:hover { color: rgba(255,255,255,0.8); }
JAVASCRIPT
Expand for more options Login