how can I convert this code so I can download the pfp on my phone and use it as a pfp: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dnmthz Metallic Logo with Spiky Chain Background</title>
<!-- Load the Metal Mania font from Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<style>
    body {
        background-color: #000; /* Black background */
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    /* Container for the entire effect */
    .container {
        position: relative;
        inline-size: 100vw;
        block-size: 100vh;
        overflow: hidden;
    }

    /* Background cross */
    .cross {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        inline-size: 200px;
        block-size: 200px;
        background: linear-gradient(135deg, #555, #aaa);
        transform: translate(-50%, -50%) rotate(45deg);
        box-shadow: 0 0 20px #777;
    }

    .cross::before,
    .cross::after {
        content: '';
        position: absolute;
        inline-size: 200px;
        block-size: 200px;
        background: inherit;
        inset-inline-start: 50%;
        inset-block-start: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
        box-shadow: inherit;
    }

    /* SVG Spiky Chain */
    .chain {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 100%;
        block-size: 100%;
        overflow: hidden;
    }

    /* Metallic Text */
    .metallic-text {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, -50%);
        font-size: 100px;
        font-family: 'Metal Mania', sans-serif;
        text-transform: uppercase;
        color: silver;
        letter-spacing: 5px;
        text-shadow:
            0 0 5px #fff,
            0 0 10px #fff,
            0 0 20px #fff,
            0 0 40px silver,
            0 0 80px silver,
            0 0 90px silver,
            0 0 100px silver,
            0 0 150px silver;
        animation: flicker 3s infinite;
        z-index: 2;
    }

    @keyframes flicker {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.8;
        }
        75% {
            opacity: 1;
        }
    }

    /* Animate the cross */
    @keyframes rotateCross {
        from {
            transform: translate(-50%, -50%) rotate(45deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(405deg);
        }
    }

    .cross {
        animation: rotateCross 20s linear infinite;
    }

    /* Spiky Chain Animation */
    @keyframes moveChain {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-100%);
        }
    }

    .chain path {
        animation: moveChain 10s linear infinite;
    }
</style>
</head>
<body>

<div class="container">
    <div class="cross"></div>
    <svg class="chain" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 600" preserveAspectRatio="xMinYMin slice">
        <!-- Spiky chain pattern -->
        <defs>
            <pattern id="chainPattern" width="200" height="200" patternUnits="userSpaceOnUse">
                <polygon points="100,0 120,30 100,60 80,30" fill="silver" />
                <polygon points="0,100 30,80 60,100 30,120" fill="silver" />
                <polygon points="100,200 80,170 100,140 120,170" fill="silver" />
                <polygon points="200,100 170,80 140,100 170,120" fill="silver" />
            </pattern>
        </defs>
        <rect width="1600" height="600" fill="url(#chainPattern)"></rect>
    </svg>
    <div class="metallic-text">dnmthz</div>
</div>

</body>
</html>