img_to_txt.svg

<svg width="500" height="112" viewBox="0 0 500 112" fill="none" xmlns="http://www.w3.org/2000/svg">


<style>

#blocker {
    transform: translateY(10%) translateX(16%);
    animation: type 1.5s;
}

#cursor {
    opacity: 1;

    
    animation: type 1.5s 1, 
               pulse 1.45s 1.2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    76% {
        opacity: 0;
    }

    85% {
        opacity: 0;
    }

    100% {
        opacity 1;
    }
}

@keyframes move {
    0% {
    }

    100% {
        width: 0;
        transform: translateY(10%) translateX(100%);
    }
}


@keyframes type {
    0% {
        transform: translateX(-76%); 
    }

    3% {
        transform: translateX(-76%); 
    }

    10% {
        transform: translateX(-69%); 
    }

    13% {
        transform: translateX(-68.8%); 
    }

    20% {
        transform: translateX(-61.5%); 
    }

    23% {
        transform: translateX(-61.3%); 
    }

    30% {
        transform: translateX(-54%);
    }

    33% {
        transform: translateX(-53.8%); 
    }

    40% {
        transform: translateX(-46.5%); 
    }

    43% {
        transform: translateX(-46.3%); 
    }

    50% {
        transform: translateX(-39%); 
    }

    53% {
        transform: translateX(-38.3%); 
    }

    60% {
        transform: translateX(-31.5%); 
    }

    63% {
        transform: translateX(-31.3%); 
    }


    70% {
        transform: translateX(-24%); 
    }

    73% {
        transform: translateX(-23.8%); 
    }

    80% {
        transform: translateX(-16.5%); 
    }

    83% {
        transform: translateX(-16.3%); 
    }

    90% {
        transform: translateX(-9%); 
    }

    93% {
        transform: translateX(-8.8%); 
    }

    100% {
        opacity 1;
    }
}
</style>


<rect width="500" height="112" rx="15" fill="#2B2B2B"/>


<g filter="url(#filter0_d)">
<path d="M59.25 77V45.625H64.625V77H59.25ZM46.25 77V72.1875H59.875V77H46.25ZM64 77V72.1875H75.1875V77H64ZM48.125 48.6875V43.875H64.625V48.6875H48.125ZM61.6562 37.625C60.5312 37.625 59.5625 37.2292 58.75 36.4375C57.9375 35.625 57.5312 34.6562 57.5312 33.5312C57.5312 32.3854 57.9375 31.4167 58.75 30.625C59.5625 29.8125 60.5312 29.4062 61.6562 29.4062C62.8021 29.4062 63.7708 29.8125 64.5625 30.625C65.375 31.4167 65.7812 32.3854 65.7812 33.5312C65.7812 34.6562 65.375 35.625 64.5625 36.4375C63.7708 37.2292 62.8021 37.625 61.6562 37.625ZM106.844 77V51.6875C106.844 48.9167 105.771 47.5312 103.625 47.5312C100.958 47.5312 99.625 49.2708 99.625 52.75L97.375 48H99.8125C99.9792 46.6042 100.542 45.4688 101.5 44.5938C102.479 43.6979 103.854 43.25 105.625 43.25C107.896 43.25 109.562 43.875 110.625 45.125C111.708 46.375 112.25 48.3542 112.25 51.0625V77H106.844ZM82.25 77V43.875H87L87.6562 50.875V77H82.25ZM94.875 77V51.0625C94.875 48.7083 93.7812 47.5312 91.5938 47.5312C88.9688 47.5312 87.6562 49.2708 87.6562 52.75L85.7188 48H87.7812C88.1979 44.8333 90.1979 43.25 93.7812 43.25C95.6354 43.25 97.0729 43.8438 98.0938 45.0312C99.1146 46.2188 99.625 48.0208 99.625 50.4375V77H94.875ZM121.938 91.9375L121.688 86.9688L132 86.6562C135.688 86.5312 138.375 85.5 140.062 83.5625C141.75 81.6458 142.594 78.8125 142.594 75.0625V51.0938L143.125 43.875H148V74.0625C148 79.9583 146.677 84.3125 144.031 87.125C141.385 89.9375 137.167 91.4375 131.375 91.625L121.938 91.9375ZM132.469 77.625C128.135 77.625 124.844 76.1979 122.594 73.3438C120.365 70.4896 119.25 66.2917 119.25 60.75C119.25 55 120.375 50.6458 122.625 47.6875C124.875 44.7292 128.177 43.25 132.531 43.25C135.302 43.25 137.531 43.8646 139.219 45.0938C140.927 46.3229 141.958 48.0729 142.312 50.3438H144.75L142.594 59.625C142.594 55.7917 141.833 52.8958 140.312 50.9375C138.812 48.9583 136.583 47.9688 133.625 47.9688C130.667 47.9688 128.427 49.0521 126.906 51.2188C125.385 53.3646 124.625 56.5417 124.625 60.75C124.625 64.75 125.385 67.7812 126.906 69.8438C128.448 71.8854 130.698 72.9062 133.656 72.9062C136.594 72.9062 138.812 71.9271 140.312 69.9688C141.833 67.9896 142.594 65.0833 142.594 61.25L144.844 70.4062H142.094C141.781 72.6562 140.802 74.4271 139.156 75.7188C137.51 76.9896 135.281 77.625 132.469 77.625ZM156.625 81.8125V77H187.875V81.8125H156.625ZM215.75 77.625C211.104 77.625 207.708 76.5625 205.562 74.4375C203.438 72.2917 202.375 68.9479 202.375 64.4062V58.875H207.75V64.1875C207.75 67.1042 208.438 69.2604 209.812 70.6562C211.188 72.0312 213.375 72.7188 216.375 72.7188C217.5 72.7188 218.635 72.6667 219.781 72.5625C220.948 72.4375 222.208 72.2708 223.562 72.0625L224.188 76.875C222.771 77.125 221.385 77.3125 220.031 77.4375C218.698 77.5625 217.271 77.625 215.75 77.625ZM202.375 61.375V33.875H207.75V61.375H202.375ZM193.438 48.6875V43.875H222.938V48.6875H193.438ZM247.25 77.625C242.75 77.625 239.25 76.125 236.75 73.125C234.25 70.125 233 65.8958 233 60.4375C233 54.9583 234.25 50.7292 236.75 47.75C239.25 44.75 242.75 43.25 247.25 43.25C251.771 43.25 255.271 44.75 257.75 47.75C260.25 50.7292 261.5 54.9583 261.5 60.4375C261.5 65.8958 260.25 70.125 257.75 73.125C255.271 76.125 251.771 77.625 247.25 77.625ZM247.25 72.7188C250.021 72.7188 252.156 71.6562 253.656 69.5312C255.156 67.3854 255.906 64.3542 255.906 60.4375C255.906 56.5208 255.156 53.5 253.656 51.375C252.156 49.2292 250.021 48.1562 247.25 48.1562C244.479 48.1562 242.344 49.2292 240.844 51.375C239.344 53.5 238.594 56.5208 238.594 60.4375C238.594 64.3542 239.344 67.3854 240.844 69.5312C242.344 71.6562 244.479 72.7188 247.25 72.7188ZM269.125 81.8125V77H300.375V81.8125H269.125ZM328.25 77.625C323.604 77.625 320.208 76.5625 318.062 74.4375C315.938 72.2917 314.875 68.9479 314.875 64.4062V58.875H320.25V64.1875C320.25 67.1042 320.938 69.2604 322.312 70.6562C323.688 72.0312 325.875 72.7188 328.875 72.7188C330 72.7188 331.135 72.6667 332.281 72.5625C333.448 72.4375 334.708 72.2708 336.062 72.0625L336.688 76.875C335.271 77.125 333.885 77.3125 332.531 77.4375C331.198 77.5625 329.771 77.625 328.25 77.625ZM314.875 61.375V33.875H320.25V61.375H314.875ZM305.938 48.6875V43.875H335.438V48.6875H305.938ZM344.562 77L357.969 59L368.719 43.875H374.938L361.25 62.3438L350.781 77H344.562ZM368.719 77L358.031 62.2812L344.562 43.875H350.781L361.594 58.9375L374.938 77H368.719ZM403.25 77.625C398.604 77.625 395.208 76.5625 393.062 74.4375C390.938 72.2917 389.875 68.9479 389.875 64.4062V58.875H395.25V64.1875C395.25 67.1042 395.938 69.2604 397.312 70.6562C398.688 72.0312 400.875 72.7188 403.875 72.7188C405 72.7188 406.135 72.6667 407.281 72.5625C408.448 72.4375 409.708 72.2708 411.062 72.0625L411.688 76.875C410.271 77.125 408.885 77.3125 407.531 77.4375C406.198 77.5625 404.771 77.625 403.25 77.625ZM389.875 61.375V33.875H395.25V61.375H389.875ZM380.938 48.6875V43.875H410.438V48.6875H380.938Z" fill="#969696"/>
</g>


<rect id="blocker" x="424" y="18" width="500" height="75" fill="#2B2B2B"/>


<defs>
<filter id="filter0_d" x="37.25" y="21.4062" width="383.438" height="80.5312" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="4.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="420" y="15" width="43" height="83" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>


<g id="cursor" filter="url(#filter1_d)">
<rect  x="424" y="18" width="35" height="75" fill="#969696" shape-rendering="crispEdges"/>
</g>

</svg>