CODEWITHSUNDEEP
xmlsvgadobe-illustratorsvg-animate
Gryva
Gryva

Reputation: 327

SVG path animation

Need to make waves animation for the sea part of the picture as you can see, but the SVG code of that part is exported from Illustrator to SVG and it's really complicated and uses many paths. So my question is:

is there a way to animate every path with the same animation and is it possible for an animation to add the current position of each path and "shift" it to another position that is relative to the current position?

NEED SOMETHING LIKE THIS: (let's say I want to shift my paths for 10px horizontally and 5px vertically from their original coordinates - to create a slight movement of water)

<animate attributeName="x" from="current_position" to="current_position+10" begin="1s" dur="10s"/>
<animate attributeName="y" from="current_position" to="current_position+5" begin="1s" dur="10s"/>

(from current position of every path)

Also ONLY using SVG.

project

Upvotes: 1

Views: 176

Answers (1)

chrwahl
chrwahl

Reputation: 13070

Maybe you could use a filter?

<svg width="400" xmlns="http//www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <linearGradient id="sky" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="red" />
      <stop offset="30%" stop-color="red" />
      <stop offset="70%"  stop-color="orange" />
      <stop offset="95%"  stop-color="orange" />
    </linearGradient>
    <filter id="ripple">
      <feTurbulence result="turbulence" type="fractalNoise" stitchTiles="stitch" baseFrequency=".03,.03" seed="12"/>
      <feColorMatrix type="hueRotate">
        <animate attributeName="values" from="0" to="360" dur="8s" repeatCount="indefinite"/>
      </feColorMatrix>
      <feGaussianBlur in2="turbulence" stdDeviation="10" />
      <feDisplacementMap xChannelSelector="A" yChannelSelector="R" in="SourceGraphic" scale="4">
        <animate attributeName="scale" dur="8s" values="10;5;10" repeatCount="indefinite"/>
      </feDisplacementMap>
    </filter>
  </defs>
  <rect x="0" y="0" width="200" height="100" fill="url(#sky)"/>
  <rect x="0" y="100" width="200" height="100" fill="navy"/>
  <g transform="translate(70 100)" filter="url(#ripple)" fill="orange">
    <path d="M 0 10 C 16 7 30 10 40 10 C 21 14 10 10 0 10" />
    <path transform="translate(0 20)" d="M 0 10 C 16 7 30 10 40 10 C 21 14 10 10 0 10" />
    <path transform="translate(20 10)" d="M 0 10 C 46 4 30 10 40 10 C 21 14 10 10 0 10" />
  </g>
</svg>

Upvotes: 1

Related Questions