SVG Brilliance 10 esempi stimolanti da tutto il Web

La grafica vettoriale scalabile (SVG) non ha bisogno di presentazioni per i web designer. Si scalano su e giù in modo deciso, giocano bene con le animazioni, sono un potente formato per icone e molto altro ancora. Questo post di ispirazione fa parte di una serie in corso di Envato Tuts +, che riunisce un elenco di dieci siti web che fanno un uso stimolante di SVG in un senso tecnologico o creativo.

Waark

Waark è uno studio web creativo che è orgoglioso di creare siti web personalizzati e personalizzati. Quando è stato rilasciato per la prima volta, ha preso d'assalto la community con tutto il suo movimento glorioso e all'avanguardia sfruttando Canvas e, naturalmente, SVG.

waaark.com

Alcuni dei miei movimenti preferiti si verificano in questi tipi di sequenze di caricamento in cui il grafico centrale prende vita sul caricamento della pagina e continua con movimenti sottili. È anche utile notare che la maggior parte delle animazioni SVG utilizza la libreria GreenSock. Assicurati di guardare questo video pubblicato da I Hate Tomatoes che decostruisce in maggiore dettaglio:

Typeterms di Supremo

Type Terms è un cheat tipografico animato. Se sei nuovo alla tipografia, o semplicemente vuoi rinfrescare la memoria, Type Terms è lo strumento perfetto per te.

www.supremo.tv/typeterms/

Un uso davvero stimolante di SVG per insegnare la terminologia tipografica. Ogni personaggio della lezione richiama l'attenzione sul termine della discussione, facilitando l'identificazione di ciò che viene presentato. Mentre io non considero questo sito tecnicamente stimolante, trovo il suo uso molto creativo. Molti degli esempi di movimento SVG sono frammenti di bit, usando CSS per il movimento.

Cuberto

Cuberto è un'agenzia creativa digitale con sede nel Regno Unito ed è una squadra con un occhio attento per il design e il movimento. Il modo in cui il sito web Cuberto utilizza SVG è semplicemente meraviglioso; dai semplici movimenti delle lettere, al piccolo indicatore del mouse che fornisce informazioni utili all'utente per scorrere.

cuberto.com

Ciascun movimento delle lettere è SVG al 100%. Cuberto utilizza il mascheramento per rendere ogni forma di carattere con una trama separata. Un sito molto stimolante e l'uso creativo di SVG e motion. Una nota finale è che i fan di GreenSock saranno felici di sapere che GSAP è in uso. Eccezionale.

Orizzonte

Horizon è ciò che essi rappresentano come un "backend JavaScript in tempo reale" che aiuta a creare e implementare rapidamente utilizzando una semplice API.

horizon.io

La mia parte preferita di questo sito, e in realtà l'unico posto che usa SVG, sono gli schermi che contengono una scena in movimento. Questo utilizza GSAP e una serie di maschere e percorsi clip. L'altro aspetto che ho apprezzato molto è la possibilità di annidare un SVG in un SVG! Stupefacente!

Porno SVG

Dove vai quando vuoi i loghi SVG di qualità? Porno SVG, naturalmente! Una grande collezione di loghi per sviluppatori, editori e designer che coprono un ampio spettro di categorie. 

svgporn.com

È semplice, intuitivo e al punto. SVG Porn fornisce uno spazio per i loghi SVG (incluso questo esempio familiare sopra) che sono aperti al pubblico che sono ottimizzati (avendo rimosso percorsi duplicati, senza un eccessivo raggruppamento, senza difetti vuoti, linting, ecc.) E disponibili su GitHub.

Reagire icone

Questo particolare strumento mostra come creare grafici generati matematicamente usando SVG, JavaScript e React.

jxnblk.com/react-icons/#live-demo

Usando ciascun cursore, un utente può aggiornare i punti del percorso SVG e persino cambiare il diametro.

Questo è usato per creare pixel perfetti, una grafica di derivazione matematica che la maggior parte delle applicazioni non riescono a ottenere. Adoro questi tipi di strumenti che visualizzano il codice dal vivo mentre si aggiornano e diventano quasi magici, mentre il grafico si trasforma e cambia forma quando si sposta ciascun cursore. Davvero stimolante e veramente fantastico.

Fleximize Squad

Fleximize è un'azienda che offre alle piccole imprese prestiti finanziari con la missione di rivoluzionare il mondo dei finanziamenti aziendali.

Fleximize Squad è un'esperienza ludica basata interamente su animazioni SVG. Attraverso tre diverse storie interrelate, gli utenti possono accedere a un modo intelligente per chiedere un prestito.

fleximize.com/mission

Questo sito strabiliante mette insieme l'audio con il movimento SVG e, ovviamente, con GreenSock. Questa è un'esperienza molto lineare, quindi non aspettarti di premere il pulsante Indietro con questo mostro, ma è comunque un fantastico esempio che ti piacerà per giorni con l'ispettore DevTools aperto.

Mo.js

Il progetto Mo.js di LegoMushroom è una libreria per la creazione di animazioni e effetti veloci e setosi per il Web.

Quello che trovo davvero stimolante in questo progetto è l'uso della fisica nel movimento, come sfocature, rimbalzi e molto altro ancora, più è open source e chiunque può contribuire a migliorare il codice sotto il cofano. Ho detto che combina anche l'audio? Controlla subito questo progetto!

Demos: https://github.com/legomushroom/mojs#demos

Trulia: noleggio Resumé

Trulia è una risorsa immobiliare mobile e online che rende la ricerca di una casa fornendo a compratori, affittuari e venditori le informazioni di cui hanno bisogno per prendere decisioni informate su dove vivere.

www.trulia.com/rent/rental-resume

A volte i movimenti più soddisfacenti sono quelli che sono sottili, e in questo caso è esattamente ciò che ha catturato la mia attenzione. Questa animazione SVG (progettata da Jon Campos, animata da Sarah Drasner) vende davvero l'idea di presentare un curriculum e cammina visivamente attraverso i passaggi sulla facilità con cui può essere presentata una maschera. Tanto fantastico che SVG e GreenSock sono in ogni caso.

Generazione SVG

Vuoi dei pattern SVG killer per il tuo prossimo progetto? SVG Generation è un ottimo posto per ottenere quelli e personalizzare prima di scaricare. Crea qualsiasi cosa da complicati zigzag, bobine, cubi, strisce e molto altro ancora. Anche i blue jeans:

www.svgeneration.com/recipes/Blue-Jean

Personalizza i parametri come i colori dei tratti, le dimensioni e i riempimenti. Un progetto killer che è anche open-source su GitHub. Puoi fare il checkout con un altro grande produttore di pattern SVG di Philip Rogers e basato sulla CSS3 Pattern Gallery di Lea Verou.

Visualizzatore sistema di coordinate Circulus e SVG

Chiunque comprenda SVG conosce il lavoro di Sara. Ho scelto entrambi questi demo perché li trovo veramente utili in ogni senso dell'educazione e in una forma di progetto.

Se hai difficoltà a capire che cosa l'attributo viewBox non guarda oltre. Questa demo rimuoverà il mistero che è viewBox e ti mostrerà in tempo reale come i valori influenzano il risultato. Lavoro eccezionale Sara!

sarasoueidan.com/demos/interactive-svg-coordinate-system/

Circulus è un altro strumento di dimostrazione in tempo reale che può essere utilizzato anche per includere il risultato nel progetto. I menu Circle sono piuttosto alla moda, specialmente quando puoi guardarli creati e personalizzati proprio di fronte a te!

Conclusione

SVG è tutto intorno a noi sul web in questi giorni! Facci sapere quali siti web di ispirazione hai individuato la brillantezza di SVG e consulta queste risorse di apprendimento su Tuts + per aggiornarti: