Share
Skalerbar vektorgrafikk (SVG) trenger ingen introduksjon for webdesignere. De skaler opp og ned skarpt, spill pent med animasjoner, de er et kraftig format for ikoner og så mye mer. Denne inspirasjonsposten er en del av en pågående serie på Envato Tuts +, som trekker sammen en liste over ti nettsteder som gjør inspirerende bruk av SVG i en teknisk eller kreativ forstand.
Waark er et kreativt webstudio som stoler seg på å skape elegante og funksjonelle, tilpassede nettsteder. Da den først ble løslatt, tok det samfunnet med storm med all sin strålende, skjærekantende bevegelseshøyvekking Lerret og, selvfølgelig, SVG.
waaark.comNoen av min favorittbevegelse skjer i disse typer lastesekvenser der mellombildet kommer til livs på sidebelastning og fortsetter med subtile bevegelser. Det er også godt å merke seg at de fleste av SVG-animasjonene bruker GreenSock-biblioteket. Sørg for å se denne videoen som er lagt ut fra jeg hater tomater, dekonstruerer i ytterligere detaljer:
Typebetingelser er et animert typografisk jukseark. Hvis du er ny på typografi, eller bare vil oppdatere minnet, er Type Vilkår det perfekte verktøyet for deg.
www.supremo.tv/typeterms/En veldig inspirerende bruk av SVG for å lære om typografisk terminologi. Hver karakter av leksjonen kaller oppmerksomhet diskusjonstiden gjør det enkelt å identifisere hva som blir presentert. Mens jeg ikke anser dette nettstedet for å være teknisk sett inspirerende, finner jeg at bruken er veldig kreativ. Mange av SVG-bevegelseseksemplene er delt opp biter, ved hjelp av CSS for bevegelsen.
Cuberto er et digitalt kreativt byrå basert i Storbritannia, og er et team med et sterkt øye for design og bevegelse. Måten Cuberto-nettstedet bruker SVG, er bare fantastisk; fra enkle brevbevegelser, til den lille musens indikator som gir innsikt for brukeren å bla.
cuberto.comHver bokstavs bevegelse er 100% SVG. Cuberto benytter maskering for å gjøre hver tegnsett med skilt tekstur. Et veldig inspirerende nettsted og kreativ bruk av SVG og bevegelse. Et siste notat er GreenSock fanatikere vil være glade for å vite at GSAP er i bruk. Rått.
Horizon er det de samler som en "Realtime JavaScript Backend" som bidrar til å raskt bygge og distribuere ved hjelp av en enkel API.
horizon.ioMin favoritt del om dette nettstedet, og egentlig det eneste stedet som bruker SVG, er skjermbildene som inneholder en bevegelig scene. Dette bruker GSAP og en serie masker og klippestier. Det andre aspektet jeg virkelig likte å oppdage er det faktum at du kan nest en SVG inne i en SVG! Fantastisk!
Hvor går du når du vil ha kvalitets SVG logoer? SVG Porn selvfølgelig! En flott samling av logoer for utviklere, forlag og designere som dekker et stort spekter av kategorier.
svgporn.comDet er enkelt, intuitivt og til poenget. SVG Porn gir plass til SVG-logoer (inkludert dette kjente eksempelet ovenfor) som er åpne for publikum som er optimalisert (har fjernet dupliserte baner uten overdreven gruppering, ingen tomme defs, linting etc.) og tilgjengelig på GitHub.
Dette bestemte verktøyet viser hvordan du lager matematisk generert grafikk ved hjelp av SVG, JavaScript og React.
jxnblk.com/react-icons/#live-demoVed hjelp av hver skyveknapp kan en bruker oppdatere SVG-banepunktene og til og med endre diameteren.
Dette brukes til å lage piksler perfekt, matematisk avledet grafikk som de fleste applikasjoner ikke kan få riktig. Jeg elsker disse typer verktøy som viser kode live når du oppdaterer og blir nesten magisk som den grafiske morphen og endrer form når du flytter hver skyvekontroll. Virkelig inspirerende og virkelig fantastisk.
Fleximize er et selskap som tilbyr småbedrifter finansiell utlån med et oppdrag å revolusjonere verden av forretningsfinansiering.
Fleximize Squad er en leken opplevelse basert på SVG-animasjoner. Gjennom tre forskjellige sammenhengende historier, kan brukerne få tilgang til en smart måte å be om et lån til.
fleximize.com/missionDette tankebrytende nettstedet bringer sammen lyd med SVG-bevegelse og, selvfølgelig, ved hjelp av GreenSock. Dette er en veldig lineær opplevelse, så forvent ikke å treffe tilbake knappen med dette monsteret, men det er fortsatt et fantastisk eksempel du vil glede deg over dager med DevTools inspektøren åpen.
Mo.js prosjektet av LegoMushroom er et bibliotek for å skape raske, silkeblanke animasjoner og effekter på nettet.
Det jeg finner veldig inspirerende med dette prosjektet er bruk av fysikk i bevegelsen, som blurs, studs og så mye mer - pluss det er åpen kildekode, og noen kan bidra til å forbedre koden under hetten. Sa jeg at det også kombinerer lyd? Sjekk dette prosjektet umiddelbart!
Demoer: https://github.com/legomushroom/mojs#demos
Trulia er en mobil og online eiendomsressurs som gjør det mulig å finne et hjem ved å gi kjøpere, leietakere og selgere de innsiktene de trenger for å ta informerte beslutninger om hvor de skal bo.
www.trulia.com/rent/rental-resumeNoen ganger er de mest tilfredsstillende bevegelsene de som er subtile, og i dette tilfellet er det akkurat det som fanget min oppmerksomhet. Denne SVG-animasjonen (designet av Jon Campos, animert av Sarah Drasner) selger virkelig ideen om å sende inn et CV og går gjennom trinnene visuelt på hvor enkelt et skjemainnlegg kan være. Så mye fantastisk det er hver eneste SVG og GreenSock.
Ønsker du noen dræber SVG-mønstre for ditt neste prosjekt? SVG Generation er et flott sted å få dem og tilpasse før du laster ned. Lag alt fra kompliserte zig-zags, spiraler, kuber, striping og mye mer. Selv blå jeans:
www.svgeneration.com/recipes/Blue-JeanTilpass parametere som slagfarger, størrelse og fyll. Et morderprosjekt som også er åpen kildekode på GitHub. Du kan sjekke ut en annen stor SVG mønster maker av Philip Rogers og basert på Lea Verous CSS3 Pattern Gallery.
Alle som forstår SVG, kjenner Saras arbeid. Jeg valgte begge disse demonstrasjonene som jeg finner dem virkelig nyttige i enhver form for utdanning og i et prosjektform.
Hvis du har det vanskelig å forstå hva viewBox-attributtet ikke ser lenger. Denne demoen vil fjerne mysteriet som er viewBox og vise deg i sanntid hvordan verdiene påvirker resultatet. Fremragende arbeid Sara!
sarasoueidan.com/demos/interactive-svg-coordinate-system/Circulus er et annet av disse demonstrasjonsverktøyene i sanntid, som også kan brukes til å inkludere resultatet i prosjektet. Sirkelmenyene er ganske hofte, spesielt når du kan se dem skapt og tilpasset rett foran deg!
Konklusjon
SVG er rundt oss på nettet i disse dager! Gi oss beskjed om hvilke inspirerende nettsteder du har oppdaget SVG-briljans på, og sjekk ut disse læringsressursene på Tuts + for å komme deg opp i fart:
Accentsconagua