Cycle Loader
Small idea to make loaders more brand related. Created this with GreenSock and SVG.

I am a freelance Creative frontend engineer based in India. I can help you with creating and optimizing SVGs, creating web animations, responsive layouts, websites, webapps and many more.
I emphasize on accessibility and performance in my work.
I blog on these topics and I am available as a guest author.
“We worked with Trapti to build our corporate website. The design was extremely custom with many complex SVG animations. Trapti was a great development partner with a positive attitude and she completed the website build exactly as we had imagined. The complex animations were built to be fully responsive and Trapti was sure to advise us with best practices throughout the process. I recommend Trapti for website development services and hope to partner with her in the future!”
“A very good experience and a pleasure working with her. Proactive in finding adequate solutions in the development of the user interface; punctual, precise, honest and flexible. Excellent animation management skills with SVG and GSAP. The clean and elegant code tells of her skill and competence.”
"I had the chance to work with Trapti on a tricky svg animation, not only she delivered a perfect work in time and struggled to solve challenging points of the project, but she also gave me advices and followed up the project in the next days, to check if everything was alright. I plan to work with her in the future, and I would recommend her to anyone, not only for her design and coding skills, but also for her super professional attitude."
"We were looking for a few high-end animation prototypes to bring particular sports photos to life, and Tripti delivered! She brought creativity to the table, plus her extreme attention to coding details."
I wanted to get familiar with Astro. So I used Frontend Mentor's challenge design and created this in Plain HTML, CSS and Javascript.
An innovative application of SVG masking to achieve this affect in matter of minutes.
Two dimensional and outside-in. What does it mean ?
In this article I am going to answer below questions about fr units:
It is common to set styles in Javascript. Here are some uses-cases and ways to style elements in Javascript. I will also be describing one common use case at the end of this article.
If you have already worked with SVGs or you are new to it, this article is for you. I am sharing few important concepts which will help you debug and create SVGs.
Creating a wave shape logo using the SVG textOnAPath.
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics. There are various reasons why we should use this
Which CSS technique to use — Styled Components, CSS Modules, Component stylesheets, Single stylesheets.
Let's see step by step to remove transform from SVG generated by Illustrator
Visited the Himalayas in Arunachal Pradesh. Pictures and words are very less to express the feeling which you get in Himalayas.
Sharing experience of my trip
Finding reading a boring hobby to reading 15 books in 2020
2020 recalling and it was good
In this article I will talk about how I started and my experience as freelancer.
Wrote about how the year went by
Small idea to make loaders more brand related. Created this with GreenSock and SVG.
Small idea to make loaders more brand related. Created this with GreenSock and SVG.
Small idea to make loaders more brand related. Created this with GreenSock and SVG.
Designning radio buttons was always a hard part. Using SVG and animations crafted this idea of making radio buttons more meaningful.
This is a handdrawn SVG, part of learning how nested SVG's work. Created this as part of Codepen challenge.
Created this animation with SVG and GSAP. Similar animation created as part of client work