Canvas blob


Joined
Aug 13, 2022
Messages
6
Reaction score
0
Hej im writing to u because i wanna create a canvas blob with hover effect which is taken from this particular https://codepen.io/shubniggurath/pen/EmMzpp
Now the thing is i wanna add a background image to the canvas blob without affecting the hover effect on the canvas blob. im trying to add some svg blob element on html5 and added the required css but im not sure how i can tweak the code within javascript so it can handle svg element paths and son in order for it to work as it should. Therefore can someone please help me solving the problem?
Im attaching the project here now with thr required html5 and css3 and the thing is the javascript from code snippet link i provided needs to be tweaked in a way with svg element and not drawing canvas as it is right now
 

Attachments

  • blob on hover canvas 2.zip
    868.4 KB · Views: 1
Ad

Advertisements

Joined
Aug 13, 2022
Messages
6
Reaction score
0
HTML:
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="sheet.css" />
  
  </head>
  <style type="text/css">
  
    /* canvas styling */
    #myCanvas {
      position: absolute;
      left: 16%;
      top: 50;
    }

    img#baseImage {
      width: 100%;
      object-fit: contain;
      height: 100%;
      clip-path: url("#blob");
      mask-position: center;
    }

    .blob {
      position: absolute;
      left: 0;
      right: 0;
    }

    
  </style>

  <body>
 
      <div
        id="blobImgContainer"
        style="
          position: relative;
          width: 600px;
          height: 600px;
          object-fit: contain;
          filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5))
            drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.9))
            drop-shadow(2px 1px 10px #999999);
        "
      >
        <img src="./product-squared.jpg" id="baseImage" />
        <?xml version="1.0" encoding="UTF-8" standalone="no"?>
        <svg class="blob" id="mask" viewBox="0 0 500 500">
          <g id="g18">
            <clipPath id="blob">
              <path
                id="blobPath"
                stroke-width="1"
                stroke="#000"
                d="m 401.52709,125.40493 c 32.7,16.1 54.3,55 74.8,98.8 20.5,43.9 39.8,92.6 33.6,139.6 -6.2,47 -38,92.3 -80.3,103.2 -42.3,11 -95.2,-12.5 -150.5,-9.2 -55.4,3.4 -113.2,33.6 -135.1,16.1 -21.8,-17.6 -7.8,-82.9 -15.5,-134.6 -7.7,-51.7 -37.199996,-89.7 -25.3,-110.5 11.9,-20.9 65.1,-24.6 101.7,-39.4 36.6,-14.7 56.6,-40.6 88.5,-56.9 31.8,-16.3 75.5,-23.1 108.1,-7.1 z"
                fill="#fe840e"
              />
            </clipPath>
          </g>
        </svg>
      </div>
      <!-- <div
        class="
          flex flex-col
          justify-center
          lg:items-end lg:w-1/2
          text-white text-center
          lg:text-right
          mt-12
          mx-auto
          lg:mt-0 lg:mr-48
          p-4
          lg:p-0
        "
      >
        

        <div
          class="
            flex
            justify-center
            items-center
            lg:justify-end
            mx-auto
            lg:mx-0
            mt-8
            p-8
            lg:p-0
          "
        ></div>
      </div> -->
    

    <script src="jcode.js"></script>
  </body>
</html>
 
Joined
Aug 13, 2022
Messages
6
Reaction score
0
SVG:
<?xml version="1.0" standalone="no"?>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <path fill="#FF0066" d="M54.7,-31.7C66.9,-10.3,70.2,16,59.6,34.3C49,52.5,24.5,62.6,4.3,60.1C-15.9,57.6,-31.8,42.6,-45,22.9C-58.1,3.2,-68.5,-21.2,-60.6,-40.1C-52.6,-59,-26.3,-72.5,-2.6,-71C21.2,-69.5,42.4,-53.1,54.7,-31.7Z" transform="translate(100 100)" />
</svg>
 
Joined
Aug 13, 2022
Messages
6
Reaction score
0
product-squared.jpg
product.jpg
 
Ad

Advertisements

Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top