assets/headlines/skills/testing/mocha.js.svg

<svg fill="none" viewBox="0 0 800 100" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
                /* Animationen */
                @keyframes complex-animation {
                    0% { text-shadow: none; transform: scale(1); opacity: 1; color: #fff; }
                    10% { text-shadow: 0 0 10px #fff, 0 0 20px #fa46bb, 0 0 30px #fa46bb, 0 0 40px #fa46bb; }
                    25% { text-shadow: none; }
                    40% { text-shadow: 0 0 5px #fff, 0 0 15px #117fed, 0 0 30px #117fed; }
                    100% { text-shadow: none; opacity: 1; color: #fff; }
                }

                @keyframes glitch-animation {
                    0%, 20%, 24%, 49%, 51%, 73%, 75%, 100% { opacity: 1; }
                    21%, 23%, 50%, 74% { opacity: 0.5; }
                }

                /* Container */
                .container {
                    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
                    display: flex;
                    align-items: flex-start; /* Elemente nach oben schieben */
                    justify-content: start;
                    width: 100%;
                    height: 100%;
                    background: transparent;
                    color: white;
                    overflow: hidden;
                    padding: 20px 60px 0 10px; /* Weniger Padding oben */
                    box-sizing: border-box;
                }

                /* Überschrift */
                h1 {
                    font-size: 60px; /* Textgröße anpassen */
                    color: #fff;
                    margin: 0;
                    padding: 0;
                    animation: complex-animation 30s ease-in-out infinite;
                    position: relative;
                    bottom: 10px;
                }

                /* Sterne */
                .stars {
                    display: flex;
                    align-items: center;
                    margin-left: 10px; /* Abstand zum Text */
                    position: relative;
                    bottom: 10px;
                }

                .stars-filled {
                    font-size: 30px; /* Größe der Sterne */
                    animation: glitch-animation 30s ease-in-out infinite;
                }

                .stars-empty {
                    font-size: 40px; /* Größe der Sterne */
                    position: relative;
                    top: 0;
                }
            </style>

            <div class="container">
                <h1>Mocha.js</h1>
                <div class="stars">
                    <div class="stars-filled">⭐️⭐️⭐️⭐️⭐️</div>
                    <!-- <div class="stars-empty">☆</div> -->
                </div>
            </div>
        </div>
    </foreignObject>
</svg>