Simples Soccer.svg

by Lucas Silva

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js">
</script>
<div id="container">
</div>
<script src="//cdn.jsdelivr.net/snap.svg/0.3.0/snap.svg-min.js"></script>

JavaScript 1.7

class SoccerField extends React.Component {

animate () {
var s = Snap("#svg-container");
var leftPupil = s.select("#retMaior");

leftPupil.animate({
  r: 50,
  fill: "lightgreen"
}, 1000);
}
        render(){
            return (
            <div>
              <svg id="svg-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 700" stroke="white" version="1.1">

       <path id="retMaior" d="M 575,20 L 50,20 50,700 1100,700 1100,20 575,20 575,700 z" stroke="white" strokeWidth="2" fill="green"/>

       <circle cx="575" cy="360" r="91.5" stroke="white" strokeWidth="2" fillOpacity="0"/>
       <circle cx="575" cy="360" r="2" stroke="white" fill="white"/>

       <circle cx="160" cy="360" r="2" stroke="white" fill="white"/>
       <circle cx="990" cy="360" r="2" stroke="white" fill="white"/>

       <path d="M 50,324.4 L 40,324.4 40, 396.6 50 396.6 z" stroke="white" strokeWidth="2" fillOpacity="0"/>
       <path d="M 1100,324.4 L 1110,324.4 1110,396.6 1100,396.6 z" stroke="white" strokeWidth="2" fillOpacity="0"/>

       <path d="M 50,269.4 L 105,269.4 105,451.6 50 451.6 z" stroke="white" strokeWidth="2" fillOpacity="0"/>
       <path d="M 1100,269.4 L 1045,269.4 1045,451.6 1100,451.6 z" stroke="white" strokeWidth="2" fillOpacity="0"/>

       <path d="M 50,159.4 L 215,159.4 215,561.6 50 561.6 z" stroke="white" strokeWidth="2" fillOpacity="0"/>
       <path d="M 1100,159.4 L 935,159.4 935,561.6 1100,561.6 z" stroke="white" strokeWidth="2" fillOpacity="0"/>
       <path d="M 215,286.875 A 91.5,91.5 0 0,1 215,433.125 z" stroke="white" strokeWidth="2" fill="green"/>
       <path d="M 935,286.875 A 91.5,91.5 0 0,0 935,433.125 z" stroke="white" strokeWidth="2" fill="green"/>

       <path d="M 50,30 A 10,10 0 0,0 60,20 L 50,20 z" stroke="white" strokeWidth="2" fillOpacity="0"/>
       <path d="M 60,700 A 10,10 0 0,0 50,690 L 50,700 z" stroke="white" strokeWidth="2" fillOpacity="0"/>
       <path d="M 1100,690 A 10,10 0 0,0 1090,700 L 1100,700 z" stroke="white"...