SVG Brilliance 10 inspirierende Beispiele aus dem Web

Skalierbare Vektorgrafiken (SVG) benötigen keine Einführung für Webdesigner. Sie skalieren auf und ab, spielen gut mit Animationen, sind ein mächtiges Format für Icons und vieles mehr. Dieser Inspirationsbeitrag ist Teil einer fortlaufenden Serie bei Envato Tuts +, die eine Liste von zehn Websites zusammenfasst, die SVG auf eine technische oder kreative Weise inspirieren.

Waark

Waark ist ein kreatives Webstudio, das stolz darauf ist, elegante und funktionale, individuell gestaltete Websites zu erstellen. Als es zum ersten Mal veröffentlicht wurde, eroberte es die Community mit all ihren glorreichen, innovativen Bewegungen, die Canvas und natürlich SVG nutzten.

waaark.com

Einige meiner Lieblingsbewegungen finden in diesen Arten von Ladesequenzen statt, bei denen die mittlere Grafik beim Laden der Seite zum Leben erweckt wird und mit subtilen Bewegungen fortgesetzt wird. Es ist auch gut zu wissen, dass die meisten SVG-Animationen die GreenSock-Bibliothek verwenden. Schauen Sie sich dieses Video von I Hate Tomatoes an, das in weiteren Einzelheiten dekonstruiert wurde:

Supremos Typeterms

Typbegriffe sind animierte typografische Spickzettel. Wenn Sie sich mit Typografie noch nicht auskennen oder nur Ihr Gedächtnis auffrischen möchten, ist Type Terms das perfekte Werkzeug für Sie.

www.supremo.tv/typeterms/

Eine wirklich inspirierende Verwendung von SVG, um typografische Terminologie zu vermitteln. Jeder Charakter der Lektion macht auf den Diskussionsbegriff aufmerksam, sodass er leicht erkennen kann, was präsentiert wird. Ich halte diese Seite nicht für technisch inspirierend finde ich seine Verwendung sehr kreativ. Viele der SVG-Bewegungsbeispiele sind aufgeteilte Bits, wobei CSS für die Bewegung verwendet wird.

Cuberto

Cuberto ist eine digitale Kreativagentur mit Sitz in Großbritannien und ein Team mit einem ausgeprägten Auge für Design und Bewegung. Die Art, wie die Cuberto-Website SVG verwendet, ist einfach wunderbar. von einfachen Buchstabenbewegungen bis hin zum winzigen Mausindikator, der dem Benutzer Einblick in das Blättern ermöglicht.

cuberto.com

Jede Bewegung der Buchstaben besteht zu 100% aus SVG. Cuberto verwendet Maskierung, um jedes Zeichen mit separater Textur zu gestalten. Eine sehr inspirierende Seite und kreative Verwendung von SVG und Bewegung. Eine abschließende Bemerkung ist, dass die Fans von GreenSock begeistert sein werden, dass GSAP verwendet wird. Genial.

Horizont

Horizon ist das, was sie als "Echtzeit-JavaScript-Backend" prägen, das mithilfe einer einfachen API schnell erstellt und implementiert werden kann.

horizon.io

Mein Lieblingsteil dieser Seite, und wirklich der einzige Ort, der SVG verwendet, sind die Bildschirme, die eine bewegte Szene enthalten. Dies verwendet GSAP und eine Reihe von Masken und Clippfaden. Der andere Aspekt, den ich wirklich entdeckt habe, ist die Tatsache, dass Sie eine SVG in eine SVG nisten können! Tolle!

SVG Porn

Wohin gehst du, wenn du qualitativ hochwertige SVG-Logos möchtest? SVG Porno natürlich! Eine großartige Logosammlung für Entwickler, Verleger und Designer, die ein breites Spektrum an Kategorien abdeckt. 

svgporn.com

Es ist einfach, intuitiv und auf den Punkt. SVG Porn bietet Platz für SVG-Logos (einschließlich dieses bekannten Beispiels oben), die für die Öffentlichkeit zugänglich und optimiert sind (doppelte Pfade entfernt, keine übermäßigen Gruppierungen, keine leeren Defs, Flusen usw.) und auf GitHub verfügbar sind.

Symbole reagieren

Dieses spezielle Tool zeigt, wie mathematisch erzeugte Grafiken mit SVG, JavaScript und React erstellt werden.

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

Mit jedem Schieberegler kann ein Benutzer die SVG-Pfadpunkte aktualisieren und sogar den Durchmesser ändern.

Dies wird verwendet, um pixelgenaue, mathematisch abgeleitete Grafiken zu erstellen, die für die meisten Anwendungen nicht geeignet sind. Ich liebe diese Art von Werkzeugen, die Live-Code anzeigen, wenn Sie aktualisieren und fast magisch werden, wenn die Grafik die Form verändert und die Form ändert, wenn Sie die einzelnen Schieberegler verschieben. Wirklich inspirierend und wirklich fantastisch.

Fleximize Squad

Fleximize ist ein Unternehmen, das kleinen Unternehmen Finanzkredite anbietet, um die Welt der Unternehmensfinanzierung zu revolutionieren.

Fleximize Squad ist eine spielerische Erfahrung, die vollständig auf SVG-Animationen basiert. Über drei verschiedene, miteinander verbundene Geschichten können Benutzer auf intelligente Art und Weise nach einem Darlehen fragen.

fleximize.com/mission

Diese atemberaubende Website bringt Audio mit SVG-Bewegung und natürlich mit GreenSock zusammen. Dies ist ein sehr lineares Erlebnis. Erwarten Sie also nicht, dass Sie mit diesem Monster den Back-Button drücken, aber es ist immer noch ein fantastisches Beispiel, das Sie tagelang genießen werden, wenn der DevTools Inspector geöffnet ist.

Mo.js

Das Mo.js-Projekt von LegoMushroom ist eine Bibliothek zum Erstellen schneller, seidiger, sanfter Animationen und Effekte für das Web.

Was mich an diesem Projekt wirklich inspiriert, ist die Verwendung von Physik in der Bewegung, wie Unschärfen, Springen und vieles mehr. Außerdem ist es Open Source. Jeder kann dazu beitragen, den Code unter der Haube zu verbessern. Habe ich schon erwähnt, dass es auch Audio kombiniert? Überprüfen Sie dieses Projekt sofort!

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

Trulia: Vermietung Lebenslauf

Trulia ist eine mobile und Online-Ressource für Immobilien, die das Finden eines Eigenheims ermöglicht, indem sie Käufern, Mietern und Verkäufern die Erkenntnisse vermittelt, die sie für fundierte Entscheidungen über ihren Wohnort benötigen.

www.trulia.com/rent/rental-resume

Manchmal sind die befriedigendsten Bewegungen die subtilsten, und genau in diesem Fall erregte ich meine Aufmerksamkeit. Diese SVG-Animation (entworfen von Jon Campos, animiert von Sarah Drasner) verkauft wirklich die Idee, einen Lebenslauf einzureichen, und geht die Schritte visuell durch, wie einfach ein Formular eingereicht werden kann. So toll, das ist alles SVG und GreenSock.

SVG-Generation

Willst du ein paar coole SVG-Patterns für dein nächstes Projekt? SVG Generation ist ein großartiger Ort, um diese zu erhalten und vor dem Download anzupassen. Erstellen Sie alles aus komplizierten Zick-Zacks, Spulen, Würfeln, Streifen und vielem mehr. Sogar blaue Jeans:

www.svgeneration.com/recipes/Blue-Jean

Passen Sie Parameter wie Strichfarben, Größe und Füllungen an. Ein Killer-Projekt, das auch auf GitHub Open Source ist. Sie können einen weiteren großartigen SVG-Pattern-Maker von Philip Rogers nutzen, der auf Lea Verous CSS3 Pattern Gallery basiert.

Circulus- und SVG-Koordinatensystem-Viewer

Jeder, der SVG versteht, kennt die Arbeit von Sara. Ich habe mich für diese beiden Demos entschieden, da ich sie in jedem Sinne der Ausbildung und in einer Projektform wirklich nützlich finde.

Wenn Sie Schwierigkeiten haben, zu verstehen, was das viewBox-Attribut tut, suchen Sie nicht weiter. Diese Demo entfernt das Mysterium viewBox und zeigt Ihnen in Echtzeit, wie die Werte das Ergebnis beeinflussen. Hervorragende Arbeit, Sara!

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

Circulus ist ein weiteres Echtzeit-Demonstrationswerkzeug, mit dem Sie das Ergebnis auch in Ihr Projekt integrieren können. Kreismenüs sind ziemlich angesagt, vor allem, wenn Sie sie direkt vor Ihnen erstellt und angepasst sehen können!

Fazit

SVG ist heutzutage überall im Internet zu finden! Teilen Sie uns mit, auf welchen inspirierenden Webseiten Sie SVG-Brillanz entdeckt haben, und schauen Sie sich diese Lernressourcen auf Tuts + an, um sich auf den neuesten Stand zu bringen: