Download Code
Copy code below, and paste it (CTRL+V) in content of page
<!-- wp:greenshift-blocks/row {"id":"gsbp-1a60bbd8-8eeb","align":"full","widthUnit":["vw","px","px","px"],"minHeight":[100,null,null,null],"minHeightUnit":["vh","px","px","px"],"displayStyles":false,"background":{"color":"#ffffff"},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false},"overflow":["hidden"]}} --> <div id="gspb_row-id-gsbp-1a60bbd8-8eeb" class="gspb_row gspb_row-id-gsbp-1a60bbd8-8eeb wp-block-greenshift-blocks-row alignfull gspb_row-id-gsbp-1a60bbd8-8eeb"><div class="gspb_row__content"> <!-- wp:greenshift-blocks/row-column {"id":"gsbp-64f1e576-4c38","flexbox":{"type":"flexbox","flexWrap":["nowrap"],"justifyContent":["center"],"alignItems":["center"]}} --> <div id="gspb_col-id-gsbp-64f1e576-4c38" class="gspb_row__col--12 wp-block-greenshift-blocks-row-column gspb_col-id-gsbp-64f1e576-4c38"><!-- wp:greenshift-blocks/container {"id":"gsbp-c77b936c-88be","background":{"color":"#ffffff"}} --> <div id="gspb_container-id-gsbp-c77b936c-88be" class="gspb_container gspb_container-gsbp-c77b936c-88be wp-block-greenshift-blocks-container"><!-- wp:greenshift-blocks/animation-container {"id":"gsbp-f6fe1b3e-52fc","animation_type":"svg_line_draw","ease":"none","duration":15,"mouse_move_enabled":true,"prlx_xy":10,"prlx_tilt":10,"backgroundBlock":{"mixblend":""},"prehide":true} --> <div id="gspb_gsap-gsbp-f6fe1b3e-52fc"><div class="gs-prlx-mouse" data-prlx-xy="10" data-prlx-tilt="10"><div id="gsbp-f6fe1b3e-52fc" class="gs-gsap-wrap" data-ease="none" data-duration="15" data-svgdraw="yes" data-triggertype="scroll" data-from="yes" data-prehidden="1"><!-- wp:greenshift-blocks/svgshape {"id":"gsbp-a5865f73-43a4","spacingshape":{"margin":{"values":{},"locked":false},"padding":{"values":{},"locked":false}},"customshapeOn":true,"customshape":"\u003csvg width=\u0022752\u0022 height=\u0022195\u0022 viewBox=\u00220 0 752 195\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\u003cpath d=\u0022M162.8 75.2C158.8 60 150.867 48 139 39.2C127.133 30.4 112.867 26 96.2001 26C82.6001 26 70.4001 29.0667 59.6001 35.2C48.9334 41.2 40.6001 49.6667 34.6001 60.6C28.6001 71.4 25.6001 83.7333 25.6001 97.6C25.6001 111.467 28.6001 123.8 34.6001 134.6C40.6001 145.4 48.9334 153.867 59.6001 160C70.4001 166 82.6001 169 96.2001 169C112.867 169 127.133 164.667 139 156C150.867 147.2 158.8 135.2 162.8 120M752 161H659.5V10.5M302.144 169.4C288.944 169.4 276.811 166.333 265.744 160.2C254.811 154.067 246.077 145.533 239.544 134.6C233.144 123.533 229.944 111.133 229.944 97.4C229.944 83.6667 233.144 71.3333 239.544 60.4C246.077 49.4667 254.811 40.9333 265.744 34.8C276.811 28.6667 288.944 25.6 302.144 25.6C315.344 25.6 327.411 28.6667 338.344 34.8C349.411 40.9333 358.077 49.4667 364.344 60.4C370.744 71.3333 373.944 83.6667 373.944 97.4C373.944 111.133 370.744 123.533 364.344 134.6C357.944 145.533 349.277 154.067 338.344 160.2C327.411 166.333 315.344 169.4 302.144 169.4ZM516.37 169.4C503.17 169.4 491.037 166.333 479.97 160.2C469.037 154.067 460.304 145.533 453.77 134.6C447.37 123.533 444.17 111.133 444.17 97.4C444.17 83.6667 447.37 71.3333 453.77 60.4C460.304 49.4667 469.037 40.9333 479.97 34.8C491.037 28.6667 503.17 25.6 516.37 25.6C529.57 25.6 541.637 28.6667 552.57 34.8C563.637 40.9333 572.304 49.4667 578.57 60.4C584.97 71.3333 588.17 83.6667 588.17 97.4C588.17 111.133 584.97 123.533 578.57 134.6C572.17 145.533 563.504 154.067 552.57 160.2C541.637 166.333 529.57 169.4 516.37 169.4Z\u0022 stroke=\u0022black\u0022 stroke-width=\u002250\u0022/\u003e\n\u003c/svg\u003e\n","width":[720,null,null,null],"height":[190,null,null,null]} --> <div id="gspb_svgBox-id-gsbp-a5865f73-43a4" class="gspb_svgBox gspb_svgBox-id-gsbp-a5865f73-43a4 wp-block-greenshift-blocks-svgshape"><svg width="752" style="width:5rem;height:5rem;margin:10px" height="195" viewBox="0 0 752 195" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M162.8 75.2C158.8 60 150.867 48 139 39.2C127.133 30.4 112.867 26 96.2001 26C82.6001 26 70.4001 29.0667 59.6001 35.2C48.9334 41.2 40.6001 49.6667 34.6001 60.6C28.6001 71.4 25.6001 83.7333 25.6001 97.6C25.6001 111.467 28.6001 123.8 34.6001 134.6C40.6001 145.4 48.9334 153.867 59.6001 160C70.4001 166 82.6001 169 96.2001 169C112.867 169 127.133 164.667 139 156C150.867 147.2 158.8 135.2 162.8 120M752 161H659.5V10.5M302.144 169.4C288.944 169.4 276.811 166.333 265.744 160.2C254.811 154.067 246.077 145.533 239.544 134.6C233.144 123.533 229.944 111.133 229.944 97.4C229.944 83.6667 233.144 71.3333 239.544 60.4C246.077 49.4667 254.811 40.9333 265.744 34.8C276.811 28.6667 288.944 25.6 302.144 25.6C315.344 25.6 327.411 28.6667 338.344 34.8C349.411 40.9333 358.077 49.4667 364.344 60.4C370.744 71.3333 373.944 83.6667 373.944 97.4C373.944 111.133 370.744 123.533 364.344 134.6C357.944 145.533 349.277 154.067 338.344 160.2C327.411 166.333 315.344 169.4 302.144 169.4ZM516.37 169.4C503.17 169.4 491.037 166.333 479.97 160.2C469.037 154.067 460.304 145.533 453.77 134.6C447.37 123.533 444.17 111.133 444.17 97.4C444.17 83.6667 447.37 71.3333 453.77 60.4C460.304 49.4667 469.037 40.9333 479.97 34.8C491.037 28.6667 503.17 25.6 516.37 25.6C529.57 25.6 541.637 28.6667 552.57 34.8C563.637 40.9333 572.304 49.4667 578.57 60.4C584.97 71.3333 588.17 83.6667 588.17 97.4C588.17 111.133 584.97 123.533 578.57 134.6C572.17 145.533 563.504 154.067 552.57 160.2C541.637 166.333 529.57 169.4 516.37 169.4Z" stroke="black" stroke-width="50"></path></svg></div> <!-- /wp:greenshift-blocks/svgshape --></div></div></div> <!-- /wp:greenshift-blocks/animation-container --> <!-- wp:greenshift-blocks/animation-container {"id":"gsbp-ee914754-6754","prlx_xy":50,"position":{"positionType":["absolute","","",""],"positions":{"values":{"top":["-300px"],"left":["-50px"]}}},"backgroundBlock":{"mixblend":"screen"}} --> <div id="gspb_gsap-gsbp-ee914754-6754"><div id="gsbp-ee914754-6754" class="gs-gsap-wrap" data-duration="1" data-triggertype="scroll" data-from="yes"><!-- wp:greenshift-blocks/video {"id":"gsbp-3fd33fee-634b","videoid":2233,"src":"https://greenshift.wpsoul.net/wp-content/uploads/2022/08/videohome.mp4","provider":"video","autoplay":true,"playsInline":true,"loop":true,"muted":true,"controls":false,"postDate":"2022-08-18T16:08:35","width":[900,null,null,null],"height":[900,null,null,null],"objfit":"cover","background":{"mixblend":"lighten"}} --> <div class="wp-block-greenshift-blocks-video gs-video video gspb_video-id-gsbp-3fd33fee-634b" id="gs-video-gsbp-3fd33fee-634b"><div class="gs-video-wrapper" itemscope><div class="gs-video-element" data-src="https://greenshift.wpsoul.net/wp-content/uploads/2022/08/videohome.mp4" data-autoplay="true" data-playsinline="true" data-controls="false" data-loop="true" data-mute="true" data-poster="" data-provider="video" data-overlay="false" data-lightbox="false"></div></div></div> <!-- /wp:greenshift-blocks/video --></div></div> <!-- /wp:greenshift-blocks/animation-container --></div> <!-- /wp:greenshift-blocks/container --></div> <!-- /wp:greenshift-blocks/row-column --> </div></div> <!-- /wp:greenshift-blocks/row -->
Animated SVG mask with mouse move effect
