I'm pretty new to SVG and how to work with them. I am not asking you for answer code, what I am asking is for some guide on maybe some plugin, maybe an article or some advice on how do I go about animating this SVG the way I wish to.
Problem:
I want to animate the picture below of the Sun, I'll be creating a vector graphic of this image obviously but what I want is these cuts in the bottom part of sun to animate and go from top to bottom revealing the background and second sun behind the main sun.
I want to do this inside a webpage so I need help regarding that.
Like I am not able to figure out how would I go about the whole process of making these cuts going down. Any help would be highly appreciated.
I would try https://rive.app/
As far as the how, I would create a short infinite loop. The horizontal bars would probably need to be their own shapes with some kind of masking effect on them to knock out the circle. You'd have to tween them to move up on the Y axis and let the height shrink to nothing as it moves up. The animation would probably only be 250-750ms. Let me know if that works!
Related
I need some help as I am very new to coding. I am trying to design a website with a Website Builder (Homepage Baukasten) and I had to rotate a line through code as you can see on the image. The problem is now that I don't know how to transform its border (the white horizontal square) so I can place it where its supposed to go. I looked around to found a way but I did not found anything that did the job.
Thank you for your time and have a nice one!
I'm wondering if there's a way to animate a gif or video based on where my mouse is hovering in relation to the frame.
I think the best example of what I mean would be, if the gif is of someone turning around 360, I would want the person to be facing forward when the mouse in on the left of the frame, turned around when in the center of the frame, facing forward again when at the right of the frame (and all the in-betweens).
Effectively, using a mouse hover as a drag function for a video timeline
Let me know if you have any ideas or if you need more details.
If need be, I can upload some example gifs/videos to clarify my purpose.
Thank you all so much in advance.
You can use transform: rotate() on a class in CSS.
Here is demo.
I need to draw a line that moves from left to right over the screen. Currently I'm just calling .clearRect() everytime, and draw it again, 1 pixel further. However, another possibility would be to draw the canvas once, and move it's CSS position across the screen.
Which scenario would be preferred for performance and why?
Moving, or "transforming" is always going to be much faster.
You're on the right track, but this is already built into Canvas. Here's a link on how to accomplish this:
Canvas Transform Tutorial
Canvas Transform
I have an idea that I would like your input on how it can be achieved. Essentially, I would like to have a page where page elements would be responsive and animated. Let me give you an example - let's say I point my mouse over a button or an image and it would play an animation like http://hakim.se/experiments/html5/magnetic/02/ around it while mouse is pointing over it, fading away if I point away from it.
Alternatively, it would be cool to have something like http://hakim.se/experiments/html5/trail/03/ flowing from current mouse position to the element that I would like to draw user's attention to. I have little idea on how this can be implemented, thinking that creating a overlay and using element's coordinates would be most appropriate but not 100% it can be done this way. Do you have any recommendations or suggestions on best practices, existing libraries / frameworks that may assist me with this?
Thanks!
I have a small project I am working on HTML5 canvas and I wanted to get some ideas how to accomplish it. I have built an outline of a tree using all the canvas line functions. lineTo, bezierCurveTo, quadracticCurve, etc. I have attached a picture of the outline. Now, what I would like to do is have some code that fills a percent of this outline. Kind of like a progress bar starting from the bottom. Does anyone have ideas on how to accomplish this?
Thanks
Rather than thinking of the problem as having to fill a percentage of the inside of the tree, why not split the image into two layers, the tree and the "fill", and then draw one over the other. See my image below for a quick and dirty example.
Of course, you will need to obscure the rest of the "fill" layer, so you will need to fill the outside of the tree shape white, but this should be fairly easy as you already have the path worked out. In essence, your path would instead of being the outside edge of a a tree shape, become the inside edge of a tree shaped hole!