CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
I just love these filter blobs. I hate though, that they render as bitmaps in webkit and lose the hd (retina) support. That makes it look pixelated. A workaround is to double the size and then downscale it.
@pixelass Hey, first of all thanks, glad you like it!
Never noticed it looks pixelated on HD displays. Bummer. That's a good workaround, but I presume it also makes it heavier for non-HD displays then, no? Perhaps the scale could be multiplied by the actual screen DPI via JS then? Hm..
I like your fork, and it certainly performs better, but I made this in JS because of a few details:
- If you pay attention, you can see that the blob gets bigger as it gets closer to a dot, so to increase the, hm, gooeyness (???) of the blob.
- The blob also stretches according to it's speed, not to a fixed value.
- The little bounce is hard to replicate with CSS (at least, one that looks as good)
It does perform worse though, and the code has to be ironed out. Also sorry for the messy code, it's just a prototype.
@lbebber like I said I only wanted to show how to increase the quality and had problems adjusting the tweenMax stuff. I also added a scale effect though. the transition and animation are separated so they can be adjusted separately.
I don't think the performance suffers from the JavaScript, it's really only related to the resolution.
BTW. most of my stuff is also just prototyped. There are three reasons for me to iron out a prototype:
I am happy with the result and want to clean the code so it can be used
The snippet is too big to remember what's going on, so I clean and comment it
I am too deep in spaghetti-land and it's either the iron or the trash bin ;)
The third one rarely applies though. (luckily)
In many cases I keep the prototype and start a new project/pen. I then clean the code when I really need the snippet in a production environment. That's also the reason why I like codepen so much and why I'm so active. It's just an awesome place to gather ideas.
Iz nice!!
I just love these filter blobs. I hate though, that they render as bitmaps in webkit and lose the hd (retina) support. That makes it look pixelated. A workaround is to double the size and then downscale it.
Here's my fork: http://codepen.io/pixelass/pen/gftdJ
I hope you like it and maybe you can apply the tweak to your version
I also removed the javascript for these reasons.
Very slick
@pixelass Hey, first of all thanks, glad you like it! Never noticed it looks pixelated on HD displays. Bummer. That's a good workaround, but I presume it also makes it heavier for non-HD displays then, no? Perhaps the scale could be multiplied by the actual screen DPI via JS then? Hm..
I like your fork, and it certainly performs better, but I made this in JS because of a few details: - If you pay attention, you can see that the blob gets bigger as it gets closer to a dot, so to increase the, hm, gooeyness (???) of the blob. - The blob also stretches according to it's speed, not to a fixed value. - The little bounce is hard to replicate with CSS (at least, one that looks as good)
It does perform worse though, and the code has to be ironed out. Also sorry for the messy code, it's just a prototype.
THIS IS AWESOME!!
@lbebber like I said I only wanted to show how to increase the quality and had problems adjusting the tweenMax stuff. I also added a scale effect though. the transition and animation are separated so they can be adjusted separately.
I don't think the performance suffers from the JavaScript, it's really only related to the resolution.
BTW. most of my stuff is also just prototyped. There are three reasons for me to iron out a prototype:
The third one rarely applies though. (luckily)
In many cases I keep the prototype and start a new project/pen. I then clean the code when I really need the snippet in a production environment. That's also the reason why I like codepen so much and why I'm so active. It's just an awesome place to gather ideas.
Amazing effect!
Its very nice! I wrote another solution that uses JS to generate SVG's Path for geometric precision: http://codepen.io/Omelyan/pen/wMWbRV
I like that!