NickNo Posted June 15, 2020 Share Posted June 15, 2020 So, I've got a SVG image of a landscape which will have a bunch of different animations happening in the background. One of these is a group of about 5-6 cows with flicking tails. These are all exactly the same, but with staggered tail flicks ..my question is - is the best approach here to just have separate cows in the html, all with different IDs (and tail IDs) and separate timeline functions for each - or is there a smarter way to approach it?? Thanks in advance for any suggestions See the Pen RwrRzBG by nickjacobsnz (@nickjacobsnz) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted June 15, 2020 Share Posted June 15, 2020 Hey @NickNo, The SVG <use> element can reuse an SVG shape from elsewhere in the SVG document, including <g> elements and <symbol> elements. The reused shape can be defined inside the <defs> element (which makes the shape invisible until used) or outside. More here See the Pen XWXjWGw?editors=1000 by mikeK (@mikeK) on CodePen And then create a loop to stagger the tails. See the Pen eYJdYqo by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 Mikel's approach is the right way but I don't suggest using <use> if you're worried about performance. Animating individual paths (that share a class so they're easy to select) will perform better. For more about SVG performance check out this post. For more about how to structure animations efficiently, I highly recommend my article on the subject. 3 1 Link to comment Share on other sites More sharing options...
mikel Posted June 15, 2020 Share Posted June 15, 2020 Hey Zach, Good point. Because it is fun ... See the Pen vYLygdY by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 1 1 Link to comment Share on other sites More sharing options...
NickNo Posted June 15, 2020 Author Share Posted June 15, 2020 That’s awesome thanks for the suggestions... 1 Link to comment Share on other sites More sharing options...
NickNo Posted June 15, 2020 Author Share Posted June 15, 2020 That’s a really useful article thanks @ZachSaucier, immediately applicable to what I’m working on and will solve a few problems I had anticipated 1 Link to comment Share on other sites More sharing options...
Yaya Posted June 15, 2020 Share Posted June 15, 2020 Hey fellas, I'm checking out Zach's article and I can't quite land on the code that actually replaces the <use> for cloning the same svg. The closest thing I can find is the Physics Utility code here: // create 80 dot elements and put them in an array for (i = 0; i < 80; i++) { dot = document.createElement("div"); dot.setAttribute("class", "dot"); bg.appendChild(dot); dots.push(dot); } I'm sure it's a classic case of newbie-itis. Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 I'd just use a vector editor to copy the paths and move them to where you need them to be. You could clone the actual SVG objects with JS but why? The more that you can do on the frontend/prep side the better 1 Link to comment Share on other sites More sharing options...
PointC Posted June 15, 2020 Share Posted June 15, 2020 It depends on how many elements we're talking about here. If it's just a few copies, I'd echo Zach's advice and prep your artwork in your vector software. If you have hundreds of elements, cloning is one way to go. Here's a simple clone loop. See the Pen 24b436be30b10bd6fc5b840c913b9db6 by PointC (@PointC) on CodePen Or you can create everything on the fly. Here's that option. See the Pen ac3cac6818d6711f183884373e20fc6b by PointC (@PointC) on CodePen 4 1 Link to comment Share on other sites More sharing options...
Yaya Posted June 16, 2020 Share Posted June 16, 2020 @ZachSaucier I understand. I am creating custom illustrations in Adobe Illustrator. I have created a few different leaves, each ranging from 4k-7k, to compose a lush nature background. That "k" can add up quick with these more complex paths. Overall, where you draw the line in the sand to prep artwork vs. use javascript must be on a case-by-case basis, I imagine. I'm also walking a tight-rope between SVGs and resolution-based graphics (or video). @PointC Thank you for the javascript suggestion. I will give that a try. Thank you for the support fellas! Much appreciated Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted June 16, 2020 Share Posted June 16, 2020 1 hour ago, Yaya said: I have created a few different leaves, each ranging from 4k-7k, to compose a lush nature background. That "k" can add up quick with these more complex paths. Are you speaking of size or volume? If volume then that seems like it would be an excessive amount of elements regarding SVG and performance, Canvas, Pixi, WebGL, etc., would be better options when hitting those volumes. There was a similar thread regarding SVG Performance a while back regarding trees, leaves. 1 Link to comment Share on other sites More sharing options...
PointC Posted June 16, 2020 Share Posted June 16, 2020 4 hours ago, Shrug ¯\_(ツ)_/¯ said: Are you speaking of size or volume? I was gonna ask the same thing. Are we talking about thousands of SVG paths here? If so, you could also just use an image for something like that as it might be a tad sluggish performance wise. 1 1 Link to comment Share on other sites More sharing options...
Yaya Posted June 18, 2020 Share Posted June 18, 2020 @Shrug ¯\_(ツ)_/¯, Quote Are you speaking of size or volume? Size of the file itself. When I am in file manager and check the size of 1 svg. Thanks for the link to the trees example; there were some morsels of good info there. @craig Quote Are we talking about thousands of SVG paths here? Not thousands of paths. I decided to limit the number of SVGs and use a jpg behind them to imply "lushness". I plan to post a codepen. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now