Iridescent crystal with raymarching and signed distance fields
When building a 3D scene using libraries such as Three.js we generally use meshes. You define a geometry attach some material to it to…
Varun Vachhar
I am a developer with a strong focus on design, interactivity and animation. Originally from New Delhi, I currently live in Toronto and am the Director, UI Architecture at Rangle.io. In my spare time, I like to experiment with creative coding, making triangles and other playful experiences for the web.
Latest posts
How we built the Storybook Day 3D animation
Storybook just hit a major milestone: version 7.0! With a re-engineered codebase and bunch of new features, it's faster and more stable than…
Three ways to create 3D particle effects
Particles will never not be cool! I've been obsessed with them since the day I was introduced to generative art. They're super versatile…
How to build stunning 3D scenes with React Three Fiber
WebGL is the magic sauce behind Solar Storm , an audio-reactive music video that renders live in the browser. After fumbling around with…
Noise in Creative Coding
Noise is an indispensable tool for creative coding. We use it to generate all kinds of organic effects like clouds, landscapes and contours…
Let's Build a Confetti Cannon
Confetti cannons are fun! Both to play with and to build. Let's learn to make one. Along the way, we'll cover particle systems and a bit of…
Scrollytelling with React
Scrollytelling is a visual and interactive form of storytelling. It consists of a logical sequence of visualizations. They accompany a…
Making things move
One of my favourite forms of creative coding is to add motion to static images. The process is always the same: pick an image, recreate it…
React Icon System
Icons play a crucial role in interface design. They can certainly be used as visual embellishments, but they are quite often able to convey…
Figma Plugins
Figma plugins extend the core product's functionality and allow designers to enhance and automate their workflow. Building a plugin is…
Styled System Revisited
Much has changed in the world of Styled System since my last post . There are fewer packages to deal with; it is much more performant and…
Side-Loading a Design System
As you go from a smaller to a medium-sized team, the need to share knowledge becomes crucial. It is the perfect time to invest in a design…
Dark Mode
After several years of using Jekyll, I switched over my website to Gatsby. Jekyll worked great for most things. The part that I struggled…
Why Not Both?
The web is defined by the interplay of various components: back-end technologies such as servers and databases to support the website itself…
What is a Design System?
Defining what a Design System is and what it means for an organization can be tricky. In this post, we'll take the conversation of Design…
Reuleaux Polygons
I have always been fascinated by the Reuleaux triangle. It is a shape formed by the intersection of three circles. Sort of like a ballooned…
Component Based Design System With Styled-System
Component-based design system is the practice of splitting the UI into small, isolated and more manageable parts; backed by a set of design…
Component Based Design System With Tachyons
A Design system is a collection of rules, constraints and principles applied to your design and development process. I most often encounter…
Components
Everything is a component. It took me a surprisingly long time to come to terms with this idea. I learnt to build UIs using templates. These…
JavaScript Frameworks: The Year of Convergence
If 2016 was the year of JavaScript fatigue then 2017 was most certainly the year of convergence. Most JavaScript frameworks have converged…
Polar Coordinates 🌀
Cartesian Coordinate System A coordinate system allows us to use numbers to determine the position of points in a 2D or 3D space. The most…
Animating Clipped Shapes
Another #postAboutYourPen post. This time I'm going to explain how I recreated Herry Koo's SA 15 dribbble shot using SVG and animejs…
Metaballs
Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs. From a mathematical perspective they are an iso…
Learning CSS Grid – Part 2
In part one I introduced the CSS Grid Layout Module. We covered some basic terminology and talked about how to create layouts by placing…
Draggable Elements with RxJS
I've written previously about making DOM elements draggable using a combination of mouse and touch events . Recently I discovered a more…
Learning CSS Grid
CSS Grid is here! As of March 2017, all major browsers support it. Given this good news I decided to spend some time to better understand…
Git Rebase
What is a rebase? Assume the following git history where you are working on the my-feature branch. After git rebase master this would…
Component based SVG Icon System
Much has been written about SVG Icon Systems and why they are amazing . In this post I want to share my workflow for creating a component…
Touch and Mouse Together
If you have built a web app in the past few years, you've probably had to deal with touch events. In many cases this was limited to handling…
Flattening Deep Hierarchies of Components
Components are an awesome tool for building interfaces. They allow you to break down the UI into distinct reusable elements. These can then…
OAM and React & SVG Starter
Last April Ainsley Wagoner posted this awesome dribbble shot. I loved the idea – it reminded me of colour field paintings. I reached out…
Chillwave
A few days ago I came across this creative studio called This Also . They just launched a new site. It not only showcases some of their…
Parallax With Angular
Lately I've been obsessed with Monument Valley. Love the game and the aesthetic even more. I even set up my Electric Object EO1 with a…
Truncation
I recently discovered the idea of truncation. It is a fascinating concept. You rip apart a vertex to create a new facet and in turn more…
Triangle.life
I love triangles! Last year I spent 30 days making a new triangle every day . It was a great experience. I learnt so much and it was…
SVG with React
I've been using ReactJS for about 6 months now and have been very happy with my experience as a developer. I never considered it for…
Location Services With AngularJS
Building mobile apps often requires working with location information. While, the Cordova geo-location plugin makes it quite trivial to get…
The Core
Another p5js/Codepen.io experiment. This time playing around with contours and lerp to get gradient fills inside a polygon. I've been…
Vector Field
While going through the Google Material Design handbook the illustration in the Users Initiate Change caught my eye. Around the same…
Squiggle
I've been obsessed with this illustration for a while now and really want to build an animated/generative version of it. But, as usual I…
Custom Easing with Sass
patakk is an insanely talented GIF artist and on his tumblr blog he shared this simple yet amazing easing function: The time variable…
Jamie XX
Trying out the React framework for the first time. Built a very minimal animation for Far Nearer by Jamie XX . Using the Rdio API to…
Open & Close
I wanted to replicate CreativeDash's open & close animation with pure CSS/SASS, but don't think it's possible without SVG path animations…
Two Level Shrinking Header and Footer with Ionic Framework
The Ionic Framework is an open source front-end framework for developing hybrid mobile apps with Cordova and AngularJS. I'm a big fan and…
Swipe-Li
Recently we – at rangle.io – had a chance to work on a short project. The app was largely a functional prototype built in 1 week. One…
Ellsworth Kelly Animated
In February 2014 Google launched it's DevArt project in partnership with Barbican . In Google's words: DevArt is a celebration of art…
AngularJS WebGL Directive
AngularJS directives are siloed reusable components. This is an example of a WebGL directive built using three.js . You can pass setup…