SVG manipulation

HTML & CSS
1 
<svg fill="none" height="314" viewBox="0 0 1181 314" width="1181" xmlns="http://www.w3.org/2000/svg">
<path class="windmill" d="M998.78 167C999.51 158 998.62 150.64 1000.07 142.67C1001.45 135.3 1006.72 122.41 1006.88 121.39L989.94 132.6L986.62 124.6L1003.56 117.39L991.08 101.12L999 95.8999L1007.19 114.38L1025.1 103.53C1026.64 107.26 1026.24 107.94 1028.26 112.85L1011.64 117.94L1025.1 131.16L1019.02 136.33L1007 121.16C1007.73 123.16 1011.79 132.16 1013.41 137.94C1016.08 147.35 1018.27 165.41 1019 166.76L998.78 167Z" fill="#F9F9F9" stroke="#516C78" stroke-width="1.5"></path>
<path class="windmill" d="M1006.88 121.39L989.94 132.6L986.62 124.6L1003.56 117.39L991.08 101.12L999 95.8999L1007.19 114.38L1025.1 103.53C1026.64 107.26 1026.24 107.94 1028.26 112.85L1011.64 117.94L1025.1 131.16L1019.02 136.33L1007 121.16C1007.73" fill="#F9F9F9" stroke="#516C78" stroke-width="1.5" style="opacity: 0;"></path>
</svg>

If you load this up in your browser, you’ll notice 2 paths in this SVG. I got handed an incorrectly set up SVG. I don’t have illustrator so I’m just trying to modify the SVG paths to get what I want.

If you look at the path with opacity: 0; (the second path), you’ll see that it contains only the windmill. Not the 2 lines holding it up. I got this through manipulating the SVG code and eventually getting it separated. Now I need to grab the legs and separate that out.

I’m trying to modify the first SVG path to only contain the lines and not the windmill. It was easier to get the windmill only because it seems the pathing starts at the top left and I’m just having difficulty in this. Can anyone help?

2

Eventually got it through trial and error:

<svg fill="none" height="314" viewBox="0 0 1181 314" width="1181" xmlns="http://www.w3.org/2000/svg">
<path class="windmill" d="M998.78 167C999.51 158 998.62 150.64 1000.07 142.67C1001.45 135.3 1006.72 122.41 1006.88 122.41L1007.73 122.41L1007.73 123.16 1011.79 132.16 1013.41 137.94C1016.08 147.35 1018.27 165.41 1019 166.76L998.78 167Z" fill="#F9F9F9" stroke="#516C78" stroke-width="1.5"></path>
<path class="windmill" d="M1006.88 121.39L989.94 132.6L986.62 124.6L1003.56 117.39L991.08 101.12L999 95.8999L1007.19 114.38L1025.1 103.53C1026.64 107.26 1026.24 107.94 1028.26 112.85L1011.64 117.94L1025.1 131.16L1019.02 136.33L1007 121.16C1007.73" fill="#F9F9F9" stroke="#516C78" stroke-width="1.5" style="opacity: 0;"></path>
</svg>
3 Likes
3

If you want to manipulate SVG paths visually within a GUI you could install a free tool like Inkscape.
It’s not Illustrator, but plenty good enough for little jobs like this.

2 Likes
4

Thank you :slight_smile: I’ll keep that in mind.

I have a new question: I need a path to rotate (e.g. exactly like a windmill)

<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="9s" additive="sum" repeatCount="indefinite" />

I’ve found this, which did not work, along with regular CSS animations, which did not work. What happens when I try these solutions is that it rotates based on the entire SVG and not rotate while in place.

How can I rotate a single path in my SVG but not have it rotate across the entire SVG?

5

I got this working by ditching CSS and using GSAP (Greensock - a very powerful JS library).

const mapAnimation = gsap.timeline();
    mapAnimation.to("svg path.windmill", {rotation:360, duration: 5, ease:Linear.easeNone, repeat:-1, transformOrigin:"50% 50%"}, "+=1")
    mapAnimation.play();
6

You need to include the centre of rotation. This is about right for the windmill sails:

<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 1006 118" to="0 1006 118" dur="9s" additive="sum" repeatCount="indefinite" />
2 Likes
7

Wow! Great job. This actually worked.

8

You have a tiny windmill in a large SVG :grinning:

1 Like
9

The entire SVG is filled with objects but I stripped them out just to make this easier for you, myself, and others to work with :slight_smile: .

10

I also may end up using GSAP since there are several other objects in the SVG I need to animate. Birds flying, a kite waving in the wind, boats moving left/right…but who knows! I may be able to just use for majority of them, but I fear that I may be limited in that approach. Time will tell :slight_smile: .

11

You could consider embedding <svg> fragments for windmill and birds within your large <svg> element. Example here:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg

1 Like