Share
Los gráficos vectoriales escalables (SVG) no necesitan presentación para los diseñadores web. Se escalan hacia arriba y hacia abajo, se reproducen bien con animaciones, son un formato poderoso para íconos y mucho más. Esta publicación de inspiración es parte de una serie en curso en Envato Tuts +, que reúne una lista de diez sitios web que hacen un uso inspirador de SVG en un sentido tecnológico o creativo..
Waark es un estudio web creativo que se enorgullece de crear sitios web elegantes y funcionales diseñados a medida. Cuando se lanzó por primera vez, tomó a la comunidad por asalto con todo su glorioso movimiento de vanguardia, aprovechando Canvas y, por supuesto, SVG.
waaark.comParte de mi movimiento favorito ocurre en este tipo de secuencias de carga, donde el gráfico central cobra vida en la carga de la página y continúa con movimientos sutiles. También es bueno tener en cuenta que la mayoría de las animaciones SVG están utilizando la biblioteca GreenSock. Asegúrate de ver este video publicado de I Hate Tomatoes deconstruyendo con más detalle:
Type Terms es una hoja de trucos tipográfica animada. Si eres nuevo en la tipografía, o simplemente quieres refrescar la memoria, Type Terms es la herramienta perfecta para ti..
www.supremo.tv/typeterms/Un uso realmente inspirador de SVG para enseñar sobre terminología tipográfica. Cada carácter de la lección llama la atención sobre el término de la discusión, lo que facilita la identificación de lo que se presenta. Si bien no considero que este sitio sea técnicamente Inspirador, su uso me parece muy creativo. Muchos de los ejemplos de movimiento SVG son bits divididos, usando CSS para el movimiento.
Cuberto es una agencia creativa digital con sede en el Reino Unido y es un equipo con un gran ojo para el diseño y el movimiento. La forma en que el sitio web de Cuberto usa SVG es simplemente maravillosa; desde simples movimientos de letras, hasta el pequeño indicador del mouse que proporciona información para que el usuario pueda desplazarse.
cuberto.comCada uno de los movimientos de las letras es 100% SVG. Cuberto utiliza el enmascaramiento para hacer que cada personaje se forme con textura separada. Un sitio muy inspirador y uso creativo de SVG y movimiento. Una nota final es que los fanáticos de GreenSock estarán encantados de saber que GSAP está en uso. Increíble.
Horizon es lo que ellos denominan como un "Backend de JavaScript en tiempo real" que ayuda a construir y desplegar rápidamente usando una API simple.
horizonte.ioMi parte favorita de este sitio, y realmente el único lugar que usa SVG, son las pantallas que contienen una escena en movimiento. Esto utiliza GSAP y una serie de máscaras y trazados de clip. El otro aspecto que realmente disfruté descubriendo es el hecho de que puedes anidar un SVG dentro de un SVG. Increíble!
¿A dónde vas cuando quieres logotipos SVG de calidad? SVG porno por supuesto! Una gran colección de logotipos para desarrolladores, editores y diseñadores que cubren un amplio espectro de categorías.
svgporn.comEs simple, intuitivo y al punto. SVG Porn proporciona un espacio para los logotipos de SVG (incluido este ejemplo familiar anterior) que están abiertos al público que están optimizados (eliminando rutas duplicadas, sin agrupación excesiva, sin definiciones vacías, líneas, etc.) y disponibles en GitHub.
Esta herramienta en particular muestra cómo crear gráficos generados matemáticamente usando SVG, JavaScript y React.
jxnblk.com/react-icons/#live-demoUsando cada control deslizante, un usuario puede actualizar los puntos de ruta SVG e incluso cambiar el diámetro.
Esto se utiliza para crear gráficos de píxeles perfectos, derivados matemáticamente que la mayoría de las aplicaciones no pueden hacer bien. Me encantan estos tipos de herramientas que muestran el código en vivo a medida que se actualiza y se vuelve casi mágico a medida que el gráfico se transforma y cambia de forma al mover cada control deslizante. Verdaderamente inspirador y verdaderamente fantástico..
Fleximize es una empresa que ofrece préstamos financieros a pequeñas empresas con la misión de revolucionar el mundo de la financiación empresarial..
Fleximize Squad es una experiencia lúdica basada completamente en animaciones SVG. A través de tres historias diferentes interrelacionadas, los usuarios pueden acceder a una forma inteligente de solicitar un préstamo.
fleximize.com/missionEste sitio alucinante reúne el audio con el movimiento SVG y, por supuesto, utilizando GreenSock. Esta es una experiencia muy lineal, así que no esperes presionar el botón Atrás con este monstruo, pero sigue siendo un ejemplo fantástico que disfrutarás durante días con el inspector de DevTools abierto..
El proyecto Mo.js de LegoMushroom es una biblioteca para crear animaciones y efectos rápidos y sedosos para la Web..
Lo que me parece realmente inspirador con este proyecto es el uso de la física en el movimiento, como desenfoques, rebotes y mucho más, además, es de código abierto y cualquiera puede contribuir para ayudar a mejorar el código bajo el capó. ¿Lo mencioné también combina audio? Revisa este proyecto inmediatamente!
Demostraciones: https://github.com/legomushroom/mojs#demos
Trulia es un recurso de bienes raíces móvil y en línea que facilita la búsqueda de una vivienda al proporcionar a los compradores, inquilinos y vendedores la información que necesitan para tomar decisiones informadas sobre dónde vivir..
www.trulia.com/rent/rental-resumeA veces, los movimientos más satisfactorios son los que son sutiles, y en este caso eso es exactamente lo que me llamó la atención. Esta animación SVG (diseñada por Jon Campos, animada por Sarah Drasner) realmente vende la idea de enviar un currículum vitae y recorre los pasos visualmente sobre lo fácil que puede ser enviar un formulario. Tanto impresionante que es cada bit SVG y GreenSock.
¿Quieres algunos patrones SVG asesinos para tu próximo proyecto? SVG Generation es un gran lugar para obtenerlos y personalizarlos antes de descargarlos. Crea cualquier cosa desde zig-zags complicados, bobinas, cubos, rayas y mucho más. Incluso blue jeans:
www.svgeneration.com/recipes/Blue-JeanPersonalice parámetros como colores de trazo, tamaño y rellenos. Un proyecto asesino que también es de código abierto en GitHub. Puede visitar otro gran creador de patrones SVG por Philip Rogers y basado en la galería de patrones CSS3 de Lea Verou.
Cualquiera que comprenda SVG conoce el trabajo de Sara. Elegí ambas demostraciones porque las encuentro realmente útiles en todos los sentidos de la educación y en forma de proyecto.
Si tiene dificultades para entender lo que hace el atributo viewBox, no busque más. Esta demostración eliminará el misterio que es viewBox y le mostrará en tiempo real cómo los valores afectan el resultado. Trabajo sobresaliente sara!
sarasoueidan.com/demos/interactive-svg-coordinate-system/Circulus es otra de esas herramientas de demostración en tiempo real que también se pueden utilizar para incluir el resultado en su proyecto. Los menús de Circle son bastante modernos, especialmente cuando puedes verlos creados y personalizados justo frente a ti!
Conclusión
¡SVG está a nuestro alrededor en la web en estos días! Háganos saber en qué sitios web inspiradores ha visto la brillantez de SVG y consulte estos recursos de aprendizaje en Tuts + para ponerse al día:
Accentsconagua