Come Animare una “Linea” SVG
Scommetto che tutti voi abbiate visto quel piccolo trucco in cui un percorso SVG viene animato per sembrare che si stia disegnando da solo.
È fantastico!!
Jake Archibald ha aperto la strada alla tecnica e ha un ottimo post sul suo blog a riguardo.
Benissimo, oggi è Venerdì e sento profumo di tutorial, quindi, vedremo come realizzare insieme questo "spettacolare" effetto, partendo da un'immagine SVG e scrivendo qualche riga di codice.
Come di tutti i miei tutorial, potete vedere la demo QUI oppure scaricare il codice da QUI.
1 - Immagine SVG
Visto che siamo oramai in tema natalizio, questa è l'immagine che utilizzeremo nel tutorial.
2 - Attributo "Stroke"
L'immagine svg da voi creata, dovrà avere l'attributo "stroke", qualora non l'avesse, potrete effettuare voi stessi l'inserimento del parametro, con qualsiasi editor testuale
3 - HTML
Una volta scelta la nostra immagine, e verificato che abbia i requisiti suddetti, iniziamo con il creare la nostra struttura HTML base ed inserire all'interno del tag body, il codice nella nostra immagine SVG:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>TUTORIAL - Come Animare una "Linea" SVG</title>
</head>
<body>
<svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 802.31 287.97"><defs></defs><title>merry_christmas</title><path fill="#fff" stroke="#000" stroke-width="2px" d="M806.5,114.37,787,115.84l4.11,6.61-7.09-3-2.72,28.8-.85.07-2.86-28.88-7.26,3.2,4-6.35L757.26,114l-.14-.76L774,110.91,768.17,103l9.45,5.48,2.9-20.31.79,0L784,108.46l9.39-5.44L787.73,111l18.78,2.41Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M416.38,106.58C440,94.24,463,82.08,486.07,70.22c21.7-11.13,44-20.84,68.18-25.2,16.43-3,32.82-3.12,48.82,2.68a35.81,35.81,0,0,1,24,33c.4,11.08-7.47,24-17,27.94s-21.43,1.08-28.85-6.87c-6.21-6.65-7.44-17.95-2.85-26.13,4.17-7.43,12.8-11.49,20.72-9.75,4.66,1,6.41,2.87,7.11,7.5-12.73,4.43-18,9.87-17.82,18.36.1,4.46,4,8.47,9.72,10,7.2,2,13.51-.59,17.94-7.29-3.16.69-6.45,2.3-9.38,1.8a13.91,13.91,0,0,1-7.83-5c-1.06-1.37-.4-4.89.64-6.81.84-1.54,3.36-2.75,5.25-2.95,1.34-.14,3.45,1.34,4.16,2.66.57,1.07,0,3.84-.85,4.34-1.7.94-4,.8-6.62,1.19,1.16,2.56,3.55,3.65,7,3.06,9-1.56,14.49-10.51,11.71-19.73-2.08-6.88-5.88-12.46-12.58-16-15.65-8.33-32.25-8.64-49.19-6.42-5.44.71-10.79,2.05-16.21,3-3,.5-4.23,1.85-3.69,5.06.94,5.56,1.53,11.17,2.38,17.61l8.37-4.8.44.45-5.23,6.79,16.46,2.17.14.85-17,2.3,3.89,6.4-7.11-3.21-2.7,28.49-.88.11-2.88-28.49-8.13,3.59,5.27-6.69-17.39-2.49,0-.83,16.72-2.12-4.79-6.41.41-.7,8,4.73,2.82-21a41.83,41.83,0,0,0-4.15.69c-23.73,6.66-45.63,17.62-67.41,28.82-15.26,7.84-30.45,15.81-45.74,23.59-2.53,1.29-3.71,2.71-3.68,5.69.17,16.5.24,33,.08,49.5,0,3.87,1.33,4.89,4.94,4.7,4.78-.26,9.59-.06,15.26-.06,0-5.38,0-10.13,0-14.88,0-4.17,0-8.33,0-12.5,0-4.44.69-9.21-4.68-12h21.3c-7.21,3.28-5.94,8.53-5.95,13.32,0,20.17-.13,40.33.11,60.5,0,3.26,1.69,6.5,2.64,9.92H430.38c6.35-2.6,6.31-6.9,6.28-11.27-.07-8.33-.1-16.67,0-25,0-2.94-.86-4.27-4-4.12-4.16.19-8.33.12-12.5,0-2.42-.06-3.71.64-3.69,3.36.09,10-.21,20,.23,30,.11,2.48,2.45,4.87,3.84,7.44h-19c5.5-3.16,4.36-8.43,4.37-13.25q0-39.5,0-79c0-2,0-3.92,0-6-10,2.08-19.32,4.33-28.76,5.93-14.7,2.5-29.22,2-43.11-4.2-17.1-7.69-25.49-21.7-23.57-39.38,1.81-16.72,13.83-29.13,31.74-32.75,33.73-6.83,62.27,12,71,46.92C414.51,96.13,415.27,101,416.38,106.58ZM352.73,51.73c-1.91.16-4.92.27-7.88.7-15.37,2.22-26.07,11.28-28.54,24.06-3.61,18.71,8.19,35.78,28.14,40.85,16.77,4.26,33.16,1.37,49.3-3,14.72-4,12.73-1.74,10.7-16.12C400.26,68.63,381.56,51.68,352.73,51.73Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M30,190.75c6,10.62,12.19,14.63,19.62,12.85,4.15-1,7.21-5.35,7.51-10.7a13.52,13.52,0,0,0-9.36-14.06c.9,3.05,2.56,6.35,2.7,9.72a6.68,6.68,0,0,1-8.89,6.61c-3-1-5-3.26-3.78-6.46.5-1.26,3-1.72,4.63-2.55l3,6.2c2.18-1.12,2.83-3.52,1.62-6.76-2.65-7.09-10.13-10.55-17.62-7.89a20.07,20.07,0,0,0-11.91,10.72C8.29,208,16.32,231.59,36.24,243.06a65.65,65.65,0,0,0,28.47,8.51c21.19,1.52,56.17-5.73,76-15.76-11.58-19.63-13.68-41.91-18.23-63.87l-9.29,36-1.11.25L99.17,170.9l-1,0a33.13,33.13,0,0,0-.69,3.53c-.8,9-1.37,17.94-2.4,26.87-.54,4.71-.79,8.91,4.46,11.53H86.22c6.15-2.72,5.86-8.27,6.32-13.47q2.83-32.1,5.67-64.2c.24-2.77.26-5.56.41-9l-18.39,2.12,3.33,6L76.87,132l-2.62,28-.94.08-2.82-28.42-7.64,3.58,4.5-6.66L49,126.06l0-.57,17.91-2.21-5.49-7.74,9.22,5.15,2.85-20,.85.06,2.62,19.9,9.45-5.27-5.72,7.87c5.56.69,10.44,1.48,15.36,1.83,2.79.2,4,1.34,4.81,3.95,4.7,14.4,9.61,28.73,14.46,43.08.29.87.76,1.69,1.65,3.63l12.47-49,1.26.12c.92,8.69,1.62,17.41,2.81,26.06,2.88,20.93,5.82,41.85,9.13,62.71.74,4.68,3.1,9.1,4.73,13.63,1.13,3.16,2.93,3.59,6.17,2.43,9.71-3.48,19.41-7.29,29.43-9.47a93.14,93.14,0,0,1,25.2-1.77c11.18.68,17.68,6.28,19.71,14.7,2.14,8.89-2.25,19.7-10.81,25-13.84,8.64-28.65,9.1-43.68,3.71a56.4,56.4,0,0,1-26.69-20.25c-2.36-3.21-4.39-3.53-7.85-2.23-18,6.75-36.16,12.64-55.44,14.29-17,1.45-33.63.24-49.24-7.48C13.75,238.2,3.34,217.09,8.51,196.52c5-20,23.64-30.42,41.75-23.37,10.12,3.94,15.48,12.86,14,23.27C62.62,207.69,55.7,214.86,45.38,216c-10.56,1.12-19.39-5.79-20.47-16C24.46,195.7,25.88,192.51,30,190.75Zm122.63,45.68c.62,1.24,1,2.14,1.49,3,9.34,15.34,35.56,25.44,52.69,19.82a31.19,31.19,0,0,0,11.75-7.12c10.29-10.11,6.07-25.08-7.9-28.63a43,43,0,0,0-11.36-1.07C182.51,222.73,168,230.47,152.61,236.43Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M471.62,175.2c0,10.48-.21,21,.17,31.43.08,2.17,2.34,4.26,3.81,6.75H456.12c4.55-2.6,4.68-6.6,4.65-10.94q-.16-31.49,0-63c0-4.25-.38-8-5.13-10.32,11.12.19,22.25-3.1,32.7,2.25,8.29,4.24,10.63,12.08,10.57,20.63-.05,8.4-2.49,15.83-10.92,19.77-1.19.56-2.35,1.2-4.78,2.45,12,3.28,14.6,13,18.09,22.13q2.41,6.29,5.24,12.42c.48,1,2,2.59,2.54,2.42a6.35,6.35,0,0,0,3.71-2.71c.76-1.53.72-3.54.72-5.35q.06-30.74,0-61.48c0-4.69,1.23-9.91-4.68-12.74H529.1c-4.82,2.69-4.72,6.94-4.7,11.37q.14,30.74,0,61.48c0,4.39-.22,8.65,4.66,11.53H510.26c-.29,1-.56,1.36-.45,1.55C520.72,235,534.25,252.4,558,258.14c9.94,2.41,19.92,1.85,29.25-2.81,8.6-4.3,12.67-12.46,11.41-21.92-.83-6.24-6-11.69-11.91-12.53s-11.12,3.91-10,8.5a31.23,31.23,0,0,1,4.78-2.42c.31-.11,2,1.87,1.76,2.5-.44,1.4-1.57,3.5-2.58,3.6-1.88.18-4.69-.24-5.67-1.52-3.09-4-.61-7.46,2.82-11.09-5.77,1-8.32,4.35-9.24,9-.72,3.66,0,7.07,3.66,9,4.8,2.61,9.94.6,16.8-6.5,3.63,2.53,3.15,5.87,1.69,9.2a12.5,12.5,0,0,1-11.77,7.87c-6.29.17-11.38-2.34-14.46-8a17,17,0,0,1,11.38-25,22.26,22.26,0,0,1,23.27,9c5.83,8.33,6.23,19.9.65,28.28-7,10.46-17.29,14.22-29.36,13.52-19.35-1.12-35-10.1-47.88-24s-23.38-29.86-32.41-46.65A150.79,150.79,0,0,0,480.28,180c-1.76-2.46-4.81-4-7.28-6Zm.32-8.36c7.31.91,11.69-1.38,13.17-7.86a40.71,40.71,0,0,0,.73-14.19c-1-7.47-5.82-10.39-13.9-9.29Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M314.82,166.7c2.94-10.87,6-21.71,8.69-32.63.36-1.43-.91-3.26-1.56-5.32h8.92c-1.8,3.6-4.16,7.09-5.35,10.94-3,9.53-5.67,19.17-7.89,28.89-1.05,4.62-.89,9.56-1,14.36-.15,6.33.05,12.66-.07,19-.08,4.29.06,8.36,4.61,11.09H301.51c4.71-2.7,4.11-7.09,4.48-11.37,1.76-20.5-2.88-40-8.77-59.33-4.31-14.16-8-28.51-12.82-42.5A53.28,53.28,0,0,0,275.09,84c-11.22-13.76-34.51-13.42-45.25.37-3.49,4.48-6.21,9.7-3.26,15.2,1.66,3.08,5,5.53,8.12,7.42,1.29.79,3.92-.62,5.94-1l-.36-1.54c-.66.18-1.42.64-2,.47-1.29-.4-3.11-.82-3.56-1.77a4.34,4.34,0,0,1,.69-4c.82-.84,3.3-1.43,3.9-.87,1.67,1.53,4.11,4.09,3.72,5.56-.65,2.42-3,5.59-5.17,6.09-3,.7-6.52-.78-9.48-1.27a12.14,12.14,0,0,0,12.9,7.42c4.55-.55,8.48-2.33,9.66-7.3,1.54-6.44-2.3-11.79-12.61-17.79,1.29-4.21,4.49-5.29,8.41-5.08a16.07,16.07,0,0,1,15,11.93c2.24,7.66-.41,16.08-6.48,20.62-13.09,9.78-29.75,4-33.91-11.77S225.4,76,241.76,71.5c18.64-5.17,37.55-.41,48,20.11,9.31,18.24,14.55,37.85,19.61,57.53,1.49,5.79,2.81,11.62,4.2,17.44Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M255.25,174.07c0,11-.19,21.93.18,32.88.07,1.95,2.44,3.82,4,6.09H239.57c5.81-2.85,4.63-8.16,4.64-13q.05-30.24,0-60.48c0-4.09.14-8.21-5.37-9.74l.66-1.42H245c5.16,0,10.33-.06,15.49,0,11.11.17,18.6,6,21,16.32,2.92,12.49-.86,21.94-10.87,27.16a8.16,8.16,0,0,0-1,.61c2.35,8.69,4.45,17.05,6.89,25.32,1.68,5.7,2.91,11.89,10,14a9.7,9.7,0,0,1-13.53-.44,28.28,28.28,0,0,1-6.28-10c-2.51-7.39-4-15.1-6.24-22.6-.61-2-2.23-3.79-3.39-5.68Zm.07-7.53c7,1,11.41-.88,12.71-6.87a46.22,46.22,0,0,0,.59-16.58c-1-6.55-6.32-9.07-13.3-7.52Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M219.67,172.46c2.36,8.72,4.52,16.9,6.79,25,1.65,5.93,3.26,11.95,10,14.59-4.38,3.3-10.47,3.09-14-1.23a42.14,42.14,0,0,1-6.8-12.54c-2.27-6.58-3.46-13.53-5.43-20.23-.54-1.83-2.23-3.32-3.4-5l-1.54.75c0,11.11-.19,22.23.18,33.32.06,1.91,2.54,3.74,4.17,6H189.8c5.51-3.22,4.47-8.43,4.47-13.25,0-20,0-40,0-60,0-4.26.06-8.43-4.92-10.88,10.95.17,22-3.07,32.24,2.11,8.45,4.26,10.81,12.28,10.74,21.05-.07,8.29-2.62,15.44-10.83,19.28C220.78,171.86,220.06,172.26,219.67,172.46Zm-14.28-5.93c6.84,1.07,11.18-.65,12.52-6.4a47.35,47.35,0,0,0,.82-17.05c-.93-6.49-6.41-9.06-13.33-7.48Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M640.06,208.76l-12.72-36.63h-1.06c-.34,3.33-.7,6.65-1,10-.66,7.13-1.18,14.27-2,21.39-.47,4.23,0,7.69,4.87,9.55H614.06c7-2.82,6.13-9.21,6.62-14.94q3-34.84,5.93-69.69c0-.44.26-.85,1.4-1.55l16.11,47.67,1.08.06,12.1-47.72,1-.08a32.12,32.12,0,0,1,.87,3.84c2.49,23.68,4.9,47.37,7.47,71,.44,4.09-.35,9,5.13,11.4H651.17c5.45-2.73,4.61-7.26,3.93-12-1.35-9.38-2.44-18.8-4.6-28.38l-9.34,36.08Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M351.94,236c4.52-4.4,10.31-6.35,16.31-7.68,19.13-4.27,38.6-5.39,58.1-5.13,13.13.18,26.25,1.36,39.35,2.31,1.51.11,2.92,1.56,4.38,2.38-1.45.8-2.84,2.14-4.37,2.33-10,1.22-19.58,4-28.3,9.17-13,7.78-19.54,21.19-17,35,1.39,7.51,5.58,12.71,13.25,14.61a13.62,13.62,0,0,0,15.22-5.94,11.36,11.36,0,0,0,1.69-6.48c-.18-3-1.52-5.37-5.52-4.57-3.42.68-6.49-1.14-6.7-4.35a9.9,9.9,0,0,1,3.39-7.27c3.91-3.08,9.28-2.09,13.83,1.48a19.51,19.51,0,0,1,7.06,20.93,22.52,22.52,0,0,1-19,15.55C426.36,300,413,285.4,414.87,267c1.56-15.23,9.57-25.91,22.91-32.91,1.75-.92,3.54-1.78,6.45-3.24-2.51-.18-3.86-.36-5.21-.36-26.39.13-52.48,3.37-78.52,7.29-2.72.41-5.56.06-8.34.06Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M733.4,192.31c6.53,3.22,12.77,3.28,17-2.94,1.24-1.84.66-5.92-.56-8.17-2.47-4.55-6.94-5.84-12.86-4.42,2,1,3.48,1.56,4.79,2.38,3.76,2.34,4.35,7.76.84,9.43-1.45.69-3.69.09-5.41-.44-.36-.11,0-2.52,0-3.88l5.37.32c.58-2.91-2.26-3.77-4.92-4.32-8.2-1.7-15,7.26-12.48,16.19a20.07,20.07,0,0,0,25.06,13.9c10.31-3.08,15.59-14.65,11.82-26.07-2.48-7.5-8.13-12.32-14.21-16.89-4.09-3.08-8.27-6.28-11.52-10.16-4.62-5.52-6.38-12.16-3.17-19.12,3.14-6.81,9.25-8.56,16.14-8.68,2.79-.05,5.58-.29,8.32-.44,1.43,8.73,0,14.8-3.71,15.26a40.26,40.26,0,0,0-1.22-5.71c-1.07-3-3.16-4.87-6.52-3.89s-5.33,3.6-4.25,6.83a29.12,29.12,0,0,0,5.6,10.27c3.55,3.9,8.07,6.91,12.13,10.36,6.23,5.28,11,11.52,13,19.64,2.92,11.61-.34,21.21-9.64,28.41s-19.47,8.31-30.08,3.4c-8.28-3.83-12.85-13.91-11.4-24.08,1.23-8.64,9.16-16.59,17.9-17.93,8-1.23,15.23,3.43,18.11,11.66a14.94,14.94,0,0,1-6.84,18.45c-4.91,2.85-11.31,2.47-15.26-1.54-1.65-1.68-2.21-4.42-3.27-6.69Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M688.37,256.65c23.37,14.39,57,10.76,76.18-8A19.41,19.41,0,0,0,769,241c.38-1.13-1-3.73-2.25-4.34-3.88-1.9-7.31-4-6.2-8.91.89-3.94,3.35-7,7.75-7.39,4.25-.34,9.37,3.86,10,8.3,1,7-.24,13.65-4.61,19.4-10.2,13.45-24.49,19.52-40.6,22.17-15.06,2.48-29.58.62-43.28-6.19-8.2-4.07-16.32-8.32-24.23-12.92-11-6.41-22.39-11.7-35.4-13.88,4.88-2.91,11.59-3.2,18.73-.07,8.07,3.54,15.71,8.07,23.81,11.51a31.34,31.34,0,0,0,12.92,2.59c6.72-.24,11.51-6,11.9-12.62.41-6.9-5-11.57-11.66-9.5a7.41,7.41,0,0,0-4.33,4.58c-.28,1.21,2.1,3.11,3.42,4.59,1.07,1.2,2.33,2.22,3.5,3.32-1.76.46-3.61,1.52-5.25,1.25-4.2-.69-6.79-3.28-7-7.83-.2-5,2.26-8.94,6.75-10.55a14.51,14.51,0,0,1,19.49,12.74,17,17,0,0,1-9.61,17.15C691.52,255.13,690.19,255.76,688.37,256.65Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M640.29,117.38c3.31-9.16,7.31-17.92,9.6-27.11C653.51,75.74,650,63,638,53c-3.66-3-6.57-7-9.82-10.48l.4-1.54c1.78.22,3.74,0,5.3.72C645.13,46.77,651.7,56,655.36,67.32a54.64,54.64,0,0,1-2,39.52c-.57,1.33-1.1,2.67-2,4.78,10.12,0,19.58-.09,29,0,17,.2,34,.59,51,.73,6,.05,12-.6,16.75-5.12,5.24-5,3.75-14.34-3-17a7.37,7.37,0,0,0-6,.65c-1.18.81-1.26,3.38-1.57,5.21-.12.73.72,1.61.63,2.36a30.69,30.69,0,0,1-1.13,4.25c-1.31-.79-3.06-1.27-3.85-2.41-3.12-4.48-2.77-9.39.55-12.82a12,12,0,0,1,15.07-2.09c10.54,6.46,10.67,21.35.22,28.5-6.57,4.5-14.1,4.61-21.64,4.48-18.49-.32-37-.76-55.46-1C661.16,117.26,650.34,117.38,640.29,117.38Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M535.85,186.83a32.68,32.68,0,0,0,.63,4.62c1.2,4.28,1.83,9,4.12,12.61,1.4,2.21,5.6,3.92,8.31,3.64,2.42-.26,5.62-3.13,6.56-5.59,2.61-6.81,1.9-13.44-4.22-18.57-2.55-2.14-5-4.35-7.58-6.5-11.12-9.4-13-21.76-10.27-35,2.5-12,9.8-16.45,22-14.73,2.28.32,4.54.82,6.78,1.23v20.86l-1.33.21c-.41-2.4-.77-4.81-1.22-7.21-1.45-7.64-5.13-11.68-10-11-4.57.64-7.52,6.1-7.31,13.19.2,6.63,4,11.11,8.76,15,7,5.65,13.5,11.88,14.66,21.24a61.77,61.77,0,0,1-.19,19.26c-1.93,9.79-10.88,15.07-20.26,13.3-8-1.51-13.58-10-12.61-19.46a64.26,64.26,0,0,1,1.52-7.1Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M182.07,146.15c-3.78-6.93-6-15.22-17.18-12.72v32.9c4.43.38,9.08,2.16,12.45-4.52v15c-2.07-1.17-3.84-2.64-5.87-3.18s-4.22-.12-6.66-.12v35.13c9.68,2.39,12.68.15,21.11-14.68-1.15,6.12-2.25,12.25-3.55,18.33-.12.58-1.52,1.26-2.33,1.27-10.3.09-20.6.06-31.35-.34,6.47-3.38,5-9.13,5-14.36,0-19.49,0-39,.06-58.48,0-4.51-.06-8.7-4.93-11.37h33.24Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M698.39,125.51c.37,1.3.83,2.58,1.1,3.89,5.34,25.9,10.63,51.8,16.07,77.68.43,2,1.95,3.86,3.12,6.09H700.5c8.24-6.95,1.23-14.24.8-21.39,0-.49-1.51-1.24-2.34-1.27-4-.13-7.93-.06-12.18-.06-1.15,5.38-2.64,10.36-3.08,15.42-.2,2.26,1.72,4.71,2.77,7.29h-9.53c1.45-3.82,3.47-7.65,4.34-11.72,5-23.58,9.78-47.22,14.65-70.84.35-1.7.89-3.35,1.34-5Zm1.77,60.32-5.8-27.29-1,0-5.62,27.32Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M200.21,112.29c-8.1-19-8-36.85,5.88-53,3.64-4.22,8.12-7.46,13.75-8L221,52.74c-3,3.19-5.62,6.73-8.92,9.49-10.58,8.84-13.34,20.14-10,32.87,2,7.75,5.48,15.13,8.48,23.19H145.88c-7,0-14,.46-20.93-.12-8.7-.73-14.44-6.22-15.61-13.74a14.18,14.18,0,0,1,7-14.39c4.13-2.37,8-1.71,11.66,1a8.59,8.59,0,0,1,1.22,12.79,3.87,3.87,0,0,1-2.93,1.16c-.53-.08-1.31-1.81-1.15-2.63.59-2.87,2.61-6.24-1.29-7.77-1.8-.71-5.06.09-6.61,1.43-3,2.57-5.09,6.49-2.52,10.2a17.81,17.81,0,0,0,8,6.13c3.31,1.23,7.2,1.21,10.84,1.18,21-.19,42-.53,63-.84C197.65,112.67,198.76,112.45,200.21,112.29Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M584.22,133.33c-10.86-1.58-10.49,7.49-14.14,14.21V128.93h39v18c-3.78-5.71-3.14-15.48-13.84-13.48-.08,1.72-.21,3.34-.22,5q0,32,0,64c0,4.21-.1,8.37,4.71,10.83H578.25c6.34-2.87,6-7.4,6-11.83q0-31.24,0-62.48Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M394.55,153.65a43.7,43.7,0,0,0-1.84-4.79c-2.2-4.25-4-8.84-7-12.53-3.88-4.89-9.89-4.79-12.9.64a57.27,57.27,0,0,0-6.51,18.53c-2.13,13.7-2.09,27.55,1.95,41a29.79,29.79,0,0,0,4.34,8.88c3.89,5.32,9.3,5.65,13.35.44,2.89-3.72,4.64-8.35,6.83-12.61.76-1.48,1.29-3.08,2.3-5.53,2.83,9.67-1,20.28-7.79,23.63-9.47,4.7-17.72,2.7-23.89-6.4-9.12-13.43-10.1-28.6-8.38-44.12.94-8.51,3.39-16.63,8.46-23.72,7.49-10.49,20.28-11.52,29.32-2.38.46.47,1.14,1,1.23,1.51.89,5.63,1.68,11.28,2.5,16.92Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M232.78,229.67c1.69-.63,3.34-1.66,5.08-1.84,20.33-2.12,39.71-.18,55.72,14.34a42.86,42.86,0,0,1,8,9.44c3.77,6.3,1.94,13.5-3.84,17.72-5,3.66-15.51,3-19.55-1.41-2.52-2.73-2.59-5.88-.14-8.55,2.21-2.41,5-1.92,7,.38,2.33,2.71,4.93,3.83,7.73,1.54,3.18-2.61,1.76-5.86-.28-8.46-9.24-11.76-21.28-19.19-36.06-21.35-6.16-.9-12.57-.09-18.87-.1-1.52,0-3-.15-4.55-.22Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M436.46,57.73l-7-2.92-2.66,28-1,0-2.75-28L415.37,58l4.58-6.4L401.8,49.05l0-.55,17.69-2.27-5.88-8,9.48,5.49,2.8-19.9.83-.12,2.81,20,8-4.52.5.47-4.9,6.56,17.7,2.3,0,.58-18.13,2.39Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M689.8,76.45c-2.28,6.49-4.38,13.06-7,19.43-.74,1.83-2.75,3.27-4.44,4.53a3.8,3.8,0,0,1-3.18.18c-.48-.19-.82-1.84-.57-2.62,2.39-7.44.43-14.45-1.84-21.47a31,31,0,0,1-.91-3.37c-1.09-5.39.58-8.84,4.77-10,5-1.32,9.43,1,11,6A47.88,47.88,0,0,1,688.82,76Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M277.53,223.88c4.27,1.09,8.61,2,12.81,3.31a98.15,98.15,0,0,0,44.3,3.52c3.19-.47,6.77-.45,7,3.32.09,1.72-3.17,5-5.15,5.2-5.68.59-11.7.89-17.2-.37-12.44-2.84-24.67-6.6-36.93-10.19-2-.59-3.76-2.16-5.63-3.28Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M639.61,250.16c9,4.2,17.37,9.31,23.44,17.19a24.12,24.12,0,0,1,4.31,10.31,6,6,0,0,1-5.39,7.18c-2.19.16-4.75-2.06-6.8-3.66-1-.82-1.53-2.56-1.9-4A66.64,66.64,0,0,0,639.61,250.16Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M669.57,264.11c9.09,3.1,18.83,6.5,28.62,9.73,5,1.65,9,6.08,8.11,9.36-1,3.57-6.93,5.53-12.16,3.45C682.67,282.09,675.91,272.45,669.57,264.11Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M179,104.42c-1.94-1.72-4.37-3.13-5.72-5.23a31.57,31.57,0,0,1-4.68-21c.57-5.19,4.58-8.29,9.27-7.52,4.44.73,6.17,4,4.64,9.66-2,7.51-4.88,14.87-1.41,22.92Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M534.12,20.07c.13,3.52-3.12,6.89-6.87,7.13a6.67,6.67,0,0,1-7.09-6.64,6.59,6.59,0,0,1,6.64-7A7.09,7.09,0,0,1,534.12,20.07Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M303.45,47.29a7.17,7.17,0,0,1,7.13,6.9,6.55,6.55,0,0,1-6.4,6.9,7.24,7.24,0,0,1-7.49-6.56A7.13,7.13,0,0,1,303.45,47.29Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M598.83,266.5c3.92-.1,7.63,3.24,7.46,7-.19,4.09-2.71,6.26-6.63,6.65a6.57,6.57,0,0,1-7.27-6.39A6.69,6.69,0,0,1,598.83,266.5Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M229.41,272.38a6.56,6.56,0,0,1-6.9-6.4,6.72,6.72,0,0,1,6.59-7.28,7.13,7.13,0,0,1,7.31,6.73A6.91,6.91,0,0,1,229.41,272.38Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M424.46,238.07c-2.9,1.29-5,1.86-6.65,3-1.91,1.36-3.36,3.35-5.17,4.88s-3.63,3.56-5.65,3.83c-1.3.17-4.3-2.57-4.19-3.79.21-2.23,1.71-5.61,3.46-6.2C411.65,238,417.25,235.27,424.46,238.07Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M709.79,90.8c-.62,5.32-2.66,7.49-6.36,7.43S698,95.64,698,92.33c0-3.52,2.63-5.84,5.83-5.37C706.18,87.31,708.22,89.72,709.79,90.8Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M613.1,40.86c-1.22-1.69-3.71-3.67-4.1-6-.56-3.33,2-5.46,5.47-5.65s5.76,1.62,5.92,5.19C620.56,38.21,618.11,39.94,613.1,40.86Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M153.93,102c-1.23-2-3.23-3.88-3.5-6a3.86,3.86,0,0,1,5.06-4.36c1.86.51,4.37,3,4.41,4.68,0,1.89-2.35,3.83-3.69,5.75Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M231.6,52c-1.36-1.92-3.5-3.7-3.9-5.81a3.83,3.83,0,0,1,4.79-4.63c1.89.43,4.52,2.76,4.66,4.43.16,1.88-2.09,4-3.3,6Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M481.05,43.44c-2,1.25-4.07,3.54-6,3.44-1.58-.08-4.21-3.05-4.17-4.68s2.81-4.16,4.55-4.31,3.7,2.16,5.57,3.39Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M501.84,49.72c-1.12-1.9-3.31-4-3-5.65s3-4.33,4.52-4.27,4.61,2.79,4.57,4.3c0,1.94-2.49,3.83-3.9,5.75Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M209.12,285.1c-3.26,2.36-5.11,4.76-6.86,4.67s-4.27-2.41-4.75-4.21c-.81-3,1.39-5.35,4.53-4.87C204,281,205.78,282.94,209.12,285.1Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M574.19,288.23c-1.79,1.31-3.65,3.72-5.36,3.62s-4.66-2.53-4.79-4.14,2.41-4.63,4-4.82c1.89-.22,4,2,6.09,3.13Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M251,38.44c-1.43-1.85-4-3.7-4-5.55,0-1.59,2.83-4.39,4.48-4.45s4.27,2.5,4.66,4.3c.34,1.56-1.86,3.67-2.94,5.54Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M180.36,280c-1.83,1.2-3.76,3.46-5.47,3.31a6.72,6.72,0,0,1-4.73-4.19c-.66-2.94,1.55-5.28,4.72-4.69,2,.37,3.68,2.26,5.5,3.46Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M263,54.34c3.14-2.41,5.11-5,6.59-4.78,1.94.33,3.49,2.93,5.2,4.55-1.56,1.56-3,4.18-4.72,4.38S266.33,56.45,263,54.34Z" transform="translate(-5.7 -12.01)"/><path fill="#fff" stroke="#000" stroke-width="2px" d="M542.72,282.74c-2.1-3.33-4.35-5.32-4.11-6.93s2.85-3.13,4.42-4.68c1.66,1.69,4.24,3.19,4.65,5.15C548,277.63,545.24,279.61,542.72,282.74Z" transform="translate(-5.7 -12.01)"/></svg>
</body>
</html>
4 - Animazione CSS
Una vota creato il nostro HTML, procediamo a crare l'animazione css che creerà il disegno della nostra SVG. Sostanzialmente non faremo altro che animare la lunghezza del tratto della nostra svg.
<style>
path {
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation: animazione_svg 6s linear forwards;
}
@keyframes animazione_svg {
to {
stroke-dashoffset: 0;
}
}
</style>Tata! E abbiamo finito!
5 - E perchè il Javascript?
La maggior parte degli esempi che vedi su internet, utilizzano JavaScript. Questo perché è difficile sapere quale sia la lunghezza effettiva del disegno, abbiamo usato solo 2000 nel nostro esempio perché sembra essere la lunghezza giusta.
Puoi ottenere la lunghezza del tratto tramite JavaScript in questo modo:
var path = document.querySelector('path');
var length = path.getTotalLength();Semplice vero? Abbiamo così realizzato l'animazione di un'immagine SVG
Se vi siete perso il tutorial precedente dove realizzavamo lo sticky header, vi invito a leggerlo e magari a lasciare un commento.
Spero che anche questo tutorial vi sia piaciuto, non dimenticate di lasciare un like su facebook, e perchè no, se vi è piaciuto tanto tanto tanto, condividetelo con gli amici.
Al Prossimo tutorial, buon sviluppo!
Era da fin troppo tempo che non davamo una smossa a questo Blog!
Francesco
