SVG / JS animations
Vector logos, icons and illustrations animated with JavaScript, most likely using
GSAP library.
Single file SVG animations
Some animations can be done as a single .svg file - without any external styles or JS dependencies. The animations below are only 2kb and 1kb size.
HTML5 Canvas
Same as with SVG, I do some 2D and pseudo-3D visuals on <canvas> without any special JS libs. Just vanilla JS, light and simple.
Three.js and WebGL
I love WebGL and particularly interested in collaborations related to Three.js / WebGL — pretty much anything from 3D modeling to writing custom GLSL shaders.
This is just a preview. See the live demo
here
This is just a preview. See the live demo
here
This is just a preview. See the live demo
here
This is just a preview. See the live demo
here
This is just a preview. See the live demo
here
This is just a preview. See the live demo
here
This is just a preview. See the live demo
here
D3.js data visualizations
If some data is involved, D3.js is quite helpful. The examples below are SVG graphics, but I also use CSS, HTML5 Canvas, Three.js, WebGL, and other tools for data representations.
Publications
Coding an interactive (and damn satisfying) cursor: 7 simple steps + 2kb of code
Solving the SVG gradient-along-path issue using GSAP
Making a background blob animation with just 1.5KB: Step-by-step guide
Creating an interactive 3D dice roller with Three.js and cannon-es
Exploring typing effects with Three.js and WebGL
Creating a 3D packaging box that folds and unfolds on scroll using Three.js and GSAP
Who I am
My name is Ksenia Kondrashova.
I'm an independent contractor and front-end developer focused on motion design, animations, and visualizations.
Creative Front-End Developer if you wish :)
I’m experienced with both coding and design tools. I can assist with
- 3D web experiences
- 2D animations
- Interactive maps & infographics
- Data visualizations
- Browser games
I have an MA degree in embedded electronics (I still love hardware!) but turned to web
development a few years after graduation. Since then, I have worked on various projects for clients worldwide.