Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Punchify Me

Background reveal with svg blob

Recommended Posts

I am trying to achieve an effect similar to the background reveal with mouse movement as seen here : https://www.luckyfolks.fr/

image.thumb.png.4a533056bf6fbe3f1b8baba0537f5576.png

 

I am not really sure how and where to start. The svg code for the blob is:   

 

<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 980" style="enable-background:new 0 0 1920 980;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFC845;}
</style>
<g>
<path class="st0" d="M0,0v980h1920V0H0z M1646.8,396.1c-0.3,4.1-1.7,8.3-2.2,12.4c-1.4,12.3-4.4,24.4-7,36.3
c-0.9,4-1.8,7.9-2.9,11.9c-1,3.9-2.1,7.9-3.3,11.8c-1.8,5.9-3.7,11.7-5.8,17.5c-0.7,1.9-1.4,3.9-2.2,5.8c-1.5,3.8-3,7.7-4.7,11.5
s-3.3,7.6-5.1,11.4c-4.5,9.5-9.4,19-14.9,28.4c-5.4,9.2-27.5,44.9-38,56.3c-1.8,2-3.7,3.9-5.6,5.8c-3.8,3.8-7.7,7.5-11.7,11.1
c-8,7.1-16.5,13.7-25.3,19.8c-8.8,6.1-18,11.8-27.5,17.1c-14.2,7.9-29,14.9-44.1,21.3c-7.6,3.2-15.2,6.2-22.9,9.1
c-2.6,1-5.1,1.9-7.7,2.8c-12.9,4.6-25.9,8.9-38.8,13c-7.7,2.4-15.5,4.8-23.1,7c-5.1,1.5-10.2,3-15.2,4.5c-2.5,0.7-5,1.5-7.5,2.2
c-76.3,22.3-128,13.5-217.6,12.6c-3.1,0-6.2-0.1-9.3-0.2s-6.2-0.3-9.3-0.6c-31.2-2.4-63.4-9.9-92.6-22.2c-2.9-1.2-5.8-2.5-8.7-3.8
c-2.9-1.3-5.7-2.7-8.5-4.1c-2.8-1.4-5.6-2.9-8.3-4.4s-5.4-3.1-8-4.7c-2-1.2-4.1-2.7-6.2-4.3c-9.2-7.1-19.1-17.4-25.4-24.2
c-48.9-52.7-60-92-54.2-162.4c4.7-57.5,18-115.3,49.4-164.3c1.5-2.3,20.5-31.5,30.3-38.4c15.1-10.6,32.4-18,46.8-29.5
c2.4-1.9,4.7-4,6.9-6.1c2.2-2.1,4.4-4.3,6.4-6.6s4.2-4.6,6.2-6.9c1.4-1.5,2.7-3.1,4.1-4.6c3.4-3.8,6.9-7.6,10.6-11.2
c11.6-11.1,24.7-20.5,38.8-28.1c5.3-2.8,10.7-5.4,16.3-7.7c1.9-0.8,3.7-1.5,5.6-2.2c5.7-2.1,11.5-4,17.4-5.5c2-0.5,3.9-1,5.9-1.5
c4.5-1.1,9-2.1,13.2-3c2.8-0.6,5.6-1.3,8.4-1.9c2.7-0.6,5.4-1.2,8.1-1.8c1.3-0.3,2.6-0.6,3.9-0.8c2.6-0.6,5.1-1.1,7.6-1.6
c3.7-0.8,7.4-1.5,10.9-2.2c4.7-0.9,9.3-1.8,13.8-2.6s8.8-1.6,13.1-2.3c2.1-0.3,4.3-0.7,6.4-1c5.3-0.8,10.4-1.5,15.6-2.1
c2.1-0.2,4.1-0.5,6.1-0.7c1-0.1,2-0.2,3.1-0.3c3.1-0.3,6.1-0.6,9.2-0.9c1-0.1,2.1-0.2,3.1-0.3c3.1-0.2,6.2-0.5,9.4-0.6
c2.1-0.1,4.2-0.2,6.3-0.3c2.1-0.1,4.3-0.2,6.5-0.3c2.2-0.1,4.4-0.2,6.6-0.2c2.2-0.1,4.5-0.1,6.8-0.2c20.6-0.4,43.7-0.1,72.5,0.7
c3,0.1,6,0.2,9,0.3c6,0.2,12.1,0.6,18.2,1c3.1,0.2,6.1,0.4,9.2,0.7c7.7,0.6,15.3,1.4,23,2.5c4.6,0.6,9.2,1.3,13.8,2
c1.5,0.3,3,0.5,4.6,0.8c4.6,0.8,9.1,1.7,13.6,2.7c1.5,0.3,3,0.7,4.5,1c4.5,1,9,2.2,13.4,3.4c5.9,1.6,11.8,3.4,17.5,5.4
c2.9,1,5.7,2,8.6,3.1c2.8,1.1,5.6,2.2,8.4,3.4c55.3,23.7,98.2,78.6,127.3,129.1c1.3,2.3,10.6,19.1,16.2,36.7
C1650.5,366.1,1648,381.6,1646.8,396.1z"/>
</g>
</svg>

I would highly appreciate any tips and help on this. Thank you. 

Link to comment
Share on other sites

Looks like you could use MorphSVG (especially since you're "Shockingly Green"  ) to morph between two or more blobby shapes, and then wire up some mouse-following logic. It's not really something I can build for you, but the effect is totally doable.

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

Many thanks to all of you! I now have a good base to start with!

  • Like 1
Link to comment
Share on other sites

On 5/8/2021 at 7:43 AM, Cassie said:

Also, I wrote this article on getting values from mouse movement and plugging them into animation

 

Love your animations!

 

Here's another way to get mouse coordinates inside an svg.

 

See the Pen 383a987e80f497e08b94dd6c3684841a by osublake (@osublake) on CodePen

 

That technique will work with any element inside an svg.

 

See the Pen e2f39748b642d0fb90321b7ae7575cf7 by osublake (@osublake) on CodePen

 

 

  • Like 4
Link to comment
Share on other sites

Hello, 

 

Many thanks for your comments. I have managed to make it work.

 

But I still have a slight problem in that the mouse cursor seems to be not aligned with the clipPath. The movement also seems to be a bit jerky. Here is a reduced case CodePen: 

 

See the Pen wvJKpEe by sunshinetainted (@sunshinetainted) on CodePen

 

 

 

Link to comment
Share on other sites

Ok, so the main issue here is that things get pretty tricksy when you're dealing with SVG vs HTML coordinate systems.

You're currently using Blake's demo for getting mouse co-ords within an SVG to move the clip path around in the SVG, but also using that clipPath to clip an HTML element in your CSS. This is why the clip path isn't clipping where you expect it to.

Now, I'm not saying this is impossible - and someone better at maths than me may have an answer for you. but. I have some easier solutions for you.

1) Keep it all in the SVG. Mask an image within the svg with a clipPath and set the SVG position absolute in the background. Blake's demo works perfectly for this.

See the Pen 3672f50adb278127be6b40b16c99beec?editors=1111&search_term=colours#0 by cassie-codes (@cassie-codes) on CodePen



pros - you can do morphing on the path because it's in the DOM
cons - it just masks the background not the content

2) Read this article I posted. 
This is specifically about masking content (with masks, not clip path) as there are shared CSS properties you can use for positioning with masks.

pros - nice way to deal with content masking as well
cons - I don't think this technique will allow you to morph that shape - I'd have to tinker about, I might have a play around later and see if there's a way to reference an SVG mask that's in the DOM rather than use a data URI.
 

On 5/8/2021 at 12:43 PM, Cassie said:

 

  • Like 3
Link to comment
Share on other sites

Hi @Cassie

 

Many thanks, I tried with the mask-image property, which is my preferred solution as I have to show content and I don't necessarily need to morph the shape. I have tried the mask-image approach in your article, modified to take into consideration the technical constraints. 

 

However I still have a lag between the mouse position and the mask, and I am unable to cover the edges (top and bottom) of the section with the mask. I am sure it has to do with my calculations, but I cannot seem to get it right. 

 

here is a new pen : 

See the Pen rNyOdoG by sunshinetainted (@sunshinetainted) on CodePen

  • Like 1
Link to comment
Share on other sites

It's not to do with calculations, this is just a markup issue. It's not masking the top section because the top section is outside of the div that has the mask applied to it.

The 'lag' is because you're using a gsap.to tween with a default duration of 0.5, so the tween is being eased into place, you can use gsap.setinstead if you need it to feel more immediate - or even gsap.quickSetter() for a more performant solution.

Good job getting it working!
 

Link to comment
Share on other sites

@Cassiethanks a ton. But you see, the mask does not 'go'/cover the bottom of the 'welcome on board' section. 

Link to comment
Share on other sites

That bottom section isn't in the codepen I attached. I just kept the top section in as an example.

The example I shared is showing a solution, it isn't 'the final' solution. You'll still need to tweak bits and extrapolate what you need!
 

  • Like 1
Link to comment
Share on other sites

I figured, you had used innerwidth in calculating yMask, corrected it :) thanks a ton!!

  • Like 1
Link to comment
Share on other sites

Ah yeah! That would do it!

Link to comment
Share on other sites

Just trying to figure stuff out for future reference. Does anyone know how to export an SVG so that the shape is centered at 0,0? Meaning most of the coordinates will be negative because they lie outside the svg. This would make it really easer to center stuff, like to the mouse cursor, especially if morphing will be involved as the dimensions of the shape might change.

 

image.png

 

 

 

cc @PointC

 

Link to comment
Share on other sites

@OSUblake

 

You mean like this?

 

See the Pen 3c5e4d178aee95a05efa8f3e4478e4c9 by akapowl (@akapowl) on CodePen

 

That's made with Inkscape.

 

Document and viewBox are set to width and height of the blue 'canvas' element, then I positioned the grey rectangle by snapping the center-points of its path's segments to the path of the blue 'canvas' element and then I used Inkscape's 'align and distribute' dialogue to center the blob up in the grey rectangle. Saved as .svg and as always with Inkscape threw the .svg file into SVG-OMG.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

46 minutes ago, akapowl said:

You mean like this?

 

Yesss!!!

 

See the Pen 5648de67fb458da3752fa9168a80f8f6 by osublake (@osublake) on CodePen

 

Although now I want to know if there's an easy way to do that in Illustrator. If not, Inkscape is free.

 

  • Like 1
Link to comment
Share on other sites

centering with align and then dragging it up into the corner until the intersect marks it as center.

  • Like 2
Link to comment
Share on other sites

1 minute ago, Cassie said:

centering with align and then dragging it up into the corner until the intersect marks it as center.

 

Right, but the view box changes and the coordinates aren't negative. At least that's how it is when I export. 🤷‍♂️

 

 

Link to comment
Share on other sites

In this case you can't export and get the correct viewBox from AI. You'll get some funky coordinates for a box that encloses all the shapes. You need to Save As SVG.

 

Straight Export:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="548.5px" height="544.2px" viewBox="0 0 548.5 544.2" style="overflow:visible;enable-background:new 0 0 548.5 544.2;" xml:space="preserve">
  <style type="text/css">
    .st0 {
      fill: #B3B3B3;
    }

    .st1 {
      fill: #3FA9F5;
    }
  </style>
  <rect x="48.5" y="44.2" class="st0" width="500" height="500" />

  <path class="st1" d="M24.2,46.2C33.6,44.9,28,8.8,41.3,1.5C55.4-6.1,95,16.1,96.9,47.6c0.9,14.9-6.6,32.8-20.4,39.4
    c-7.2,3.4-21,0-48.5-7.1C6.8,74.5,2.7,72,0.9,67.6C-3,57.8,6.2,42.4,14.2,41.9C19,41.6,20.7,46.7,24.2,46.2z" />
</svg>

Save As

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve" width="500" height="500">
  <style type="text/css">
    .st0 {
      fill: #B3B3B3;
    }
    .st1 {
      fill: #3FA9F5;
    }
  </style>
  <rect class="st0" width="500" height="500" />
  <path class="st1" d="M-24.3,2c9.4-1.3,3.7-37.4,17.1-44.7C6.9-50.4,46.5-28.1,48.4,3.4c0.9,14.9-6.6,32.8-20.4,39.4
        c-7.2,3.4-21,0-48.5-7.1c-21.2-5.5-25.3-7.9-27.1-12.4c-3.9-9.8,5.2-25.2,13.3-25.7C-29.5-2.6-27.8,2.5-24.3,2z" />

</svg>

:)

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

ohhhhh I get it. sorry, duh.

Link to comment
Share on other sites

3 minutes ago, PointC said:

In this case you can't export and get the correct viewBox from AI. You'll get some funky coordinates for a box that encloses all the shapes. You need to Save As SVG.

 

Thanks!!!

Link to comment
Share on other sites

save as is such a handy option.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×