PrismarineJS.svg

<svg version="1.1" width="300" height="100" preserveAspect="true" xmlns="http://www.w3.org/2000/svg">
  <style>
    .smooth_anim {
      transition: all .2s ease-in-out;
    }

    .content {
      fill: #aaaabb;
    }

    .content:hover {
      fill: #88aa88;
      transform: translate(-2.5%, -2.5%) scale(1.05);
    }

    .content:hover .icon {
      transform: rotate(-15deg);
    }

    .maintext {
      fill: rgb(25, 25, 25);
      font-weight: 700;
      font-family: Tahoma, Geneva, sans-serif;
    }
    
    .content:hover .maintext {
      transform: translate(0%, -10%);
    }

    .subtext {
      fill: rgb(50, 50, 50, 0);
      font-weight: 100;
      font-family: Verdana, Geneva, sans-serif;
      font-style: italic;
    }

    .content:hover .subtext {
      fill: rgb(50, 50, 50, 1);
    }

    .shadow {
      filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .5));
    }
  </style>

  <a href="https://github.com/PrismarineJS">
    <svg class="content smooth_anim shadow" x="7.5%" y="7.5%" width="85%" height="85%">
      <style>
        .icon {
          transform-origin: 22.5% 50%;
        }
      </style>

      <rect x="0" y="0" width="100%" height="100%" rx="15"/>

      <svg class="icon smooth_anim" x="0%" y="10%" width="40%" height="80%" viewBox="0 0 149.2534 163.65306">
        <path
          style="fill:#2c7f66;fill-opacity:1;stroke:none;stroke-width:0.255102"
          d="M 70.291014,77.896165 C 59.680388,74.213777 22.648767,50.991201 15.537079,47.357179 L 9.6785404,43.882052 12.974329,40.27204 C 14.389438,38.722015 23.848199,31.22073 30.014505,27.519226 48.82918,16.225168 71.327881,6.3561529 74.240859,6.2939037 76.840164,6.2383587 96.296822,13.526104 112.93116,23.22948 c 13.99617,8.164443 25.11609,20.005331 25.11609,21.075841 0,3.35084 -52.956681,34.036172 -60.756373,35.148339 -0.70521,0.10056 -5.712968,-1.110855 -6.999863,-1.557495 z" />
        <path
          style="fill:#60a490;fill-opacity:1;stroke:none;stroke-width:0.255102"
          d="M 59.762993,152.41877 C 34.273187,139.37619 9.1850164,124.58868 8.1324288,120.62769 7.3477601,117.67491 7.3674123,103.27376 7.1659271,81.577795 6.9735686,60.864542 8.2924714,49.447777 9.6252837,49.191101 c 0.2172937,-0.04185 5.0220853,4.138746 7.3318793,5.356159 12.651207,6.668019 24.238738,15.66922 42.756593,22.261247 l 14.214128,5.059973 -0.07609,38.52563 c -0.03525,17.84928 2.440906,37.45994 -1.830585,34.51479 -0.326872,-0.22538 -2.523682,2.31772 -2.682705,2.31445 -0.15903,-0.003 -6.06786,-3.00979 -9.575513,-4.80458 z" />
        <path
          style="fill:#339176;fill-opacity:1;stroke:none;stroke-width:0.255102"
          d="m 77.872974,152.91559 c -3.269362,-1.92068 0.03217,-15.1659 -0.262792,-33.00359 L 77.018109,84.108633 86.517737,79.188835 C 101.26896,71.54926 116.64721,64.399959 127.85892,57.115614 c 7.84892,-5.099512 11.87447,-6.243247 12.05109,-5.927453 0.52593,0.940369 3.06033,13.025431 3.28639,25.648089 0.33835,18.892771 -0.64244,41.92455 -2.70182,44.72957 -1.75852,2.39523 -22.6872,14.97537 -35.01436,21.80032 -8.102415,4.4859 -25.563376,11.85455 -26.260778,11.85455 -0.12918,0 -1.346468,-2.3051 -1.346468,-2.3051 z" />
        <g
          transform="matrix(0.1,0,0,-0.1,-25.6,181.67807)"
          stroke="none">
          <path
            d="M 875,1778 C 659,1676 371,1501 308,1433 c -44,-46 -52,-113 -52,-433 0,-308 9,-387 47,-428 60,-65 281,-205 506,-319 192,-97 194,-97 384,0 261,133 501,290 525,341 23,51 35,255 29,491 -7,261 -15,306 -60,353 -60,62 -364,248 -547,335 -121,57 -154,58 -265,5 z m 251,-102 c 171,-84 474,-267 474,-285 0,-36 -536,-341 -599,-341 -59,0 -601,305 -601,338 0,31 546,341 601,342 9,0 65,-24 125,-54 z M 445,1236 c 90,-61 266,-161 393,-223 L 950,958 V 624 c 0,-184 -2,-334 -5,-334 -3,0 -40,18 -83,40 -235,121 -470,271 -494,313 -8,15 -13,109 -16,299 -4,287 0,354 21,342 7,-4 39,-26 72,-48 z m 1209,-118 c 9,-227 -6,-462 -31,-491 -21,-24 -203,-144 -318,-209 -83,-47 -241,-128 -250,-128 -3,0 -5,150 -5,334 v 334 l 113,55 c 129,64 301,162 402,230 39,25 73,47 76,47 4,0 10,-78 13,-172 z"
            fill="#29594b" />
          <path
            d="m 1540,939 c -57,-23 -110,-94 -110,-148 0,-36 22,-51 74,-51 28,0 36,-4 36,-18 0,-29 -22,-52 -65,-66 -32,-11 -41,-20 -43,-41 -3,-24 -1,-26 20,-20 69,21 132,82 142,139 10,55 -6,76 -59,76 -24,0 -47,5 -50,10 -11,18 23,58 60,71 26,10 35,19 35,36 0,25 -3,26 -40,12 z"
            fill="#29594b" />
          <path
            d="m 1358,828 c -13,-10 -17,-37 -20,-131 -3,-109 -5,-120 -26,-137 -21,-18 -31,-60 -13,-60 16,0 61,42 76,70 16,31 22,270 7,270 -5,0 -15,-6 -24,-12 z"
            fill="#29594b" />
        </g>
      </svg>

      <text class="maintext smooth_anim" x="65%" y="50%" dominant-baseline="middle" text-anchor="middle">PrismarineJS</text>
      <text class="subtext smooth_anim" x="65%" y="65%" dominant-baseline="middle" text-anchor="middle">Check it out!</text>
    </svg>
  </a>
</svg>