Hello!
I am no good Coder but a Visual Artist so I made a graphic to explain my project a bit.
http://imgur.com/OlllSyz
In the Image you can see my setting.
I want to achieve that the webgl background is only visible by the pattern layer masks.
And these are moving and shall be additive when overlapping (like in the graphic shown at the bottom) but masking as well. (I dont mean the blend mode at this part)
Here you can see what i mean by pattern and my state so far:
http://www.kevinbock.de/webgl/index.html
The black pattern elements which are moving shall mask the Background and dont mask each other. So basicly: all black elements shall let through the webgl background. And instead of masking each other they shall add together.
At the moment no masking is added because I dont know how to do that.
Now here are my questions:
How do I make the three layers as masks which add to each other as they overlap?
Do I need the svg masking or css masking or the path clipping ?
At the moment I am using three single svg files.
Do I need to add some mask commands to the svg files or to some html part or/and css?
The movement of every pattern layer is achived by animating css and the div they are in.
Does it matter for making masks additive?
Or should all three pattern layer be in one svg file and be animated there with the svg animations?
Do I need a fifth layer between the webgl layer and the first pattern layer which is a fullscreen black rectangle to mask the pattern out from and let the webgl layer shine through?
Related
building a static website with React.
Description
I want to add a visual effect to the pages of the website, as shown below.
visual effect
I am trying to build a rectangular background. Some triangles will be cut from this rectangle (at least two vertices of the triangle must be on the edge before cutting), as shown in the shaded area in the figure.
Then I want the cut out triangles to float randomly in the page.
And I want the background of the content part in the middle (also a rectangle) not to be cut (ie only the outermost padding part is cut).
Some Attempts
I have tried to randomly generate the vertex coordinates of the polygons after cutting and the vertex coordinates of the cut triangles and display them using css clip-path and animation. But I haven't come up with a usable vertex generation algorithm.
Definitely you would have tried clip-path generator but might find that not working as expected on different screens. There's no efficient vertex generation algorithm for this. The alternate is to do so some random math by yourself. If you feel that your polygons are nice on one screen but scrambles on other, try using media queries.
I need create clickable component with custom shape. Appearance is set by svg file. Clickable area must be constrained by svg shape. I find great example of what I need, but it use pixel mask or circle mask. Can you help me find solution?
Most probably you will need to create a pixel mask yourself from the SVG shape.
The question is how to approach this. Qt does not offer a simple way of doing it. However, in Qt you can render the SVG offscreen into an image that you initialize with transparent pixels or a color key. You can then use this image as a mask.
If the size of your viewpoint changes frequently, you might want to do the mask rendering in a higher resolution first and then scale it down accordingly for performance. Also note that if your SVG is animated, you would have to accomodate for that.
Or you might use a different library than Qt to obtain the mask. Also, if your SVG contains only a single polygon, you might go for a point-polygon test. But I doubt it, and such a test is also not trivial when the polygon is non-convex (you typically end up with a scanline algorithm anyways).
The image below has a kind of faded grey look with what seems to be some slight blurring and works quite well as a generic banner image.
Usually I am provided with these images or just find stock images but I'd be very interested in learning how to apply these effects with Photoshop or CSS. I have a feeling that Photoshop is a more appropriate tool.
The image I'm experimenting with is this:
It isn't the best image but for my testing purposes at least it's a similar shape and size.
I know I can use things like de-saturation or a coloured layer with a colour blend mode for this sort of thing. However, does the first image look like it has a specific effect or is it just a case of trial and error?
I appreciate this is similar to this question.
open your image in photoshop, add a new layer on top of the image, fill the layer with a color of your choice (in this case grey/black) then reduce the opacity of the layer. You will get something similar to what you want. This is a simple trick. It can be done in other ways too with more modifications.
Maybe you could get the effect by using css blur and overlaying the image with a gray layer with opacity.
You could also just create the effect in photoshop and use that
I'm designing a website which uses a SVG-document as background. I want this image to tile on the X-axis. Which works great, but I wanted to know if it is possible to show one group in the SVG only once, such that in subsequent tiles the group is hidden.
The above image visualizes what I want to achieve. The image having one group (in the image the red circle) that is invisible in the following tiles.
Now I am aware such things can be achieved using additional CSS backgrounds but I am really interested if such thing could be achieved using a single SVG background.
Thanks in advance!
The answer is no. If you are relying on CSS to tile the background - ie. with repeat-x, then no. there isn't any way to do what you want. When an SVG is used as a background like that, it becomes immutable - effectively the same as a PNG or a JPEG.
You will need to use a different method.
We have a customer who has created an animated graphic (using AI & After Effects).
The graphic is essentially 3 overlapping donuts (can't post right now for "obvious reasons")
Each donut isn't perfectly circular and is distorted in some unique way
Each donut has a different linear color gradient on a different chord
Each donut rotates, scales & pulses at a slightly different speed in the animation.
Their graphic was built using Illustrator (each donut being 1 layer), and then animated in After Effects. The result of the overlapping donuts is a nice color multiplication effect where the various sections of each donut overlaps.
I'm currently trying to port this to the web and running into major problems with regards the color blending & multiplication stuff.
Somethings I've tried.
Export the AI file as an SVG and animate using RaphaelJS
Export the paths directly from AI and render them with RaphaelJS
Take the exported SVG and hack it to use FeImage & FeBlend filters
All of the above do not render as I would expect and from a little googling SVG color blending and the SVG spec in general is not fully implemented across the majority of browsers.
I've also tried export the individual layers as PNGs and then using CSS done:
background: url('PNGs/L1.png') center center,
url('PNGs/L2.png') center center,
url('PNGs/L3.png') center center;
background-repeat: no-repeat;
background-blend-mode: multiply;
This kinda gets me in the right direction but: it seems to be completely broken in IE, and I can't get it to work where each PNG is the BG image on 1 of 3 different divs (which I need to do in order to animate the div individually)
Am I just barking up the wrong tree with this problem or is this something that there's a magic js graphics library out there that will fix all my woes ?
The CSS blend modes are only available in the latest browsers, so if the color effects are essential that isn't really an option. The only color multiplication effect that has anywhere decent browser support is SVG filters (<feBlend>).
One difficulty of using filters, however, is that there currently isn't decent browser support for combining multiple elements from the same file in a filter. None of the browsers support the SVG1.1 enable-background option for blending one element with the elements behind it (it will be replaced by the isolation feature in the new CSS Blending spec). The <feImage> filter element could be used to import a fragment of your SVG into the filter for another element, but that use isn't supported in Firefox (which only allows it to be used for complete image files).
So, your strategy would be:
Create separate files (SVG or PNG) for each of your three colored donuts.
Create an empty container element that you will pass to the filter. Make sure you set the filter region to the correct dimensions for the output graphic.
In the filter, use three <feImage> elements to load your component graphics. Set the x, y, width, and height parameters to the initial overlapping positions of the three graphics.
Combine the <feImage> results using two <feBlend> operations
Animate the parameters of <feImage> using JavaScript or SMIL with JavaScript backup for IE.
Limitations:
Filters operate on pixel graphics, you can't do any transformations other than setting the position and size of the imported images. If you need other animations, you'd need to do them in the source image files.
You're loading four separate files. Might want to look into data URIs to cut down the total load time.
More on SVG Filters
If you're okay with only supporting the latest browsers (with others seeing the shapes but not the color multiply effect), you should be able to do this with CSS Blending on any of
SVG elements, with animated transformations
Multiple HTML images or elements with CSS backgrounds (animating the CSS transform property, possibly with fallback to animating absolute position properties)
A single HTML element with multiple CSS background images, animated using the background-position property (CSS or JavaScript). The animation is trickier here, since the positions of all the layers are controlled through a single CSS property. It also wouldn't be hardware-accelerated like a transformation, which can be implemented using independent layers combined by the video card.
However, note that there are two different blend mode properties:
background-blend-mode controls how layered backgrounds on an element blend into each other. It can be a list of values for each image in your background. It has no effect on blending between separate elements (HTML or SVG).
mix-blend-mode controls how a given element is blended into the content behind, subject to the limitations of the isolation property (which isolates all child content from blending with the rest of the web page) or other properties which create a stacking context.
More on CSS Blending
caniuse.com browser support for CSS Blending