static/img/Release-2.8/hop-28.svg

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="http://fonts.cdnfonts.com/css/ostrich-sans-2" type="text/css"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   x="0px"
   y="0px"
   width="440.00003"
   height="506.47379"
   viewBox="0 0 440.00003 506.47376"
   id="svg1530">
  <style>

#hoplogo {
  visibility: hidden; 
  transform: translate(100px) scale(0.6); 
  animation: fadein 4s forwards;  
  animation-delay: 2s; 
}

#one {
}
#dot {
  animation-delay: 0.5s;
}
#zero {
  animation-delay: 1s; 
}

.hoptext {
  font-family: 'Ostrich Sans Black';
  fill: #0e3a5a;
  font-size: 12em;
  animation: strokeone 6s forwards;
}


@keyframes strokeone {
  0% {
    transform: translateY(-100px) scale(0.1);  
    transform-origin: center; 
  }
  20% {
    transform: translateY(550px) scale(1); 
  }
  60% {
    transform: translateY(550px) scale(1);  
    filter: none; 
  }
  70% {
    transform: translateY(550px) scale(1.1);     
    transform-origin: center; 
    filter: drop-shadow(16px 16px 20px #0e3a5a);  
  }
  100% {
    transform: translateY(550px) scale(1);     
  }
}

@keyframes fadein {
  0% {
    transform: translate(100px) scale(0.7); 
    opacity: 0; 
    visibility: hidden; 
  }  
  90% { 
    opacity: 1; 
    visibility: visible; 
    transform: translate(100px) scale(0.7); 
  }
  100% { 
    opacity: 1; 
    visibility: visible; 
    transform: translate(100px) scale(0.7); 
  }
}
  </style>
 
  <g id="hoplogo">
  <path id="logohp"
     style="stroke-width:1.80008;fill:#0e3a5a;fill-opacity:1"
     d="m 438.62162,199.76015 c -3.43276,24.12106 -11.4089,42.39006 -23.91945,54.8016 -13.36559,13.37639 -31.39158,20.06008 -54.07617,20.06008 l 4.84401,-34.02689 c 9.31181,0 15.7903,-1.07464 19.44266,-3.22394 3.64875,-2.1511 6.03386,-3.81797 7.16071,-5.01682 6.03206,-5.49024 10.20824,-16.35012 12.51955,-32.59403 1.22405,-8.59898 1.49226,-15.51848 0.80463,-20.77471 -0.68223,-5.25083 -2.1997,-9.31361 -4.5344,-12.17933 -2.3401,-2.86393 -5.52984,-4.77381 -9.56922,-5.72965 -4.04657,-0.95404 -8.81318,-1.43466 -14.30342,-1.43466 h -21.13113 l -11.5187,80.95134 -4.84401,34.02689 -16.36452,114.97644 h -0.009 c -7.86454,64.45723 -66.80452,116.87732 -131.44356,116.87732 -32.036,0 -60.79946,-12.54655 -80.99274,-35.33015 C 91.271226,449.23668 82.153826,420.55063 84.724339,389.95648 H 84.53533 l 0.621027,-4.48039 c 0.0018,-0.0108 0.0018,-0.0216 0.0036,-0.0342 h 0.0018 l 8.022946,-57.86894 H 42.323455 l -8.64938,62.38354 H 0 L 37.569446,125.97132 H 71.239921 L 47.160266,293.54606 H 98.021494 L 131.42376,61.420491 103.83935,59.3306 153.32712,0 193.31047,66.109697 165.09783,63.971202 118.5604,389.95829 h -0.0666 c -2.59211,22.41638 3.55696,43.31349 17.35817,58.88597 13.72019,15.48249 33.54806,24.00765 55.82764,24.00765 48.24571,0 92.24324,-39.21111 98.07729,-87.40823 l 0.28982,0.036 36.98442,-259.86299 h 54.8016 c 22.44339,0 38.58289,6.57029 48.41492,19.70007 8.94279,12.65815 11.73832,30.80295 8.37397,54.44338 z" />
  <path 
     id="logoo"
     style="stroke-width:1.80008;fill:#0e3a5a;fill-opacity:1"
     d="M 233.95898 179.83984 C 227.5111 179.83984 221.6866 180.50204 216.48438 181.8125 C 211.28394 183.12656 206.56823 184.79929 202.33984 186.82617 C 198.11146 188.85667 194.45088 191.06983 191.36914 193.45312 C 188.28021 195.84184 185.61173 198.23013 183.36523 200.61523 C 171.50091 213.50919 163.90242 231.65953 160.57227 255.06055 L 144.41211 368.60352 C 141.08196 392.00814 143.51503 410.15292 151.70898 423.04688 C 154.84472 427.82608 159.9134 432.48318 166.91211 437.01758 C 173.90542 441.55557 183.73067 443.82227 196.39062 443.82227 C 209.28459 443.82227 219.81562 441.55557 227.98438 437.01758 C 236.15133 432.48318 242.48237 427.82608 246.98438 423.04688 C 258.8505 410.15292 266.44704 392.00814 269.77539 368.60352 L 285.9375 255.06055 C 289.26765 231.65953 286.83639 213.50919 278.64062 200.61523 C 275.49768 195.84142 270.49153 191.18448 263.61523 186.64648 C 256.73893 182.11208 246.85294 179.83984 233.95898 179.83984 z M 229.11719 213.86719 C 231.50049 213.86719 234.32978 214.10876 237.61133 214.58398 C 240.88207 215.0646 243.89402 216.55305 246.64453 219.06055 C 249.38966 221.56807 251.38023 225.63119 252.61328 231.24023 C 253.84093 236.85288 253.72745 244.79454 252.26758 255.05859 L 236.10742 368.60156 C 234.61335 379.11222 232.44721 387.17206 229.62109 392.7793 C 226.79136 398.39195 223.64545 402.45146 220.1875 404.95898 C 216.72416 407.46648 213.2884 408.96034 209.88086 409.43555 C 206.46611 409.91798 203.563 410.15234 201.17969 410.15234 C 198.54978 410.15234 195.6635 409.91798 192.50977 409.43555 C 189.35242 408.96034 186.39566 407.46648 183.65234 404.95898 C 180.90361 402.45146 178.91321 398.39376 177.68555 392.7793 C 176.4507 387.17206 176.58616 379.11222 178.08203 368.60156 L 194.24219 255.05859 C 195.70026 244.79454 197.8441 236.85288 200.67383 231.24023 C 203.49995 225.63119 206.64797 221.56807 210.11133 219.06055 C 213.56747 216.55305 216.94788 215.0646 220.24023 214.58398 C 223.53077 214.10876 226.48547 213.86719 229.11719 213.86719 z " />
  </g>
  <g>
  <text id="one" class="hoptext" x="25%" y="-10%">2</text>
  <text id="dot" class="hoptext" x="45%" y="-10%">.</text>
  <text id="zero" class="hoptext" x="55%" y="-10%">8</text>
  </g>
</svg>