非圧縮性流体で密度分布が変化する例
緑縦線：空間上の一点で計測する場合
Euler的に観測している
時間によって赤(高密度)になったり白(低密度)になったりする
緑枠：ある流体塊を追跡した場合
Lagrange的に観測している
どの時刻でも密度分布が変化しない
色はCUD推奨配色セットを使った
Chromeだとアニメーションが止まってしまうことがあるかも
flow.svg<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="g0">
<stop offset="0" stop-color="#ff4b00"/>
<stop offset="0.125" stop-color="white"/>
<stop offset="0.25" stop-color="#ff4b00"/>
<stop offset="0.375" stop-color="white"/>
<stop offset="0.5" stop-color="#ff4b00"/>
<stop offset="0.625" stop-color="white"/>
<stop offset="0.75" stop-color="#ff4b00"/>
<stop offset="0.875" stop-color="white"/>
<stop offset="1" stop-color="#ff4b00"/>
</linearGradient>
<pattern id="pattern" x="0" y="0" width="100%" height="100%" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
<rect x="0" y="0" width="100%" height="100%" fill="url(#g0)"/>
</pattern>
</defs>
<g>
<rect x="-100%" y="0" width="200%" height="100%" fill="url(#pattern)"/>
<rect x="10%" y="30%" width="20%" height="20%" fill="none" stroke="#03af7a" stroke-width="2%" />
<rect x="-90%" y="30%" width="20%" height="20%" fill="none" stroke="#03af7a" stroke-width="2%" />
<animateTransform attributeName="transform" type="translate" from="0,0" to="200,0" begin="0s" dur="2s" repeatCount="indefinite"/>
</g>
<rect x="70%" y="0" width="2%" height="100%" fill="rgb(3,175,122)"/>
</svg>