# Distortion to SVG/image, please help

**URL:** <https://discourse.threejs.org/t/distortion-to-svg-image-please-help/50739>\
**Category:** Questions\
**Tags:** post-processing, shaders\
**Created:** [April 23, 2023, 6:28am UTC](https://discourse.threejs.org/t/distortion-to-svg-image-please-help/50739 "2023-04-23T06:28:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![fourd](https://avatars.discourse-cdn.com/v4/letter/f/8491ac/32.png) [@fourd](https://discourse.threejs.org/u/fourd)\
**Post date:** [April 23, 2023, 6:28am UTC](https://discourse.threejs.org/t/distortion-to-svg-image-please-help/50739/1 "2023-04-23T06:28:38Z")

</div>

Could anyone help me please or have any ideas how I could find help to add animated distortion (water-like) and possibly texture (noise or pencil/charcoal-like) to a static svg illustration.

Preferably something like this: [puddle │ sketch of three.js](https://ykob.github.io/sketch-threejs/sketch/puddle.html)  
(the source is MIT/available, but is overwhelming for a novice)

I’d greatly appreciate any clues.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [April 24, 2023, 8:38pm UTC](https://discourse.threejs.org/t/distortion-to-svg-image-please-help/50739/2 "2023-04-24T20:38:07Z")

</div>

1. It’d be hard to do for non-rasterised SVG image. So first things first, load your SVG into three.js canvas using [SVGLoader](https://threejs.org/docs/index.html?q=svg#examples/en/loaders/SVGLoader) (do not use SVGRenderer, just the normal WebGLRenderer.)
2. After you have your SVGs loaded, add it as a [Plane](https://threejs.org/docs/index.html?q=plane#api/en/geometries/PlaneGeometry) to your scene. Then you can add that kind of bubble distortion using either shaders (which can be hard at the beginning), or just using [MeshBasicMaterial.alphaMap](https://threejs.org/docs/index.html?q=meshba#api/en/materials/MeshBasicMaterial.alphaMap) (you can increase [alphaMap.offset](https://threejs.org/docs/index.html?q=texture#api/en/textures/Texture.offset) over time, it will create a water flow effect as the texture will be scrolling on the plane surface) together with [.alphaTest](https://threejs.org/docs/index.html?q=meshba#api/en/materials/Material.alphaTest) value changing dynamically between `0.25` and `0.75`.

---

<div class="post-metadata">

**Author:** ![fourd](https://avatars.discourse-cdn.com/v4/letter/f/8491ac/32.png) [@fourd](https://discourse.threejs.org/u/fourd)\
**Post date:** [April 26, 2023, 1:25pm UTC](https://discourse.threejs.org/t/distortion-to-svg-image-please-help/50739/3 "2023-04-26T13:25:52Z")

</div>

Thank you very much for your response. I’ll be following it.

Do you think it would be possible to use these shaders directly: [sketch-threejs/src/js/sketch/puddle/glsl at main · ykob/sketch-threejs · GitHub](https://github.com/ykob/sketch-threejs/tree/main/src/js/sketch/puddle/glsl)  
(I’m after this kind of a look) ?