用animate可以实现类似的效果吗？

是的，可以使用 SVG 的 `<animate>` 元素来实现类似的效果。 `<animate>` 元素是 SVG 动画的一种方式，可以让元素的属性在一定的时间内从一个值变化到另一个值。

例如，要实现一个元素宽度变化的动画，可以使用以下的 SVG 代码：

<svg viewBox="0 0 200 100">
  <rect x="10" y="10" width="100" height="50">
    <animate attributeName="width" from="100" to="200" dur="0.5s" fill="freeze" />
  </rect>
</svg>

这段代码会创建一个矩形元素，初始宽度为 100，高度为 50。然后，通过 `<animate>` 元素来实现宽度从 100 变为 200 的动画效果。`attributeName` 属性指定要变化的属性，`from` 属性指定属性的起始值，`to` 属性指定属性的结束值，`dur` 属性指定动画的持续时间，`fill` 属性指定动画结束后元素的状态。

类似地，也可以使用 `<animate>` 元素来实现 SVG path 根据 width 变大的效果。例如：

<svg viewBox="0 0 200 100">
  <path d="M10 50 Q 50 80 90 50">
    <animate attributeName="d" to="M20 50 Q 100 160 180 50" dur="0.5s" fill="freeze" />
  </path>
</svg>

这段代码会创建一个二次贝塞尔曲线路径，起点为 (10,50)，终点为 (90,50)，控制点为 (50,80)。然后，通过 `<animate>` 元素来实现路径根据宽度变化的动画效果。在这个例子中，宽度从 100 变为 200，因此路径变为起点为 (20,50)，终点为 (180,50)，控制点为 (100,160) 的二次贝塞尔曲线路径。

需要注意的是，使用 `<animate>` 元素来实现动画效果需要一定的 SVG 基础知识。如果不熟悉 SVG，建议先学习一下 SVG 的基本概念和语法。