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 frontend engineer. 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.
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
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
What people say
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.