Animated blobs

Animation Addon

Blog Staff

design

May 11, 2022

This block generates a different kinds of animated shapes

You can use also an image mask instead of a shape

Copy this post’s content

Copy code below, and paste it (CTRL+V) in content of page

<p>This block generates a different kinds of animated shapes</p>

<div id="gspb_blob-id-gsbp-7a5b0d74-a1fa" class="gspb_blob gspb_blob-id-gsbp-7a5b0d74-a1fa wp-block-greenshift-blocks-blob" data-resize="" data-numpoints="6" data-minradius="240" data-maxradius="260" data-minduration="3" data-maxduration="4" data-tensionpoints="2.7" data-id="gsbp-7a5b0d74-a1fa"><svg class="gs-svg-blob" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" preserveAspectRatio="xMidYMid meet" fill="url(#fill-gsbp-7a5b0d74-a1fa)"><path id="blobpath-gsbp-7a5b0d74-a1fa"></path><defs><linearGradient id="fill-gsbp-7a5b0d74-a1fa" gradientTransform="rotate(0)"><stop stop-color="#6d00ac" offset="0%"></stop><stop stop-color="#8112ff" offset="100%"></stop></linearGradient></defs></svg></div>

<p>You can use also an image mask instead of a shape</p>

<div id="gspb_blob-id-gsbp-4842f206-9cfa" class="gspb_blob gspb_blob-id-gsbp-4842f206-9cfa wp-block-greenshift-blocks-blob" data-resize="571" data-numpoints="21" data-minradius="231" data-maxradius="262" data-minduration="2.6" data-maxduration="3.6" data-tensionpoints="1.5" data-id="gsbp-4842f206-9cfa"><svg class="gs-svg-blob" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" preserveAspectRatio="xMidYMid meet" fill="url(#fill-gsbp-4842f206-9cfa)"><path id="blobpath-gsbp-4842f206-9cfa"></path><defs><pattern id="fill-gsbp-4842f206-9cfa" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="1057px" height="571px" x="24px" y="0px"><image id="imgpattern-gsbp-4842f206-9cfa" href="https://greenshiftwp.com/wp-content/uploads/2022/05/pexels-karol-d-325153-scaled.jpg" width="1057px" height="571px"></image></pattern></defs></svg></div>

design