style.css

* {
    margin: 0;
    padding: 0;
    user-select: none;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #06181f;
    transition: 2s;
}

.container {
    position: relative;
    width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.container .icon {
    width: 275px;
    cursor: default;
    text-align: center;
    margin: 0px 25px;
}

.container .icon path {
    fill: transparent;
    stroke: #31e8ff;
    stroke-width: 10;
}

.title {
    visibility: hidden;
    font-family: 'Akaya Kanadaka', cursive, sans-serif;
    font-size: 55px;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 50px;
}

.container .icon.unicorn path {
    stroke-dasharray: 1560;
    stroke-dashoffset: 0;
}

.container .icon.unicorn:hover path {
    animation: animate-unicorn 2s linear forwards;
}

@keyframes animate-unicorn {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 1560;
    }
    80% {
        stroke-dashoffset: 3120;
        fill: transparent;
    }
    100% {
        stroke-dashoffset: 3120;
        fill: black;
        stroke: yellow;
    }
}

.container .icon.sun path {
    stroke-dasharray: 1810;
    stroke-dashoffset: 0;
}

.container .icon.sun:hover path {
    animation: animate-sun 2s linear forwards;
}

@keyframes animate-sun {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 1810;
    }
    80% {
        stroke-dashoffset: 3620;
        fill: transparent;
    }
    100% {
        stroke-dashoffset: 3620;
        fill: #e6ff05;
        stroke: #eeff05;
    }
}

#title3 {
    font-size: 45px;
    font-family: 'Cinzel', serif;
    font-weight: bold;
}

.container .icon.eagle path {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    stroke: #31e8ff;
    stroke-width: 145;
}

.container .icon.eagle:hover path {
    animation: animate-eagle 2s linear forwards;
}

@keyframes animate-eagle {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 250;
    }
    80% {
        stroke-dashoffset: 500;
        fill: transparent;
    }
    100% {
        stroke-dashoffset: 500;
        fill: white;
        stroke: black;
    }
}

.container .icon.drakkar path {
    stroke-dasharray: 2560;
    stroke-dashoffset: 0;
}

.container .icon.drakkar {
    transform: translateX(-50%);
}

.icon.drakkar {
    margin: 0 125px;
}

#title4 {
    position: absolute;
    bottom: 0;
    transform: translateX(50%);
}

.container .icon.drakkar:hover path {
    animation: animate-drakkar 2s linear forwards;
}

@keyframes animate-drakkar {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 1560;
    }
    80% {
        stroke-dashoffset: 2560;
    }
    100% {
        stroke-dashoffset: 2560;
        fill: white;
    }
}

.container .icon.helmet path {
    stroke-dasharray: 3680;
    stroke-dashoffset: 0;
}

.container .icon.helmet:hover path {
    animation: animate-helmet 2s linear forwards;
}

@keyframes animate-helmet {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 1560;
    }
    80% {
        stroke-dashoffset: 2560;
    }
    100% {
        stroke-dashoffset: 3680;
        fill: white;
        stroke: yellow;
    }
}

#title5 {
    font-family: 'My Soul', cursive;
    text-transform: capitalize;
    font-size: 75px;
}

.container .icon.axes path {
    stroke-dasharray: 4000;
    stroke-dashoffset: 0;
}

.container .icon.axes svg {
    width: 312px;
    height: 312px;
}

.container .icon.axes:hover path {
    animation: animate-axes 1s ease-in-out forwards;
}

#title6 {
    margin-top: 20px;
    color: white;
}

@keyframes animate-axes {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 1560;
    }
    80% {
        stroke-dashoffset: 2560;
    }
    100% {
        stroke-dashoffset: 4000;
        fill: white;
        stroke: rgb(0, 0, 0);
    }
}

.container .icon.fish svg, 
.container .icon.lion svg,
.container .icon.dragon svg  {
    width: 350px;
    height: 350px;
}

.container .icon.fish path {
    stroke-width: 60;
}

.container .icon.fish:hover path {
    animation: animate-fish 1s linear forwards;
}

@keyframes animate-fish {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 1560;
    }
    80% {
        stroke-dashoffset: 2560;
    }
    100% {
        stroke-dashoffset: 4000;
        fill: blue;
        stroke: black;
        stroke-width: 10;
    }
}

.container .icon.lion:hover path {
    animation: animate-lion 1s linear forwards;
}

@keyframes animate-lion {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 1560;
    }
    80% {
        stroke-dashoffset: 2560;
    }
    100% {
        stroke-dashoffset: 4000;
        fill: yellow;
        stroke: black;
    }
}

.container .icon.dragon:hover path {
    animation: animate-dragon 1s linear forwards;
}

#title7, #title8, #title9, #title12, #title14 {
    margin-top: 10px;
    color: white;
}

@keyframes animate-dragon {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 1560;
    }
    80% {
        stroke-dashoffset: 2560;
    }
    100% {
        stroke-dashoffset: 4000;
        fill: yellow;
        stroke: black;
    }
}

.container .icon.temeria path {
    stroke: none;
}

.container .icon.temeria:hover path {
    animation: animate-temeria 1s linear forwards;
}

#title10 {
    margin: 10px;
    font-size: 47px;
    color: white;
}

@keyframes animate-temeria {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 1560;
    }
    80% {
        stroke-dashoffset: 2560;
    }
    100% {
        stroke-dashoffset: 4000;
        fill: white;
        stroke: black;
    }
}

.container .icon.nazairRose path {
    stroke-dasharray: 2550;
    stroke-dashoffset: 0;
}

#title11 {
    margin: 18px 0;
    color: white;
    text-transform: capitalize;
    font-family: 'My Soul', cursive;
}

.container .icon.nazairRose:hover path {
    animation: animate-rose 2.5s linear forwards;
}

@keyframes animate-rose {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 1560;
    }
    80% {
        stroke-dashoffset: 2560;
    }
    100% {
        stroke-dashoffset: 2560;
        fill: blue;
        stroke: white;
    }
}

.container .icon.elves path {
    stroke-dasharray: 2550;
    stroke-dashoffset: 0;
}

.container .icon.elves:hover path {
    animation: animate-arrows 1.5s linear forwards;
}

@keyframes animate-arrows {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 1560;
    }
    80% {
        stroke-dashoffset: 2560;
    }
    100% {
        stroke-dashoffset: 2560;
        fill: yellow;
    }
}

#path11960, #path11962 {
    display: none;
}

.container .icon.arm path {
    stroke-width: 1;
}

.container .icon.arm:hover path {
    animation: animate-arm 1s linear forwards;
}

@keyframes animate-arm {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 1560;
    }
    80% {
        stroke-dashoffset: 2560;
    }
    100% {
        stroke-dashoffset: 4000;
        fill: red;
        stroke: white;
        stroke-width: 2;
    }
}

.container .icon.dragon2 path {
    stroke-dashoffset: 0;
}

.container .icon.dragon2:hover path {
    animation: animate-dragon2 1.5s linear forwards;
}

@keyframes animate-dragon2 {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 1560;
    }
    80% {
        stroke-dashoffset: 2560;
    }
    100% {
        stroke-dashoffset: 2560;
        fill: red;
        stroke: #fff;
    }
}

@media screen and (min-width: 300px) and (max-width: 800px) {
    .container {
        width: 100%;
        margin-top: 40px;
        flex-direction: column;
        overflow: hidden;
    }

    .icon.drakkar {
        margin: 55px 0px;
    }
    
    .container .icon.helmet svg {
        width: 350px;
        height: 350px;
    }
}