SVG Brilliance 10 Inspirerande exempel från hela webben

Skalbar vektorgrafik (SVG) behöver ingen introduktion för webbdesigners. De skala upp och ner skarpt, spela bra med animeringar, de är ett kraftfullt format för ikoner och så mycket mer. Denna inspirationspost är en del av en pågående serie på Envato Tuts +, som sammanför en lista med tio webbplatser som gör inspirerande användning av SVG i teknisk eller kreativ mening.

Waark

Waark är en kreativ webbstudio som stoltserar med att skapa eleganta och funktionella skräddarsydda webbplatser. När den första släpptes tog det samhället med storm med all sin härliga, snygga rörelsehantering Canvas och, naturligtvis, SVG.

waaark.com

Några av mina favoritrörelser händer i dessa typer av laddningssekvenser där mittbilden kommer till liv på sidladdning och fortsätter med subtila rörelser. Det är också bra att notera att de flesta SVG-animationerna använder GreenSock-biblioteket. Se till att du tittar på den här videon från I Hate Tomatoes dekonstruerar i detalj:

Supremos Typeterms

Typvillkor är ett animerat typografiskt fuskblad. Om du är ny på typografi eller bara vill uppdatera ditt minne, är Typvillkor det perfekta verktyget för dig.

www.supremo.tv/typeterms/

En riktigt inspirerande användning av SVG för att undervisa om typografisk terminologi. Varje lektionskaraktär kallar till uppmärksamhet diskussionsperioden gör det enkelt att identifiera vad som presenteras. Medan jag inte anser att denna webbplats ska vara tekniskt inspirerande tycker jag att användningen är mycket kreativ. Många av SVG-rörelseexemplen är uppdelade bitar, med CSS för rörelsen.

Cuberto

Cuberto är en digital kreativ agentur baserad i Storbritannien och är ett team med ett skönt öga för design och rörelse. Hur Cubertos webbplats använder SVG är bara underbart; från enkla brevrörelser, till den lilla musindikatorn som ger insikt för användaren att bläddra.

cuberto.com

Var och en av bokstäverna är 100% SVG. Cuberto använder maskering för att göra varje teckenform med separerad textur. En mycket inspirerande webbplats och kreativ användning av SVG och motion. En slutlig notering är GreenSock fanatiker kommer att vara glada att veta att GSAP är i bruk. Grymt bra.

Horisont

Horizon är vad de mynter som en "Realtime JavaScript Backend" som hjälper till att snabbt bygga och distribuera med ett enkelt API.

horizon.io

Min favorit del om den här webbplatsen, och verkligen den enda platsen som använder SVG, är skärmarna som innehåller en rörlig scen. Detta använder GSAP och en serie masker och klippvägar. Den andra aspekten som jag verkligen tyckte om att upptäcka är att du kan boa ett SVG i en SVG! fantastiska!

SVG Porn

Var går du när du vill ha kvalitets SVG-logotyper? SVG Porn naturligtvis! En stor samling logotyper för utvecklare, förlag och designers som täcker ett stort antal kategorier. 

svgporn.com

Det är enkelt, intuitivt och till viss del. SVG Porn ger utrymme för SVG-logotyper (inklusive detta välbekanta exempel ovan) som är öppna för allmänheten som är optimerade (har tagit bort dubbla banor utan överdriven gruppering, inga tomma dyser, linting etc.) och tillgängliga på GitHub.

Reaktikoner

Det här verktyget visar hur man skapar matematiskt genererad grafik med hjälp av SVG, JavaScript och React.

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

Med hjälp av varje skjutreglage kan en användare uppdatera SVG-banpunkterna och ändå ändra diameteren.

Detta används för att skapa pixel perfekt, matematiskt härledd grafik som de flesta applikationer inte kan få rätt. Jag älskar dessa typer av verktyg som visar kod live när du uppdaterar och blir nästan magiskliknande som grafiska morphs och ändras form när du flyttar varje skjutreglage. Verkligen inspirerande och verkligen fantastisk.

Fleximize Squad

Fleximize är ett företag som erbjuder små företag finansiell utlåning med ett uppdrag att revolutionera världen av företagsfinansiering.

Fleximize Squad är en lekfull erfarenhet baserad helt på SVG-animationer. Genom tre olika sammanhängande berättelser kan användarna få tillgång till ett smart sätt att begära ett lån.

fleximize.com/mission

Den här sinnena sätter samman ljud med SVG-rörelse och, naturligtvis, med GreenSock. Detta är en mycket linjär upplevelse, så förvänta dig inte att slå tillbaka knappen med detta monster, men det är fortfarande ett fantastiskt exempel du kommer att njuta av i dagar med DevTools inspektören öppen.

Mo.js

Mo.js-projektet från LegoMushroom är ett bibliotek för att skapa snabba, silkeslila animeringar och effekter på webben.

Det som jag tycker är riktigt inspirerande med detta projekt är användningen av fysik i rörelsen, såsom oskärpa, studsning och så mycket mer - plus det är öppen källkod och alla kan bidra till att förbättra koden under huven. Nämnde jag att det också kombinerar ljud? Kolla detta projekt omedelbart!

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

Trulia: Hyra Resumé

Trulia är en mobil och online fastighetsresurs som gör att man hittar ett hem genom att ge köpare, hyresgäster och säljare de insikter de behöver för att fatta välgrundade beslut om var de ska bo.

www.trulia.com/rent/rental-resume

Ibland är de mest tillfredsställande rörelserna de som är subtila, och i det här fallet är det precis vad som fångade min uppmärksamhet. Den här SVG-animationen (designad av Jon Campos, animerad av Sarah Drasner) säljer verkligen idén om att skicka in en CV och går igenom stegen visuellt om hur enkelt ett formulärinslag kan vara. Så jättebra det är varje bit SVG och GreenSock.

SVG Generation

Vill du ha några mördare SVG-mönster för ditt nästa projekt? SVG Generation är ett bra ställe att få dem och anpassa innan du laddar ner. Skapa allt från komplicerade zig-zags, spolar, kuber, striping och så mycket mer. Även blå jeans:

www.svgeneration.com/recipes/Blue-Jean

Anpassa parametrar som slagfärger, storlek och fyllningar. Ett mördareprojekt som också är open-source på GitHub. Du kan checka ut en annan stor SVG-mönstertillverkare av Philip Rogers och baserat på Lea Verous CSS3 Pattern Gallery.

Circulus & SVG Coordinate System Viewer

Den som förstår SVG känner till Sara. Jag valde båda dessa demonstrationer, eftersom jag tycker att de verkligen är användbara i alla former av utbildning och i en projektform.

Om du har svårt att förstå vad viewBox-attributet inte ser längre ut. Denna demo tar bort mysteriet som är ViewBox och visar dig i realtid hur värdena påverkar resultatet. Utmärkt arbete Sara!

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

Circulus är en annan av dem i realtid demonstrationsverktyg som också kan användas för att inkludera resultatet i ditt projekt. Cirkelmenyerna är ganska höft, särskilt när du kan titta på dem skapade och anpassade precis framför dig!

Slutsats

SVG är runt omkring oss på nätet idag! Låt oss veta vilka inspirerande webbplatser du har upptäckt SVG-briljans på, och kolla in dessa inlärningsresurser på Tuts + för att få dig snabbt: