Cycle Loader
Small idea to make loaders more brand related. Created this with GreenSock and SVG.
Hi, I'm Trapti. I'm a Frontend Engineer
I am passionate about building a responsive, accessible, performant web for everyone. I love SVG, animations and CSS grid the most.
Core skills are HTML, CSS & JAVASCRIPT.
Currently focusing on learning web animations, SVG's and accessibility.
Writing
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.
