Cycle Loader
Small idea to make loaders more brand related. Created this with GreenSock and SVG.
Hi, I'm Trapti. I SVG, animations and Web
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.
What people say
“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."
Work
I wanted to get familiar with Astro. So I used Frontend Mentor's challenge design and created this in Plain HTML, CSS and Javascript.
Writing
How to Get Handwriting Animation With Irregular SVG Strokes
CSS-TRICKSAn innovative application of SVG masking to achieve this affect in matter of minutes.
Thinking in CSS Grid
Medium - StatuscodeTwo dimensional and outside-in. What does it mean ?
CSS Grids — All about fr units
MediumIn this article I am going to answer below questions about fr units:
Setting CSS Styles with JavaScript
SoshaceIt 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.
7 Concepts: Why Your SVG Is the Way It Is?
SoshaceIf 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.
Bend It Like Trapti - a SVG logo
Creating a wave shape logo using the SVG textOnAPath.
Why SVG?
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics. There are various reasons why we should use this
Handling CSS at scale
MediumWhich CSS technique to use — Styled Components, CSS Modules, Component stylesheets, Single stylesheets.
In Illustrator- Remove transformations from SVG while exporting
dev.toLet's see step by step to remove transform from SVG generated by Illustrator
A 7 Nights 8 Days trip to Tawang (Arunachal Pradesh) Northeast India
MediumVisited the Himalayas in Arunachal Pradesh. Pictures and words are very less to express the feeling which you get in Himalayas.
Trip to Varkala - a cliff side beach in Kerala
Sharing experience of my trip
My Journey of becoming a bookworm
Finding reading a boring hobby to reading 15 books in 2020
Recollecting 2020
2020 recalling and it was good
My Freelancing Journey 2021
In this article I will talk about how I started and my experience as freelancer.
Year review 2021
Wrote about how the year went by
SVG and Animations
Fashion Store Loader
Small idea to make loaders more brand related. Created this with GreenSock and SVG.
Loader Text
Small idea to make loaders more brand related. Created this with GreenSock and SVG.
Radio button
Designning radio buttons was always a hard part. Using SVG and animations crafted this idea of making radio buttons more meaningful.
Sandwich Recipe
This is a handdrawn SVG, part of learning how nested SVG's work. Created this as part of Codepen challenge.
Multiple text animation
Created this animation with SVG and GSAP. Similar animation created as part of client work
