オープンパスを複合パスにしブラウザ上で再現する方法を探しています。

複合パス云々の問題ではないと思います。

SVGファイルの保存方法は、リンク先の「SVGを手書き風アニメーション」に書かれている通り、メニューバー「ファイル > 別名で保存...」でする必要があります。ここで操作することで、SVGコードにIllustratorレイヤーが反映され、以降の「ストロークにclipPathを適用する」が可能になります。

リンク先の説明通りに忠実に操作することをおすすめします。

追記：

リンク先には書かれていないのですが、SVG保存時のSVGオプションで、以下の設定が必要ですね。

1. 左下の「詳細オプション」ボタンを押す
2. 「CSSプロパティ」を「プレゼンテーション属性」に設定する

追記：

真似して作ってみました。よかったら参考にしてください。

svg-test.zip

オープンパスの作成後、「オブジェクト」メニュー→「パス」→「パスのアウトライン」が必要なのではないでしょうか。