Share
Schaalbare vectorafbeeldingen (SVG) hebben geen introductie nodig voor webontwerpers. Ze schalen scherp en op en neer, spelen mooi met animaties, ze zijn een krachtig formaat voor pictogrammen en nog veel meer. Deze inspiratiepost maakt deel uit van een doorlopende serie bij Envato Tuts +, waarbij een lijst van tien websites wordt samengevoegd die op een inspirerende manier gebruik maken van SVG in een technische of creatieve zin.
Waark is een creatieve webstudio die er trots op is om elegante en functionele, op maat gemaakte websites te maken. Toen het voor het eerst werd uitgebracht, had het de community stormenderhand nodig met al zijn glorieuze, geavanceerde bewegingen met gebruik van Canvas en natuurlijk SVG.
waaark.comSommige van mijn favoriete bewegingen vinden plaats in dit soort laadvolgordes waarbij de middelste afbeelding tot leven komt bij het laden van de pagina en doorgaat met subtiele bewegingen. Het is ook goed om op te merken dat de meeste SVG-animaties de GreenSock-bibliotheek gebruiken. Zorg ervoor dat je deze video van I Hate Tomatoes deconstrueert in meer detail:
Type Terms is een geanimeerde typografische spiekbrief. Als u nog niet bekend bent met typografie of alleen uw geheugen wilt vernieuwen, is Typevoorwaarden de perfecte tool voor u.
www.supremo.tv/typeterms/Een echt inspirerend gebruik van SVG om les te geven over typografische terminologie. Elk personage van de les roept de aandacht van de discussie op, waardoor het gemakkelijk wordt om te identificeren wat er wordt gepresenteerd. Hoewel ik deze site niet beschouw als zijnde technisch gezien inspirerend, ik vind het gebruik erg creatief. Veel van de SVG-bewegingsvoorbeelden zijn opgesplitste bits, waarbij CSS wordt gebruikt voor de beweging.
Cuberto is een digitaal creatief bureau gevestigd in het Verenigd Koninkrijk en is een team met een scherp oog voor ontwerp en beweging. De manier waarop de website van Cuberto gebruikmaakt van SVG is gewoon geweldig; van eenvoudige letterbewegingen tot de kleine muisindicator die de gebruiker inzicht geeft in het bladeren.
cuberto.comElke beweging van de letters is 100% SVG. Cuberto maakt gebruik van maskeren om elk karakter vorm te geven met gescheiden textuur. Een zeer inspirerende site en creatief gebruik van SVG en beweging. Een laatste opmerking is dat de fans van GreenSock blij zijn te weten dat GSAP in gebruik is. Geweldig.
Horizon is wat ze munten als een 'Realtime JavaScript-backend', waarmee snel kan worden gebouwd en geïmplementeerd met behulp van een eenvoudige API.
horizon.ioMijn favoriete onderdeel van deze site, en eigenlijk de enige plaats die SVG gebruikt, zijn de schermen met een ontroerende scène. Dit gebruikt GSAP en een reeks maskers en clippaden. Het andere aspect dat ik echt leuk vond om te ontdekken, is het feit dat je een SVG in een SVG kunt nesten! Verbazingwekkend!
Waar ga je heen als je hoogwaardige SVG-logo's wilt? SVG-porno natuurlijk! Een geweldige verzameling logo's voor ontwikkelaars, uitgevers en ontwerpers die een groot aantal categorieën bestrijken.
svgporn.comHet is eenvoudig, intuïtief en to the point. SVG-porno biedt ruimte voor SVG-logo's (inclusief dit vertrouwde voorbeeld hierboven) die open staan voor het publiek en die zijn geoptimaliseerd (dubbele paden hebben verwijderd, zonder overdadige groepering, geen lege treffers, pluisjes enz.) En beschikbaar op GitHub.
Deze specifieke tool laat zien hoe wiskundig gegenereerde afbeeldingen kunnen worden gemaakt met behulp van SVG, JavaScript en React.
jxnblk.com/react-icons/#live-demoMet behulp van elke schuifregelaar kan een gebruiker de SVG-padpunten bijwerken en zelfs de diameter wijzigen.
Dit wordt gebruikt om pixel-perfecte, mathematisch afgeleide grafische afbeeldingen te maken die de meeste applicaties niet goed kunnen krijgen. Ik ben dol op dit soort hulpprogramma's die code live weergeven terwijl je werkt en bijna magisch wordt zoals de grafische vorm en vorm verandert bij het verplaatsen van elke schuifregelaar. Echt inspirerend en echt fantastisch.
Fleximize is een bedrijf dat kleine en middelgrote bedrijven financiële leningen biedt met een missie om de wereld van bedrijfsfinanciering radicaal te veranderen.
Fleximize Squad is een speelse ervaring volledig gebaseerd op SVG-animaties. Via drie verschillende onderling verbonden verhalen hebben gebruikers toegang tot een slimme manier om een lening aan te vragen.
fleximize.com/missionDeze waanzinnige site brengt audio samen met SVG-beweging en, natuurlijk, met behulp van GreenSock. Dit is een heel lineaire ervaring, verwacht dus niet dat je met dit monster op de terugknop drukt, maar het is nog steeds een fantastisch voorbeeld waarvan je dagenlang zult genieten met de DevTools-inspecteur open.
Het Mo.js-project van LegoMushroom is een bibliotheek voor het maken van snelle, zijdezachte animaties en effecten voor het web.
Wat ik erg inspirerend vind aan dit project is het gebruik van fysica in de beweging, zoals vervaging, stuiteren en nog veel meer, plus het is open source en iedereen kan bijdragen om de code onder de motorkap te verbeteren. Vermeldde ik dat het ook audio combineert? Bekijk dit project onmiddellijk!
Demos: https://github.com/legomushroom/mojs#demos
Trulia is een mobiele en online vastgoedbron die het vinden van een woning mogelijk maakt door kopers, huurders en verkopers de inzichten te bieden die ze nodig hebben om weloverwogen beslissingen te nemen over waar te wonen.
www.trulia.com/rent/rental-resumeSoms zijn de meest bevredigende bewegingen die subtiel zijn, en in dit geval is dat precies wat mijn aandacht trok. Deze SVG-animatie (ontworpen door Jon Campos, geanimeerd door Sarah Drasner) verkoopt het idee echt bij het indienen van een cv en doorloopt de stappen visueel over hoe gemakkelijk een formulierinzending kan zijn. Zoveel geweldig dat is alles SVG en GreenSock.
Wil je wat killer-SVG-patronen voor je volgende project? SVG Generation is een geweldige plek om die te krijgen en aan te passen voordat je gaat downloaden. Creëer iets van gecompliceerde zig-zags, spoelen, kubussen, striping en nog veel meer. Zelfs spijkerbroek:
www.svgeneration.com/recipes/Blue-JeanPas parameters aan zoals streekkleuren, grootte en opvullingen. Een geweldig project dat ook open source is op GitHub. Je kunt nog een geweldige SVG-patroonmaker van Philip Rogers uitzoeken op basis van Lea Verou's CSS3 Pattern Gallery.
Iedereen die SVG begrijpt, kent het werk van Sara. Ik koos beide demo's omdat ik ze echt nuttig vind in elke vorm van onderwijs en in een projectvorm.
Als u niet begrijpt wat het kenmerk viewBox doet, hoeft u niet verder te zoeken. Deze demo verwijdert het mysterie van viewBox en laat je in realtime zien hoe de waarden het resultaat beïnvloeden. Uitstekend werk Sara!
sarasoueidan.com/demos/interactive-svg-coordinate-system/Circulus is een van die real-time demonstratiehulpmiddelen die ook kan worden gebruikt om het resultaat in uw project op te nemen. Cirkelmenu's zijn behoorlijk hip, vooral als je kunt kijken hoe ze worden gemaakt en aangepast recht voor je!
Conclusie
SVG is tegenwoordig overal op internet! Laat ons weten op welke inspirerende websites je SVG-schittering hebt gespot en bekijk deze leermiddelen op Tuts + om jezelf op de hoogte te houden:
Accentsconagua