Canvas blob

joenba2k16 · Aug 13, 2022

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

joenba2k16 · Aug 13, 2022

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>

joenba2k16 · Aug 13, 2022

CSS:

body, html { margin: 0; }

canvas { position: fixed; touch-action: none;}

joenba2k16 · Aug 13, 2022

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>

joenba2k16 · Aug 13, 2022

joenba2k16 · Aug 13, 2022

JavaScript:

I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Help with code	0	Jun 12, 2022
Sencha Touch--Support 2 browsers in just 228K!	64	Jul 16, 2010
David Mark's Essential Javascript Tips - Volume #8 - Tip #47E -Attaching and Detaching Event Listene	1	Dec 15, 2011
[ANN] Builds of PyWebkitGtk and Webkit-Glib-Gtk(r39359+#16401.master) for Debian i386,Debian AMD64 a	0	Dec 31, 2008
IE rendering of text next to floating block	4	Feb 7, 2004
Can/should one add expando properties to host-supplied objects?	3	Jan 7, 2005
A Brief Review of jQuery 1.5	13	Feb 13, 2011

Canvas blob

joenba2k16

Attachments

joenba2k16

joenba2k16

joenba2k16

joenba2k16

joenba2k16

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads