Dove c’è un coder, c’è caffé

SVG "single line drawing"

Lo ripetiamo: l’unico limite è la fantasia. Effetti particolari e di grande impatto? Nessun problema, a patto di predisporre appositamente l’immagine durante la sua creazione. Realizza una SVG in cui il bordo sia un’unica lunga linea aperta e potrai implementare il cosidetto “single line drawing”, sperimentando con la proprietà stroke-dashoffset.

<path id="beer" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M231..."/>

<style>
.draw {
stroke-dasharray: 3200;
animation: draw 6s linear forwards;
}
@keyframes draw {
from {
opacity: 1;
stroke-dashoffset: 3200;
}
to {
opacity: 1;
stroke-dashoffset: 0;
}
}
</style>