Published in Muzli - Design Inspiration·PinnedLeniolabs Brand and Website RedesignRedefining our new identity — Three years after redesigning our brand and site, we decided it was time for a change. Not only the world is moving dramatically fast. …Branding6 min read
Published in Muzli - Design Inspiration·PinnedBuilding an SVG virtual standA responsive illustrated website with CSS Grid — Nerdearla is an annual conference with talks and workshops about technology and science here in Buenos Aires. As sponsors of the event with Leniolabs, we used to have a stand where people could come by and say hi, play games with us, talk about technologies we love, and get some…Web Development5 min read
Published in Geek Culture·PinnedHow I Made a Generator for SVG Loaders With Sass and SMIL OptionsWhile learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let’s take a look at one of those tools: a generator that makes SVG loaders and lets you choose between SMIL or Sass animation, different styles, colors…Svg Animation7 min read
Published in Level Up Coding·May 4, 2021How to Add a Double Border to SVG ShapesLet’s say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you can’t use any graphic editor — they need to be generated at runtime — so you have to solve it with CSS or within the SVG syntax. Your first question…SVG4 min read
Published in UX Collective·Sep 30, 2020DIY SVG icons: build your own set with basic shapesRead the Chinese version here. Translated by Rotten orange 腐烂的橘子 There are different ways to work with icons, but the best solution always includes SVG, either inline or linked up as a file. Sometimes the icons we download (or the ones we create with drawing software) have a lot of…Programming8 min read
Published in Muzli - Design Inspiration·May 6, 2020Adding value to our client’s platform and brandHow to make a brand thrive along with the site — Not every brand guidelines include definitions for the usage of photography, illustrations, or image styles. Far from being a problem, this could mean a great opportunity for a redesign project. While filling the requirements for a software development project, we discovered the chance to create and explore a visual universe…Illustration7 min read
Mar 10, 2020Usar y reusar todo en SVG … ¡Incluso animaciones!Cómo crear y optimizar SVG y animaciones CSS — Read the english version here. Si estás familiarizado con SVG y animaciones CSS, o empezaste a trabajar con ellas a menudo, acá hay algunas ideas a tener en cuenta antes de comenzar a trabajar. …SVG6 min read
Published in UX Collective·Mar 10, 2020How to use and reuse everything in SVG… even animationsBuild and optimize SVG and CSS animations. — Link a la versión en español. If you are familiar with SVG and CSS animations and started to work with them often, here are some ideas you might want to keep in mind before jumping into the job. This article will be about learning how to build and optimize your…CSS6 min read
Mar 3, 2020SVG: más allá de la compresión automática con el elemento “use”Reducí el tamaño de tus archivos y mejorá tu código — Read the english version here. Si dibujas tus propios SVG o si los descargas de internet, herramientas como este editor de SVG o SVGOMG son tus amigos. Comprimir los archivos con estas herramientas puede tomar solo unos segundos y reducir su tamaño muchísimo. …SVG7 min read
Published in UX Collective·Mar 3, 2020Going beyond automatic SVG compression with the “use” elementReduce your file size and improve your code. — Link a la versión en español. If you draw your own SVG files or if you download them from the internet, tools like this SVG-Editor or SVGOMG are your friends. Compressing the files with those tools takes only a few seconds and reduces your file size a lot. …SVG7 min read
