SVG with animation effect

 Hi everyone,
  
 I am new to SVG. 
 I would like to know how to make the repeated effect when scrolling on page as shown in the following examples, particularly the example Two: 
 example one:
 <a href="http://gardenestudio.com.br">example one</a>

 <a href="http://onedesigncompany.com/approach">example two</a>
  
  
  
 For SVG, I wonder what tool should I make good use of?

 After finishing the SVG part, I wonder how to make the effect as I want in the above examples?
 Since I am not familiar with SVG and code, I don't know if it is work....I am also not sure if it is sort kind of SVG graph(sorry i don't know how to describe it in technical terms if say anything unclear or wrong)
  
 Could anyone be generous to let me know in detail, better explain step by step how to make such kind of effect on the website if the above means is not work or if it is work... I don't mind learning with time and effort. 
 Thank you very much!!