Inline WebSVG doesn't have crisp lines? - html

Question

I have an svg background that starts as separated then in 3 secs of page load, is moved to form the background. You can see a large triangle from the start that has rather poor quality and is very choppy, what could be the cause of this?
Here is a Codepen link for example.
CSS
html,
body,
.avatar {
/* position: absolute; */
width: 100%;
/* height: 100%; */
display: block;
}
body {
background: -webkit-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* IE10 */
background: -o-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* W3C */
}
.avatar {
z-index: 800;
}
.avatar path {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transition: all 3s ease;
transition: all 3s ease;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
}
.avatar path:nth-of-type(4n+1) {
-webkit-animation: p1 3s ease 1;
animation: p1 3s ease 1;
}
.avatar path:nth-of-type(4n+2) {
-webkit-animation: p2 3s ease 1;
animation: p2 3s ease 1;
}
.avatar path:nth-of-type(4n+3) {
-webkit-animation: p3 3s ease 1;
animation: p3 3s ease 1;
}
.avatar path:nth-of-type(4n+4) {
-webkit-animation: p4 3s ease 1;
animation: p4 3s ease 1;
}
.hover {
position: absolute;
width: 40%;
height: 40vw;
top: 50%;
left: 30%;
margin-top: -20vw;
border-radius: 50%;
cursor: pointer;
z-index: 1000;
visibility: hidden;
-webkit-animation: waitforit 0 ease-in 3s 1 forwards;
animation: waitforit 0 ease-in 3s 1 forwards;
}
.hover:hover + .avatar path:nth-of-type(4n+1) {
-webkit-transform: translate(800%, 400%) rotate(-690deg) translateZ(0);
transform: translate(800%, 400%) rotate(-690deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+2) {
-webkit-transform: translate(-700%, 600%) rotate(-720deg) translateZ(0);
transform: translate(-700%, 600%) rotate(-720deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+3) {
-webkit-transform: translate(-900%, -500%) rotate(-820deg) translateZ(0);
transform: translate(-900%, -500%) rotate(-820deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+4) {
-webkit-transform: translate(700%, -800%) rotate(-950deg) translateZ(0);
transform: translate(700%, -800%) rotate(-950deg) translateZ(0);
}
p {
position: absolute;
bottom: 0.5em;
font-family: sans-serif;
font-weight: 100;
letter-spacing: 0.1em;
color: #fff;
border-left: 20px solid #fff;
padding: 2px 0 0 4px;
left: -50%;
-webkit-animation: infromleft 0.5s ease-in 1 forwards;
animation: infromleft 0.5s ease-in 1 forwards;
}
#-webkit-keyframes p1 {
0% {
-webkit-transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p1 {
0% {
-webkit-transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes p2 {
0% {
-webkit-transform: translate(400%, -900%) rotate(850deg) translateZ(0);
transform: translate(400%, -900%) rotate(850deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p2 {
0% {
-webkit-transform: translate(400%, -900%) rotate(850deg) translateZ(0);
transform: translate(400%, -900%) rotate(850deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes p3 {
0% {
-webkit-transform: translate(500%, 900%) rotate(325deg) translateZ(0);
transform: translate(500%, 900%) rotate(325deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p3 {
0% {
-webkit-transform: translate(500%, 900%) rotate(325deg) translateZ(0);
transform: translate(500%, 900%) rotate(325deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes p4 {
0% {
-webkit-transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p4 {
0% {
-webkit-transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes waitforit {
0% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
#keyframes waitforit {
0% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
#-webkit-keyframes infromleft {
0% {
left: -50%;
}
100% {
left: 0;
}
}
#keyframes infromleft {
0% {
left: -50%;
}
100% {
left: 0;
}
}
Thanks for the help everyone.

Answer 1

Alright, so #Sirko pointed out it was using a PNG as a source, so this is partly credited to him.
I was changing the colors of my triangles earlier on in AI, and I clicked the gradient mesh tool and added extra points to my triangle, which in turn caused that single triangle to be treated as a .png.
Thanks for the help everyone, appreciate it!