"SVG animation"
Bootstrap 3.3.0 Snippet by annilshinde

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500" height="350" viewBox="0 0 184 118" enable-background="new 0 0 184 118" xml:space="preserve">
<g id="big-fish" >
<path fill="#89BD40" d="M92.909,50.337c0,0,31.716-39.319,61.991,3.669c0,0,13.631-15.072,14.811-14.155
c0,0-0.787,4.194-2.098,5.505l-12.451,10.091l11.403-7.732l-0.524,3.146l-10.354,5.634l9.697-4.063l-0.262,2.752l-9.174,2.359
l8.912-1.441l0.131,2.228l-9.174,0.655l9.043,0.394l0.262,1.704l-9.043-0.918l9.043,1.705l0.655,2.227l-10.222-2.359l10.615,3.803
l1.572,3.014l-10.746-5.243l11.533,6.815l3.67,6.029c0,0-7.602-1.836-15.597-11.534c-0.146,1.183-2.818,20.188-19.266,27.785
c-14.181,6.55-32.404,1.755-43.12-12.319l30.668-15.072L92.909,50.337z"/>
<path d="M120.785,50.085c-0.305,0.126-0.454,0.304-0.706,0.519c-0.495,0.424-1.073,0.743-1.69,0.947
c-1.051,0.349-2.213,0.366-3.258-0.016c-2.844-1.037-2.789-3.765-2.736-6.3c0.003-0.178-0.292-0.231-0.32-0.045
c-0.396,2.602-0.057,5.487,2.642,6.657c1.106,0.479,2.366,0.529,3.523,0.209c0.891-0.247,2.405-0.872,2.651-1.863
C120.904,50.135,120.85,50.059,120.785,50.085z"/>
<polygon fill="#FFFFFF" points="92.909,50.337 92.843,53.548 95.727,51.844 95.53,55.121 98.414,53.154 98.348,56.3
101.034,54.334 100.642,57.414 103.263,55.415 103.066,58.594 105.72,56.563 105.49,59.643 107.948,57.545 108.111,60.56
110.307,58.691 110.209,61.871 112.634,59.839 112.83,63.115 115.287,61.019 115.255,63.901 118.007,61.871 "/>
<path fill="#FFFFFF" d="M94.285,80.088c0.066-0.263-0.852-4.85-0.852-4.653s3.047,3.244,3.047,3.244l0.164-3.112l2.622,1.802
l0.065-2.916l2.523,1.704l0.033-2.818l2.457,1.639l0.361-3.015l2.392,1.54l0.36-2.851l2.622,1.441l0.262-2.751l2.229,1.474
l0.393-2.654l2.425,1.572l0.262-3.079l2.491,1.9L94.285,80.088z"/>
<ellipse fill="#C2DB6E" cx="140.336" cy="66.211" rx="5.586" ry="9.552"/>
<ellipse fill="#C2DB6E" cx="128.771" cy="77.057" rx="2.539" ry="2.572"/>
<ellipse fill="#C2DB6E" cx="132.423" cy="88.312" rx="1.834" ry="1.933"/>
<ellipse fill="#C2DB6E" cx="134.127" cy="49.157" rx="1.9" ry="2.064"/>
</g>
<animateTransform
xlink:href="#big-fish"
attributeName="transform"
attributeType="XML"
type="translate"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: