
React, Redux and Svg Animations Part 1
This is a practical article (includes a github project you can clone) on the basics of using React, Redux and Styled-components to make Awesome Svg animations.
The project i made for this article will help you understand how to work with react-redux and how to use it to manage your svg properties.
Is this article for you? I will use in this project: React, Redux, Svg and styled-components.
If you are new to one of these technologies or have some experience with them I am sure you will find this article/ project valuable for you.
If you are a React, Redux, Svg, Styled-components ninja you might not find here some thing new.
So here is my short story about struggling and “wasting” time on svg animations… (:
2 monthes ago i started working on a new project. An education web-app for kids.
While i was working on the feed page, I felt that something is missing there… The drawings were beautiful, the grid lines were perfect but still, It felt a bit boring…
I started thinking, how can i make this page more FUN? So i started making some css/js animations and the page became more reactive and fun.
but… it wasn`t what i had in my mind.
So… For the first time in my life i steped into the SVG files( Yes, yes… Thoes files you get from the designers and just use them as another png/jpg image in the project but happy that they are lighter and vectorial) and started to play with the code inside.
A new world opened to me at that moment. And in this article i will try to give you a bite of it.
What is Svg ? svg is a “Scalable Vector Grphics” . Ok… And in other words?… For now lets just say we can use the same file for rendering shapes/drawings/ logos in different sizes and the quality of them will stay the same.
In the project we can see how we can create an svg from scratch only by using js, basic data structure and 3common svg tags: <svg>(off course) , <g> and<path>.
<g> is for grouping elements and <path> is for creating shapes.
In the Project we have 2 main components: Loader.js and Triangle.js.
The whole state of this app is managed through Redux.
Lets start with creating an Svg shape in our jsx code
It is very simple. We can use the Svg tags within our jsx code just like i did in the Loader file where you can see <svg><g><Triangle/></g></svg> (Triangle is basically a path).
to a <path> element we can pass a d property which describes the shape of the path.
for example: <path d=”M 0 60 L 30 0 L 60 60 Z”> will draw a triangle.
(M 0 60) is the starting point, (L 30 0) is the second point, ( L 60 60) is the third point and Z means close this shape (make a line from the last point to the first one).
* Try to play with it a bit before you continue reading.
Where is the javaScript here??
We can use js to create paths which are more dynamic, reactive and readable.
the magic starts with the word join!
we can take this line: <path d=”M 0 60 L 30 0 L 60 60 Z”>
and make it to this: <path d={[‘M’, 0, 60, ‘L’, 30, 0, ‘L’, 60, 60, ‘Z’].join(“ “)}>
which means we can make a function like this (gets points and return a triangle):
const Tri= ({p1X, p1Y, p2X, p2Y, p3X, p3Y}) =>
<path d={[‘M’, p1X, p1Y, ‘L’, p2X, p2Y, ‘L’, p3X, p3Y, ‘Z’].join(“ “)}>
Now, if we want to create 6 triangles one in another (like i did in the project),
We can do something like i did in the Loader.js component.
We create the biggest triangle and then we write a function (makeSmallerTriangle) which gets the main triangle coordinates and a number which indicates the ratio we want to decrease by the new triangle in relation to the biggest one.
this function will look something like this :
const biggestTriangleCoordinates =
{x1: 0, y1: 60, x2: 30, y2: 0, x3:60, y3: 60}
const makeSmallerTriangle = (biggestTriangleCoordinates, shrinkSize) => {
const newTriVertices = [[], [], []];
newTriVertices[0][0] = biggestTriangleCoordinates.x1 + shrinkSize * 5;
newTriVertices[0][1] = biggestTriangleCoordinates.y1;
newTriVertices[1][0] = biggestTriangleCoordinates.x2;
newTriVertices[1][1] = biggestTriangleCoordinates.y2 + shrinkSize * 10;
newTriVertices[2][0] = biggestTriangleCoordinates.x3 -shrinkSize * 5;
newTriVertices[2][1] = biggestTriangleCoordinates.y3;
return newTriVertices;
}
const allOfMyTriangles = [];
for(let i=0;i<6;i++){
allOfMyTriangles.push(makeSmallerTriangle(biggestTriangleCoordinates, i))
}
allOfMyTriangles will contain 6 arrays which each one of them contains 3 arrays with 2 numbers in each one (x,y).
allOfMyTriangles = [ [ [x1,y1], [x2,y2], [x3,y3] ] ,[…],[…],[…],[…],[…]].
now we can do:
allOfMyTriangles.map((vertices, index)=>
<path fill={red} opacity={0.1} m={[“m”, vertices[0].join(“ “), “L”, vertices[1].join(“ “),” L”, vertices[2].join(“ “),”z”].join(“ “)}/>
And now we should see the 6 triangles on the screen.
I will stop here for this article and will continue talking on how to use redux for managing our svg and animations state, some basics intro to styled-components and some mid-level — advanced topics in styled-components.
Hope this one was valuable for you.
Git repo: https://github.com/nir-ne/react-redux-svg-animations
Thank you for reading and hope to see you on the next article,
Nir Nehoray.
