Não é possível declarar dois pattern em uma tag html, se usa a | para criar diferentes opções. Com a opção do usuário poder colocar o CPF ou o CNPJ, o código fica assim:
<input name="cpf" id="cpf" class="campo__escrita campo__escrita--menor" required type="text" minlength="11" maxlength="14"
pattern="
\d{3}\.?\d{3}\.?\d{3}-?\d{2} |
\d{2}\.?\d{3}\.?\/?\d{4}-?\d{2}"
/>hoje, com a Alura e o Google Gemini
Olá Pedro!
Obrigado por compartilhar sua dúvida conosco. Realmente, não é possível declarar dois patterns em uma tag HTML. A solução que você encontrou utilizando a barra vertical (|) para criar diferentes opções é uma boa alternativa para permitir que o usuário possa inserir tanto o CPF quanto o CNPJ no mesmo campo.
Uma outra opção seria utilizar uma biblioteca JavaScript para validar o campo, como por exemplo a "jQuery Mask Plugin". Com ela, você pode criar uma máscara para o campo que permita a inserção tanto do CPF quanto do CNPJ e ainda fazer a validação do número inserido.
Espero ter ajudado e bons estudos!