team bradford

by mrjordy

HTML

<div class = "testbackground">

</div>
<div class = "bradtest">
<svg class="BLimage" preserveAspectRatio="xMidYMid" width="533" height="800" viewBox="0 0 533 800">
<a href="https://www.google.com" target="_blank">
  <path d="M284.688,486.016 C278.738,485.364 282.632,487.201 277.308,483.905 C271.983,480.609 274.893,472.511 277.835,469.657 C280.777,466.803 287.169,463.429 297.341,473.351 C307.513,483.273 290.639,486.667 284.688,486.016 ZM315.266,318.734 C319.208,313.265 336.873,315.679 345.844,314.512 C354.814,313.345 369.047,311.575 377.476,312.401 C385.905,313.227 401.851,324.518 409.108,330.343 C416.365,336.168 416.045,345.668 412.798,349.340 C409.552,353.012 396.488,345.668 385.911,341.953 C375.334,338.237 355.483,339.039 341.099,338.259 C326.715,337.478 304.195,341.425 304.195,341.425 C304.195,341.425 307.854,333.357 306.831,331.398 C305.808,329.440 311.324,324.202 315.266,318.734 ZM313.684,394.195 C312.522,395.608 306.945,393.771 305.776,393.140 C304.608,392.509 300.278,393.029 298.396,391.557 C296.513,390.084 299.043,389.074 301.032,385.752 C303.020,382.430 308.180,367.940 309.994,366.227 C311.808,364.514 318.428,359.659 330.028,357.784 C341.628,355.908 354.481,359.165 362.187,359.894 C369.893,360.624 376.582,364.479 380.112,366.755 C383.642,369.030 390.040,379.310 391.710,383.113 C393.380,386.917 394.346,393.140 394.346,393.140 C394.346,393.140 384.114,390.557 382.221,389.974 C380.327,389.390 371.149,389.974 371.149,389.974 C371.149,389.974 374.113,384.749 374.313,383.113 C374.512,381.478 372.137,379.805 370.622,378.364 C369.107,376.923 366.581,375.479 364.823,374.670 C363.065,373.861 362.187,373.615 362.187,373.615 C362.187,373.615 361.766,375.850 362.187,377.309 C362.608,378.768 361.519,382.647 361.133,385.224 C360.746,387.801 356.388,391.029 356.388,391.029 L334.245,389.446 C334.245,389.446 330.651,387.838 328.973,386.280 C327.295,384.721 329.046,378.692 329.500,376.253 C329.955,373.814 332.503,376.591 334.245,376.253 C335.987,375.915 335.220,374.243...

CSS

.testbackground {
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  background: rgba(100,20,0,.1);
  border-radius:100px;

}
.bradtest {

}
.BLimage {
    margin-left: calc(50% - 260px);
    height: calc(100vh - 130px);
}

.BL {
  fill-rule: evenodd;
  animation-name: BLDisco;
  animation-duration: 5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes BLDisco {
  10% {
    fill: red;
  }
  20% {
    fill: orange;
  }
  40% {
    fill: green;
  }
  60% {
    fill: blue;
  }
  80% {
    fill: purple;
  }
  10% {
    color: red;
  }
  20% {
    color: orange;
  }
  40% {
    color: green;
  }
  60% {
    color: blue;
  }
  80% {
    color: purple;
  }
}

.TeamBrad {
    color: black;
    font-weight: 900;
    font-size: 50px;
    font-family: kalinga;
    line-height: 50px;
    text-align: center;
    animation-name: BLDisco;
    animation-duration: 5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}