Animated Illustration Hero

<!DOCTYPE html>
<title>My Example</title>    

<style>
    :root {
        --aih-padding: 3rem 1.5rem;
        --aih-bg-color: #fff;
        --aih-text-color: #333;
        --aih-headline-color: #000;
        --aih-cta-bg: #6366f1;
        --aih-cta-hover-bg: #4f46e5;
        --aih-cta-text-color: #fff;
        --aih-max-width: 1100px;
        --aih-gap: 2rem;
        --aih-accent-1: #6366f1;
        --aih-accent-2: #38bdf8;
    }
    .anim-svg-hero {
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
        width: 100%;
        background-color: var(--aih-bg-color);
        color: var(--aih-text-color);
        padding: var(--aih-padding);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    .anim-svg-hero * {
         box-sizing: border-box;
    }
    .anim-svg-hero-container {
        width: 100%;
        max-width: var(--aih-max-width);
        display: flex;
        flex-direction: column;
        gap: var(--aih-gap);
    }
    .anim-svg-hero-content {
        text-align: center;
    }
    .anim-svg-hero-title {
        margin: 0 0 1rem 0;
        font-size: clamp(2.5rem, 6vw, 3.5rem);
        color: var(--aih-headline-color);
        font-weight: 800;
        line-height: 1.2;
    }
    .anim-svg-hero-description {
        margin: 0 auto 2.5rem auto;
        font-size: 1.15rem;
        line-height: 1.6;
        max-width: 500px;
    }
    .anim-svg-hero-cta {
        display: inline-block;
        background-color: var(--aih-cta-bg);
        color: var(--aih-cta-text-color);
        padding: 1rem 2.2rem;
        border-radius: 8px;
        border: none;
        font-size: 1.05rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .anim-svg-hero-cta:hover {
        background-color: var(--aih-cta-hover-bg);
    }
    .anim-svg-hero-illustration {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 300px;
    }
    .anim-svg-hero-illustration svg {
        width: 100%;
        max-width: 450px;
        height: auto;
    }
    .anim-svg-hero-illustration .draw-line {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: draw-me 3s ease-in-out forwards infinite;
    }
    .anim-svg-hero-illustration .draw-line-delay1 { animation-delay: 0.2s; }
    .anim-svg-hero-illustration .draw-line-delay2 { animation-delay: 0.4s; }
    
    .anim-svg-hero-illustration .fade-in {
        opacity: 0;
        animation: fade-me-in 1s ease-in forwards infinite;
        animation-delay: 1s;
    }
     .anim-svg-hero-illustration .fade-in-delay1 { animation-delay: 1.2s; }

@keyframes draw-me {
        50%, 100% { stroke-dashoffset: 0; }
    }
    @keyframes fade-me-in {
        to { opacity: 1; }
    }

@media (min-width: 768px) {
        .anim-svg-hero {
             padding-top: 5rem;
             padding-bottom: 5rem;
        }
        .anim-svg-hero-container {
            flex-direction: row-reverse; /* Puts illustration on the left */
            align-items: center;
        }
        .anim-svg-hero-content {
            flex-basis: 50%;
            text-align: left;
            padding-left: 1.5rem;
        }
        .anim-svg-hero-description, .anim-svg-hero-cta {
            margin-left: 0;
            margin-right: 0;
        }
        .anim-svg-hero-illustration {
            flex-basis: 50%;
        }
    }
</style>

<section class="anim-svg-hero">
    <div class="anim-svg-hero-container">
        <div class="anim-svg-hero-content">
            <h1 class="anim-svg-hero-title">Sync Your Ideas with Reality</h1>
            <p class="anim-svg-hero-description">
                MindMesh is the all-in-one platform for creative teams to brainstorm, collaborate, and bring their next big project to life seamlessly.
            </p>
            <a href="#" role="button" class="anim-svg-hero-cta">Sign Up Free</a>
        </div>
        <div class="anim-svg-hero-illustration">
            <svg viewBox="0 0 459 397" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="svg-anim-title">
                <title id="svg-anim-title">An animated illustration of interconnected nodes representing collaboration.</title>
                <path class="draw-line" d="M38 102L188 202L38 302" stroke="var(--aih-accent-2)" stroke-width="12" stroke-linecap="round"/>
                <path class="draw-line draw-line-delay1" d="M188 202L358 48" stroke="var(--aih-accent-2)" stroke-width="12" stroke-linecap="round"/>
                <path class="draw-line draw-line-delay2" d="M188 202L358 354" stroke="var(--aih-accent-2)" stroke-width="12" stroke-linecap="round"/>
                <circle class="fade-in" cx="38" cy="102" r="38" fill="var(--aih-accent-1)"/>
                <circle class="fade-in" cx="38" cy="302" r="28" fill="var(--aih-accent-1)"/>
                <circle class="fade-in" cx="358" cy="48" r="28" fill="var(--aih-accent-1)"/>
                <circle class="fade-in" cx="358" cy="354" r="38" fill="var(--aih-accent-1)"/>
                <circle class="fade-in fade-in-delay1" cx="188" cy="202" r="54" fill="var(--aih-accent-1)"/>
            </svg>
        </div>
    </div>
</section>