How can this path stroke set the opacity of the group behind it?

How can this path stroke set the opacity of the group behind it? - javascript

I have this code which shows my current output when the snippet is run.
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 300 300" viewBox="0 0 300 300" x="0px" y="0px" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
<g fill-opacity=".2">
<path fill="#f79820" d="M 150 0 c 82.8 0 150 67.2 150 150 s -67.2 150 -150 150 S 0 232.8 0 150 S 67.2 0 150 0" />
<circle fill="#f5f4b7" cx="150" cy="150" r="141.9" />
<path fill="#f79820" d="M 135.7 103.3 c 3.5 18.3 4 19 7.8 19.2 c 3.8 0.2 10.4 -4.1 13.6 -12.1 c 3.1 -8 5 -20.2 7.8 -27.9 s 15.4 -29.6 18.7 -39.2 s 0.2 -19.2 -3.1 -23.6 c -3.3 -4.4 -10.7 -4.4 -23.5 -3.4 c -12.7 1 -33.4 -0.1 -40.8 3.4 c -8.4 3.9 -12.1 4.8 -8.9 15.5 C 110.2 45.9 132.2 84.9 135.7 103.3 Z" />
<path fill="#f79820" d="M 153.9 124.2 c -1.7 2.9 3.3 5.6 5.3 5.6 c 2 0 10.1 -2.9 23 -10.4 c 12.9 -7.5 49.9 -25.1 60.2 -35.2 c 10.2 -10 4.3 -22.8 0 -28.9 c -4.3 -6.1 -21 -22.8 -34.4 -29.7 c -13.4 -7 -16.7 1.2 -19.2 12.4 c -2.5 11.2 -12.1 31.1 -15.4 38.2 C 170 83.4 155.5 121.3 153.9 124.2 Z" />
<path fill="#f79820" d="M 213.5 108.7 c -23.7 12.8 -50.5 24.7 -50.4 27.2 c 0.1 3.1 11.1 6.5 27.4 9.9 c 16.4 3.4 29.1 2.5 44.6 9 c 15.5 6.5 36.7 9.9 45 -5.4 s 0.5 -47.6 -8.3 -58.1 c -8.8 -10.5 -10.9 -15.1 -25.6 -3.6 C 240.8 92 227.6 101.1 213.5 108.7 Z" />
<path fill="#f79820" d="M 283.6 167.2 c -2.2 -8.7 -11.1 1.4 -55.9 -8.5 c -44.8 -9.9 -60.7 -13.6 -63 -10.2 c -1.3 1.9 13.4 14.1 36 25.1 c 22.5 11 34.6 21.6 43.7 27.9 c 9.1 6.3 20.2 6.3 26.9 0 C 278.1 195.2 285.8 175.8 283.6 167.2 Z" />
<path fill="#f79820" d="M 226.6 194.7 c -16 -3.6 -35.4 -19 -42.1 -23.8 c -6.8 -4.8 -21.2 -17.1 -25.4 -13.3 c -2.6 2.4 -0.7 15.6 8.4 38.7 s 18.7 56.7 21.6 73.6 c 3 16.8 10.9 9.5 19 2.5 c 8.1 -7 26.4 -21.4 40 -30.7 c 13.6 -9.3 11.6 -19 10.1 -21.7 S 242.6 198.2 226.6 194.7 Z" />
<path fill="#f79820" d="M 157.9 178.9 c -4.1 -13.1 -5.2 -20.5 -9 -20.4 c -4.5 0.2 -9.1 18.7 -12.4 27.4 c -3.3 8.7 -12.7 52.3 -16.7 72.4 c -4 20 -1.8 25.8 15.2 26.7 s 36.7 4.9 42.8 -1 c 6.1 -5.9 5.3 -23.1 0 -44.5 C 172.5 217.9 161.9 192 157.9 178.9 Z" />
<path fill="#f79820" d="M 135.5 171.9 c 2.5 -9.2 3.2 -13.5 -2 -14.3 c -7.1 -1 -17.5 10.5 -25.3 22.1 S 77.5 213.4 63 228.7 c -14.5 15.3 -4 23.8 16 36.2 c 20 12.4 27.9 13.8 31.6 10.9 c 3.6 -2.9 6.6 -26.3 11.1 -43.8 C 126.1 214.4 133 181.1 135.5 171.9 Z" />
<path fill="#f79820" d="M 61.1 227.1 c 5.1 -6.8 32.2 -34.3 40 -44.8 c 7.8 -10.5 26.3 -28.2 27.9 -29.2 c 1.7 -1 -1.1 -4 -3.8 -6.8 c -2.1 -2.1 -2.8 -1.2 -11.1 0 c -8.3 1.2 -39 13.4 -53.4 17.7 c -14.4 4.2 -22.5 3.9 -31.1 7.5 c -8.6 3.6 -11.7 12.4 -1.7 26.8 c 10.1 14.4 6.3 18.9 13.6 28.9 C 48.9 237.1 56 233.9 61.1 227.1 Z" />
<path fill="#f79820" d="M 25.8 169.4 c 9.1 -1 41.5 -11.6 59.2 -18.9 c 17.7 -7.3 40.9 -11.4 40.7 -13.9 c -0.5 -5.6 -29.9 -17 -40.5 -22.6 c -10.6 -5.6 -25 -19.9 -35.4 -25.1 c -10.4 -5.3 -23.3 -4.8 -25.4 8.2 c -2.1 12.9 -8.8 27.9 -11.4 48 C 10.2 165.1 16.7 170.4 25.8 169.4 Z" />
<path fill="#f79820" d="M 54.5 88.3 c 16 5.4 37.5 19.7 43.1 24 c 5.6 4.2 31.2 20.9 35.2 17.5 c 3.4 -2.9 0.3 -21.1 -6.3 -31.8 c -6.6 -10.7 -9.1 -29.4 -14.5 -45.2 c -5.5 -15.8 -17.7 -28.4 -34 -18 s -33.4 24.8 -37.8 36 C 35.7 82 38.5 82.9 54.5 88.3 Z" />
</g>
<svg style="display: block; width: 100%;" viewBox="0 0 100 100">
<path stroke="#f79820" stroke-opacity=".4" fill-opacity="0" style="stroke-dasharray: 157.698, 157.698; stroke-dashoffset: 55;" stroke-width="49.81" d="M 50,50 m 0,-25.095 a 25.095,25.095 0 1 1 0,50.19 a 25.095,25.095 0 1 1 0,-50.19" />
</svg>
</svg>
My goal is to get everything covered by the stroke to be shown "darker" than the remaining portion of the circle. However the effect that is happening is the opacity of the stroke is compounding with the groups opacity so it doesn't have the contrast it needs to have.
Ideally it would look something like this...

Would inverting the pieces be an option? Instead of darkening the section, lighten the inverse? I removed the fill-opacity on the outer svg, changed the stroke of the inner path to white and increased the opacity to .6. I did not change the path, though, this was just to demonstrate the concept.
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 300 300" viewBox="0 0 300 300" x="0px" y="0px" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
<g>
<path fill="#f79820" d="M 150 0 c 82.8 0 150 67.2 150 150 s -67.2 150 -150 150 S 0 232.8 0 150 S 67.2 0 150 0" />
<circle fill="#f5f4b7" cx="150" cy="150" r="141.9" />
<path fill="#f79820" d="M 135.7 103.3 c 3.5 18.3 4 19 7.8 19.2 c 3.8 0.2 10.4 -4.1 13.6 -12.1 c 3.1 -8 5 -20.2 7.8 -27.9 s 15.4 -29.6 18.7 -39.2 s 0.2 -19.2 -3.1 -23.6 c -3.3 -4.4 -10.7 -4.4 -23.5 -3.4 c -12.7 1 -33.4 -0.1 -40.8 3.4 c -8.4 3.9 -12.1 4.8 -8.9 15.5 C 110.2 45.9 132.2 84.9 135.7 103.3 Z" />
<path fill="#f79820" d="M 153.9 124.2 c -1.7 2.9 3.3 5.6 5.3 5.6 c 2 0 10.1 -2.9 23 -10.4 c 12.9 -7.5 49.9 -25.1 60.2 -35.2 c 10.2 -10 4.3 -22.8 0 -28.9 c -4.3 -6.1 -21 -22.8 -34.4 -29.7 c -13.4 -7 -16.7 1.2 -19.2 12.4 c -2.5 11.2 -12.1 31.1 -15.4 38.2 C 170 83.4 155.5 121.3 153.9 124.2 Z" />
<path fill="#f79820" d="M 213.5 108.7 c -23.7 12.8 -50.5 24.7 -50.4 27.2 c 0.1 3.1 11.1 6.5 27.4 9.9 c 16.4 3.4 29.1 2.5 44.6 9 c 15.5 6.5 36.7 9.9 45 -5.4 s 0.5 -47.6 -8.3 -58.1 c -8.8 -10.5 -10.9 -15.1 -25.6 -3.6 C 240.8 92 227.6 101.1 213.5 108.7 Z" />
<path fill="#f79820" d="M 283.6 167.2 c -2.2 -8.7 -11.1 1.4 -55.9 -8.5 c -44.8 -9.9 -60.7 -13.6 -63 -10.2 c -1.3 1.9 13.4 14.1 36 25.1 c 22.5 11 34.6 21.6 43.7 27.9 c 9.1 6.3 20.2 6.3 26.9 0 C 278.1 195.2 285.8 175.8 283.6 167.2 Z" />
<path fill="#f79820" d="M 226.6 194.7 c -16 -3.6 -35.4 -19 -42.1 -23.8 c -6.8 -4.8 -21.2 -17.1 -25.4 -13.3 c -2.6 2.4 -0.7 15.6 8.4 38.7 s 18.7 56.7 21.6 73.6 c 3 16.8 10.9 9.5 19 2.5 c 8.1 -7 26.4 -21.4 40 -30.7 c 13.6 -9.3 11.6 -19 10.1 -21.7 S 242.6 198.2 226.6 194.7 Z" />
<path fill="#f79820" d="M 157.9 178.9 c -4.1 -13.1 -5.2 -20.5 -9 -20.4 c -4.5 0.2 -9.1 18.7 -12.4 27.4 c -3.3 8.7 -12.7 52.3 -16.7 72.4 c -4 20 -1.8 25.8 15.2 26.7 s 36.7 4.9 42.8 -1 c 6.1 -5.9 5.3 -23.1 0 -44.5 C 172.5 217.9 161.9 192 157.9 178.9 Z" />
<path fill="#f79820" d="M 135.5 171.9 c 2.5 -9.2 3.2 -13.5 -2 -14.3 c -7.1 -1 -17.5 10.5 -25.3 22.1 S 77.5 213.4 63 228.7 c -14.5 15.3 -4 23.8 16 36.2 c 20 12.4 27.9 13.8 31.6 10.9 c 3.6 -2.9 6.6 -26.3 11.1 -43.8 C 126.1 214.4 133 181.1 135.5 171.9 Z" />
<path fill="#f79820" d="M 61.1 227.1 c 5.1 -6.8 32.2 -34.3 40 -44.8 c 7.8 -10.5 26.3 -28.2 27.9 -29.2 c 1.7 -1 -1.1 -4 -3.8 -6.8 c -2.1 -2.1 -2.8 -1.2 -11.1 0 c -8.3 1.2 -39 13.4 -53.4 17.7 c -14.4 4.2 -22.5 3.9 -31.1 7.5 c -8.6 3.6 -11.7 12.4 -1.7 26.8 c 10.1 14.4 6.3 18.9 13.6 28.9 C 48.9 237.1 56 233.9 61.1 227.1 Z" />
<path fill="#f79820" d="M 25.8 169.4 c 9.1 -1 41.5 -11.6 59.2 -18.9 c 17.7 -7.3 40.9 -11.4 40.7 -13.9 c -0.5 -5.6 -29.9 -17 -40.5 -22.6 c -10.6 -5.6 -25 -19.9 -35.4 -25.1 c -10.4 -5.3 -23.3 -4.8 -25.4 8.2 c -2.1 12.9 -8.8 27.9 -11.4 48 C 10.2 165.1 16.7 170.4 25.8 169.4 Z" />
<path fill="#f79820" d="M 54.5 88.3 c 16 5.4 37.5 19.7 43.1 24 c 5.6 4.2 31.2 20.9 35.2 17.5 c 3.4 -2.9 0.3 -21.1 -6.3 -31.8 c -6.6 -10.7 -9.1 -29.4 -14.5 -45.2 c -5.5 -15.8 -17.7 -28.4 -34 -18 s -33.4 24.8 -37.8 36 C 35.7 82 38.5 82.9 54.5 88.3 Z" />
</g>
<svg style="display: block; width: 100%;" viewBox="0 0 100 100">
<path stroke="#ffffff" stroke-opacity=".6" fill-opacity="0" style="stroke-dasharray: 157.698, 157.698; stroke-dashoffset: 55;" stroke-width="49.81" d="M 50,50 m 0,-25.095 a 25.095,25.095 0 1 1 0,50.19 a 25.095,25.095 0 1 1 0,-50.19" />
</svg>
</svg>

Related

Bee SVG animation with SVG.js

As you can see in this codepen, there is a simple Bee SVG in a SVG canvas. Ideally I would like to achieve an animation where the Bee is buzzing around that canvas but for now I am simple trying to move it left to right. The library I am using is snap.svg
My basis is this codepen, but somehow I am not getting it to work.
The HTML:
<div class="wrapper">
<svg id='snappy' class='img-responsive' viewBox="0 0 1200 700">
<svg id="bee" x="100" y="100" xmlns="http://www.w3.org/2000/svg" width="194.874" height="214.536" viewBox="0 0 51.56 56.763" xmlns:v="https://vecta.io/nano"><g transform="matrix(.26458 0 0 .26458 -10.137 -3.944)"><path fill="#fff" d="M108.859 137.318c0-.324 1.515-2.606 5.195-3.131 15.73-2.247 29.851 28.808 28.898 30.272s-8.497 8.627-12.098 9.47-7.162 3.217-8.822 3.153-7.139.542-7.277-.674-2.669-15.399-2.669-20.033-.242-13.202-.894-14.606-2.333-4.451-2.333-4.451z"/><path d="M115.581 138.635c-3.242-3.606-9.84-6.911-18.839-4.642-8.959 2.259-24.573 13.377-24.026 31.944s10.65 29.76 13.653 32.217c1.802 1.475 3.643-1.105 6.233-3.991 0 0 .012-.012.016-.014.656-.73 3.949-4.837 5.688-6.711 3.894-4.197 8.938-15.764 8.938-15.764s.121 6.998-4.97 16.378c7.493-4.812 19.774-15.761 21.227-24.845 2.177-13.618-4.84-21.147-7.92-24.572z"/><path fill="#fc0" d="M142.953 137.434s15.938-.781 19.384-.001 17.452 2.778 26.807 17.822c6.952 11.178 5.257 29.734 3.236 35.164s-12.588 20.325-12.588 20.325l-18.78-11.803c-1.198-.405-9.44-6.392-10.494-8.12s-2.08-1.278-3.834-4.566-2.604-4.525-3.73-6.645c-3.598-6.759-5.988-3.201-7.124-3.201h-4.647s7.174-22.721 5.91-28.527-4.292-12.923-4.292-12.923z"/><path d="M85.567 157.957s-9.254-.959-19.146 4.846c-12.967 7.611-19.118 14.352-18.914 17.524s3.506 4.138 6.089.675 1.656-5.792 1.656-5.792 10.388-11.165 19.302-13.371c8.325-2.058 12.872-1.2 12.872-1.2l3.535-2.447z"/><path fill="#fff" d="M91.283 149.83c-4.109.951-7.615 5.01-8.191 14.743-.663 11.188-.379 15.107 5.461 11.739 7.098-4.094 11.098-12.776 10.375-20.203-.482-4.96-3.166-7.316-7.645-6.279z"/><path d="M82.887 142.196s-7.062-6.058-18.5-6.918c-14.993-1.129-23.886.911-25.525 3.636s.526 5.396 4.621 4.021 4.66-3.816 4.66-3.816 14.896-3.265 23.48 0c8.015 3.049 11.264 6.343 11.264 6.343h4.298zm28.306-6.894s12.977.547 17.062 10.158c9.112 21.432-13.789 31.615-13.789 31.615s18.582 4.889 26.41-2.433 14.39-20.897 5.05-34.432-24.13-13.539-34.733-4.908zm32.594 2.132s8.118-1.225 15.521 4.325c7.321 5.491 9.132 22.7 2.84 31.809-6.929 10.029-16.283 10.982-16.283 10.982l-4.166-7.069s12.689-5.993 14.452-16.489c1.766-10.514-2.513-20.688-12.364-23.558zm13.201-.342s15.168 2.447 17.655 16.897c2.5 14.514-3.343 24.952-8.627 28.904-10.062 7.525-18.28 5.037-18.28 5.037s7.009 7.176 9.488 8.738c.802.504 28.466-6.25 27.96-33.058-.198-10.489-3.961-26.677-28.196-26.518z"/><path d="M186.951 152.173s9.127 21.085 2.271 33.324c-7.053 12.591-15.904 15.479-21.584 15.115-4.598-.294-4.355-.536-4.355-.536s13.573 14.39 14.36 19.881.03 1.704 2.112-2.271 15.938-11.729 17.538-29.422c1.541-17.03-1.632-24.541-10.342-36.091zm-61.158 25.308s-.189 4.229-1.136 7.069 0 3.787 1.136 8.331 1.692 7.763-.764 9.467-2.076 2.65-2.455 1.704.343-1.391 1.118-3.441 1.497-3.754 0-6.973-4.242-6.059-3.58-10.448c.311-2.061.947-4.895.947-4.895l1.515-1.888zm8.9-1.072c.739 1.332 3.407 5.302 3.786 8.142s-1.515 4.542-1.894 5.868-2.225 4.735.024 7.765 3.194 6.248 3.194 9.845.947 5.491 1.894 3.408 2.272-1.521 0-7.008-2.343-5.346-2.875-7.689 4.059-6.222 4.13-9.3-2.58-9.137-3.148-11.031-2.271-4.733-2.271-4.733zm14.771 12.684c.567.566 5.518 9.09 3.987 16.474s-4.44 12.875-1.849 16.283 6.189 7.385 6.946 7.574 1.894-1.137 1.325-2.083-2.777-2.648-4.023-5.018c-1.343-2.557-2.811-5.207-1.106-8.236s3.048-7.012 3.048-9.66-.113-4.288-.303-7.696-2.745-7.639-2.745-7.639h-5.28zm-47.853-23.281c-1.666 4.811-5.958 7.689-9.585 6.43s-5.219-6.174-3.551-10.983 5.959-7.689 9.586-6.43 5.219 6.173 3.55 10.983z"/><circle fill="#fff" cx="90.466" cy="161.179" r="3.281"/></g><path d="M35.427 10.733c-7.454 5.988-11.371 20.431-11.371 20.945a106.44 106.44 0 0 1 1.077.619c1.077.621 2.482 2.378 2.482 2.378l1.029-.323-.001-.001c1.971-.633 5.014-1.7 8.184-3.161 5.113-2.358 14.732-10.106 14.733-18.447.001-7.975-8.706-7.975-16.133-2.009zm.449 18.393c-2.914 1.344-5.754 2.353-7.623 2.963-.067.021-.588.257-1.047.456-1.009-1.178-2.056-1.651-2.407-1.786 1.551-3.614 6.695-13.953 12.05-18.254 2.923-2.348 6.19-3.75 8.74-3.75 1.19 0 2.099.297 2.701.883.661.644.997 1.689.997 3.105-.001 7.12-8.882 14.295-13.412 16.384z"/><path opacity=".5" fill="#fff" d="M35.876 29.126c-2.914 1.344-5.754 2.353-7.623 2.963-.067.021-.588.257-1.047.456-1.009-1.178-2.056-1.651-2.407-1.786 1.551-3.614 6.695-13.953 12.05-18.254 2.923-2.348 6.19-3.75 8.74-3.75 1.19 0 2.099.297 2.701.883.661.644.997 1.689.997 3.105-.001 7.12-8.882 14.295-13.412 16.384z"/><path d="M27.319 1.349c-6.476 4.63-8.276 16.778-7.868 22.259.304 4.054.967 7.67 1.332 9.451.509-.064 1.032-.05 1.559.072.132.055.27.093.411.113 1.403.187 1.584.793 1.607.946l-.01.012c0 .012.007.017.013.023.262-.176.538-.393.769-.655 0 0 9.431-10.768 10.814-20.173 1.379-9.372-2.437-16.475-8.628-12.049zm6.629 11.871c-.817 5.557-4.868 13.264-7.464 17.647l-4.162-.82a73.88 73.88 0 0 1-.852-6.807c-.362-4.856 1.317-16.084 6.844-20.036 1.1-.786 2.058-1.093 2.848-.91.718.167 1.346.744 1.869 1.715 1.116 2.08 1.46 5.524.917 9.212z"/><path opacity=".5" fill="#fff" d="M33.949 13.22c-.817 5.557-4.868 13.264-7.464 17.647l-4.162-.82a73.88 73.88 0 0 1-.852-6.807c-.362-4.856 1.317-16.084 6.844-20.036 1.1-.786 2.058-1.093 2.848-.91.718.167 1.346.744 1.869 1.715 1.116 2.08 1.46 5.524.917 9.212z"/></svg>
</svg>
</div>
The CSS:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
svg#bee_svg {
width: 100%;
padding: 40px 75px 40px 10px;
overflow: visible;
}
#snappy {
background-color: wheat;
position: relative;
display: block;
border: solid 1px #000;
}
The JS:
// Html Viewbox Reference :viewBox="0 0 1200 700"
var s = Snap("#snappy");
var bee = $("#bee");
console.log(bee);
var vBW = 1200; // viewBoxWidth
var vBH = 700; // viewBoxHeight
function animate1(){
bee.animate({x: vBW-110}, 4000, animate2);
}
function animate2(){
bee.animate({x: 10}, 2000, animate1);
}
animate1();
I am very much a beginner with SVGs and animating them, any help is much appreciated.

Ideally I would like to achieve an animation where the Bee is buzzing
around that canvas but for now I am simple trying to move it left to
right.
Live Demo
The first half of the task can be solved not only with the help of JS libraries, but also using smil SVG.
#1. Animation of horizontal and vertical movement of the bee
By adding and changing coordinates in the translate (X, Y) command, you can get a combination of horizontal and vertical movement of an object.
If you add several pairs of coordinates in the values attribute of the animation command animateTransform, you can get an animation of movement of any shape
<animateTransform attributeName="transform" type="translate" dur="30s" values="900,0;800,140;800,150;700,100; 610,160;610,150;610,150;610,160;610,150;600,160;610,330;610,300;610,330;685,470;685,470;560,520;570,530;570,530;480,340;480,330;480,340;400,400;400,400;330,220;330,220;280,180;250,80;225,365;
225,365;225,365;200,180;150,150;150,150;0,0;-100,-100"
fill="freeze"
repeatCount="indefinite" />
Please see full screen
<style>
#wing1 { opacity:0.6;}
#wing2 {opacity:0.75;}
</style>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="img-responsive" width="1200" height="700" viewBox="0 0 1200 700" version="1.1" >
<defs>
<linearGradient id="grad1" x1="0" x2="0" y1="0" y2="1">
<stop offset="0.5" stop-color="dodgerblue"/>
<stop offset="1" stop-color="gold"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad1)" />
<g id="bee" transform="translate(100,100)">
<g transform="matrix(0.26458,0,0,0.26458,-10.137,-3.944)">
<path d="m108.9 137.3c0-0.3 1.5-2.6 5.2-3.1 15.7-2.2 29.9 28.8 28.9 30.3-1 1.5-8.5 8.6-12.1 9.5-3.6 0.8-7.2 3.2-8.8 3.2-1.7-0.1-7.1 0.5-7.3-0.7-0.1-1.2-2.7-15.4-2.7-20 0-4.6-0.2-13.2-0.9-14.6-0.7-1.4-2.3-4.5-2.3-4.5z" fill="#fff"/>
<path d="m115.6 138.6c-3.2-3.6-9.8-6.9-18.8-4.6-9 2.3-24.6 13.4-24 31.9 0.5 18.6 10.7 29.8 13.7 32.2 1.8 1.5 3.6-1.1 6.2-4 0 0 0 0 0 0 0.7-0.7 3.9-4.8 5.7-6.7 3.9-4.2 8.9-15.8 8.9-15.8 0 0 0.1 7-5 16.4 7.5-4.8 19.8-15.8 21.2-24.8 2.2-13.6-4.8-21.1-7.9-24.6z"/>
<path d="m143 137.4c0 0 15.9-0.8 19.4 0 3.4 0.8 17.5 2.8 26.8 17.8 7 11.2 5.3 29.7 3.2 35.2-2 5.4-12.6 20.3-12.6 20.3l-18.8-11.8c-1.2-0.4-9.4-6.4-10.5-8.1-1.1-1.7-2.1-1.3-3.8-4.6-1.8-3.3-2.6-4.5-3.7-6.6-3.6-6.8-6-3.2-7.1-3.2h-4.6c0 0 7.2-22.7 5.9-28.5-1.3-5.8-4.3-12.9-4.3-12.9z" fill="#fc0"/>
<path d="m85.6 158c0 0-9.3-1-19.1 4.8-13 7.6-19.1 14.4-18.9 17.5 0.2 3.2 3.5 4.1 6.1 0.7 2.6-3.5 1.7-5.8 1.7-5.8 0 0 10.4-11.2 19.3-13.4 8.3-2.1 12.9-1.2 12.9-1.2l3.5-2.4z"/>
<path d="m91.3 149.8c-4.1 1-7.6 5-8.2 14.7-0.7 11.2-0.4 15.1 5.5 11.7 7.1-4.1 11.1-12.8 10.4-20.2-0.5-5-3.2-7.3-7.6-6.3z" fill="#fff"/>
<path d="m82.9 142.2c0 0-7.1-6.1-18.5-6.9-15-1.1-23.9 0.9-25.5 3.6-1.6 2.7 0.5 5.4 4.6 4 4.1-1.4 4.7-3.8 4.7-3.8 0 0 14.9-3.3 23.5 0 8 3 11.3 6.3 11.3 6.3h4.3zm28.3-6.9c0 0 13 0.5 17.1 10.2 9.1 21.4-13.8 31.6-13.8 31.6 0 0 18.6 4.9 26.4-2.4 7.8-7.3 14.4-20.9 5.1-34.4-9.3-13.5-24.1-13.5-34.7-4.9zm32.6 2.1c0 0 8.1-1.2 15.5 4.3 7.3 5.5 9.1 22.7 2.8 31.8-6.9 10-16.3 11-16.3 11l-4.2-7.1c0 0 12.7-6 14.5-16.5 1.8-10.5-2.5-20.7-12.4-23.6zm13.2-0.3c0 0 15.2 2.4 17.7 16.9 2.5 14.5-3.3 25-8.6 28.9-10.1 7.5-18.3 5-18.3 5 0 0 7 7.2 9.5 8.7 0.8 0.5 28.5-6.2 28-33.1-0.2-10.5-4-26.7-28.2-26.5zM187 152.2"/>
<path d="m187 152.2c0 0 9.1 21.1 2.3 33.3-7.1 12.6-15.9 15.5-21.6 15.1-4.6-0.3-4.4-0.5-4.4-0.5 0 0 13.6 14.4 14.4 19.9 0.8 5.5 0 1.7 2.1-2.3 2.1-4 15.9-11.7 17.5-29.4 1.5-17-1.6-24.5-10.3-36.1zm-61.2 25.3c0 0-0.2 4.2-1.1 7.1-0.9 2.8 0 3.8 1.1 8.3 1.1 4.5 1.7 7.8-0.8 9.5-2.5 1.7-2.1 2.7-2.5 1.7-0.4-0.9 0.3-1.4 1.1-3.4 0.8-2 1.5-3.8 0-7-1.5-3.2-4.2-6.1-3.6-10.4 0.3-2.1 0.9-4.9 0.9-4.9l1.5-1.9zm8.9-1.1c0.7 1.3 3.4 5.3 3.8 8.1 0.4 2.8-1.5 4.5-1.9 5.9-0.4 1.3-2.2 4.7 0 7.8 2.2 3 3.2 6.2 3.2 9.8 0 3.6 0.9 5.5 1.9 3.4 0.9-2.1 2.3-1.5 0-7-2.3-5.5-2.3-5.3-2.9-7.7-0.5-2.3 4.1-6.2 4.1-9.3 0.1-3.1-2.6-9.1-3.1-11-0.6-1.9-2.3-4.7-2.3-4.7zm14.8 12.7c0.6 0.6 5.5 9.1 4 16.5-1.5 7.4-4.4 12.9-1.8 16.3 2.6 3.4 6.2 7.4 6.9 7.6 0.8 0.2 1.9-1.1 1.3-2.1-0.6-0.9-2.8-2.6-4-5-1.3-2.6-2.8-5.2-1.1-8.2 1.7-3 3-7 3-9.7 0-2.6-0.1-4.3-0.3-7.7-0.2-3.4-2.7-7.6-2.7-7.6h-5.3zm-47.9-23.3c-1.7 4.8-6 7.7-9.6 6.4-3.6-1.3-5.2-6.2-3.6-11 1.7-4.8 6-7.7 9.6-6.4 3.6 1.3 5.2 6.2 3.6 11z"/>
<circle r="3.3" cy="161.2" cx="90.5" fill="#fff"/>
</g>
<g id="wing1">
<path d="M35.4 10.7C28 16.7 24.1 31.2 24.1 31.7a106.4 106.4 0 0 1 1.1 0.6c1.1 0.6 2.5 2.4 2.5 2.4l1-0.3 0 0c2-0.6 5-1.7 8.2-3.2C41.9 28.8 51.6 21.1 51.6 12.7 51.6 4.8 42.9 4.8 35.4 10.7Zm0.4 18.4c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" fill="#000"/>
<path id="inside-wing1" fill="#EAEAEA" d="m35.9 29.1c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" />
</g>
<g id="wing2">
<path id="wing2" d="m27.3 1.3c-6.5 4.6-8.3 16.8-7.9 22.3 0.3 4.1 1 7.7 1.3 9.5 0.5-0.1 1 0 1.6 0.1 0.1 0.1 0.3 0.1 0.4 0.1 1.4 0.2 1.6 0.8 1.6 0.9l0 0c0 0 0 0 0 0 0.3-0.2 0.5-0.4 0.8-0.7 0 0 9.4-10.8 10.8-20.2C37.3 4 33.5-3.1 27.3 1.3Zm6.6 11.9c-0.8 5.6-4.9 13.3-7.5 17.6l-4.2-0.8A73.9 73.9 0 0 1 21.5 23.2c-0.4-4.9 1.3-16.1 6.8-20 1.1-0.8 2.1-1.1 2.8-0.9 0.7 0.2 1.3 0.7 1.9 1.7 1.1 2.1 1.5 5.5 0.9 9.2z" fill="#EAEAEA"/>
</g>
<animateTransform attributeName="transform" type="translate" dur="20s" values="900,0;800,140;800,150;700,100; 610,160;610,150;610,150;610,160;610,150;600,160;610,330;610,300;610,330;685,470;685,470;560,520;570,530;570,530;480,340;480,330;480,340;400,400;400,400;330,220;330,220;280,180;250,80;225,365;
225,365;225,365;200,180;150,150;150,150;0,0;-100,-100"
fill="freeze"
repeatCount="indefinite" />
</g>
</svg>
#2. Bee wings animation
In order for the wing to rotate correctly (without horizontal displacements), it is necessary to choose the right center of rotation
Pay attention to the image of the bee and its wings.
The correct choice of the center of rotation will be the bottom, left corner of the rectangle surrounding the wing of the bee
In this case, the CSS rules would be:
transform-origin: bottom left;
transform-box: fill-box;
Below is the animation of the bee's wings:
#wing1 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.6;
animation: rotateBox1 .2s infinite;
}
#keyframes rotateBox1 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(-60deg); }
0%{ transform:rotate(0deg); }
}
#wing2 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.75;
animation: rotateBox2 .2s infinite;
}
#keyframes rotateBox2 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(30deg); }
0%{ transform:rotate(0deg); }
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="img-responsive" width="1200" height="700" viewBox="0 0 1200 700" version="1.1" >
<rect width="100%" height="100%" fill="#39D594" />
<g id="bee" transform="scale(4) translate(100,50)">
<g transform="matrix(0.26458,0,0,0.26458,-10.137,-3.944)">
<path d="m108.9 137.3c0-0.3 1.5-2.6 5.2-3.1 15.7-2.2 29.9 28.8 28.9 30.3-1 1.5-8.5 8.6-12.1 9.5-3.6 0.8-7.2 3.2-8.8 3.2-1.7-0.1-7.1 0.5-7.3-0.7-0.1-1.2-2.7-15.4-2.7-20 0-4.6-0.2-13.2-0.9-14.6-0.7-1.4-2.3-4.5-2.3-4.5z" fill="#fff"/>
<path d="m115.6 138.6c-3.2-3.6-9.8-6.9-18.8-4.6-9 2.3-24.6 13.4-24 31.9 0.5 18.6 10.7 29.8 13.7 32.2 1.8 1.5 3.6-1.1 6.2-4 0 0 0 0 0 0 0.7-0.7 3.9-4.8 5.7-6.7 3.9-4.2 8.9-15.8 8.9-15.8 0 0 0.1 7-5 16.4 7.5-4.8 19.8-15.8 21.2-24.8 2.2-13.6-4.8-21.1-7.9-24.6z"/>
<path d="m143 137.4c0 0 15.9-0.8 19.4 0 3.4 0.8 17.5 2.8 26.8 17.8 7 11.2 5.3 29.7 3.2 35.2-2 5.4-12.6 20.3-12.6 20.3l-18.8-11.8c-1.2-0.4-9.4-6.4-10.5-8.1-1.1-1.7-2.1-1.3-3.8-4.6-1.8-3.3-2.6-4.5-3.7-6.6-3.6-6.8-6-3.2-7.1-3.2h-4.6c0 0 7.2-22.7 5.9-28.5-1.3-5.8-4.3-12.9-4.3-12.9z" fill="#fc0"/>
<path d="m85.6 158c0 0-9.3-1-19.1 4.8-13 7.6-19.1 14.4-18.9 17.5 0.2 3.2 3.5 4.1 6.1 0.7 2.6-3.5 1.7-5.8 1.7-5.8 0 0 10.4-11.2 19.3-13.4 8.3-2.1 12.9-1.2 12.9-1.2l3.5-2.4z"/>
<path d="m91.3 149.8c-4.1 1-7.6 5-8.2 14.7-0.7 11.2-0.4 15.1 5.5 11.7 7.1-4.1 11.1-12.8 10.4-20.2-0.5-5-3.2-7.3-7.6-6.3z" fill="#fff"/>
<path d="m82.9 142.2c0 0-7.1-6.1-18.5-6.9-15-1.1-23.9 0.9-25.5 3.6-1.6 2.7 0.5 5.4 4.6 4 4.1-1.4 4.7-3.8 4.7-3.8 0 0 14.9-3.3 23.5 0 8 3 11.3 6.3 11.3 6.3h4.3zm28.3-6.9c0 0 13 0.5 17.1 10.2 9.1 21.4-13.8 31.6-13.8 31.6 0 0 18.6 4.9 26.4-2.4 7.8-7.3 14.4-20.9 5.1-34.4-9.3-13.5-24.1-13.5-34.7-4.9zm32.6 2.1c0 0 8.1-1.2 15.5 4.3 7.3 5.5 9.1 22.7 2.8 31.8-6.9 10-16.3 11-16.3 11l-4.2-7.1c0 0 12.7-6 14.5-16.5 1.8-10.5-2.5-20.7-12.4-23.6zm13.2-0.3c0 0 15.2 2.4 17.7 16.9 2.5 14.5-3.3 25-8.6 28.9-10.1 7.5-18.3 5-18.3 5 0 0 7 7.2 9.5 8.7 0.8 0.5 28.5-6.2 28-33.1-0.2-10.5-4-26.7-28.2-26.5zM187 152.2"/>
<path d="m187 152.2c0 0 9.1 21.1 2.3 33.3-7.1 12.6-15.9 15.5-21.6 15.1-4.6-0.3-4.4-0.5-4.4-0.5 0 0 13.6 14.4 14.4 19.9 0.8 5.5 0 1.7 2.1-2.3 2.1-4 15.9-11.7 17.5-29.4 1.5-17-1.6-24.5-10.3-36.1zm-61.2 25.3c0 0-0.2 4.2-1.1 7.1-0.9 2.8 0 3.8 1.1 8.3 1.1 4.5 1.7 7.8-0.8 9.5-2.5 1.7-2.1 2.7-2.5 1.7-0.4-0.9 0.3-1.4 1.1-3.4 0.8-2 1.5-3.8 0-7-1.5-3.2-4.2-6.1-3.6-10.4 0.3-2.1 0.9-4.9 0.9-4.9l1.5-1.9zm8.9-1.1c0.7 1.3 3.4 5.3 3.8 8.1 0.4 2.8-1.5 4.5-1.9 5.9-0.4 1.3-2.2 4.7 0 7.8 2.2 3 3.2 6.2 3.2 9.8 0 3.6 0.9 5.5 1.9 3.4 0.9-2.1 2.3-1.5 0-7-2.3-5.5-2.3-5.3-2.9-7.7-0.5-2.3 4.1-6.2 4.1-9.3 0.1-3.1-2.6-9.1-3.1-11-0.6-1.9-2.3-4.7-2.3-4.7zm14.8 12.7c0.6 0.6 5.5 9.1 4 16.5-1.5 7.4-4.4 12.9-1.8 16.3 2.6 3.4 6.2 7.4 6.9 7.6 0.8 0.2 1.9-1.1 1.3-2.1-0.6-0.9-2.8-2.6-4-5-1.3-2.6-2.8-5.2-1.1-8.2 1.7-3 3-7 3-9.7 0-2.6-0.1-4.3-0.3-7.7-0.2-3.4-2.7-7.6-2.7-7.6h-5.3zm-47.9-23.3c-1.7 4.8-6 7.7-9.6 6.4-3.6-1.3-5.2-6.2-3.6-11 1.7-4.8 6-7.7 9.6-6.4 3.6 1.3 5.2 6.2 3.6 11z"/>
<circle r="3.3" cy="161.2" cx="90.5" fill="#fff"/>
</g>
<g id="wing1">
<path d="M35.4 10.7C28 16.7 24.1 31.2 24.1 31.7a106.4 106.4 0 0 1 1.1 0.6c1.1 0.6 2.5 2.4 2.5 2.4l1-0.3 0 0c2-0.6 5-1.7 8.2-3.2C41.9 28.8 51.6 21.1 51.6 12.7 51.6 4.8 42.9 4.8 35.4 10.7Zm0.4 18.4c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" fill="#000"/>
<path id="inside-wing1" fill="#EAEAEA" d="m35.9 29.1c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" />
</g>
<g id="wing2">
<path id="wing2" d="m27.3 1.3c-6.5 4.6-8.3 16.8-7.9 22.3 0.3 4.1 1 7.7 1.3 9.5 0.5-0.1 1 0 1.6 0.1 0.1 0.1 0.3 0.1 0.4 0.1 1.4 0.2 1.6 0.8 1.6 0.9l0 0c0 0 0 0 0 0 0.3-0.2 0.5-0.4 0.8-0.7 0 0 9.4-10.8 10.8-20.2C37.3 4 33.5-3.1 27.3 1.3Zm6.6 11.9c-0.8 5.6-4.9 13.3-7.5 17.6l-4.2-0.8A73.9 73.9 0 0 1 21.5 23.2c-0.4-4.9 1.3-16.1 6.8-20 1.1-0.8 2.1-1.1 2.8-0.9 0.7 0.2 1.3 0.7 1.9 1.7 1.1 2.1 1.5 5.5 0.9 9.2z" fill="#000"/>
</g>
</g>
</svg>
3. Combining Wing Move and Rotate Animations
--
For realism, add a picture of a blooming meadow
<image xlink:href="https://i.stack.imgur.com/DUxlZ.jpg" x="-100" width="1200" height="700" />
To implement pauses when a bee sits on a flower, the corresponding pairs of coordinates in
<animateTransform values =" ... 610,150; 610,150; 610,150; ... " are duplicated
Below is the complete application code:
Animation starts after click
#wing1 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.6;
animation: rotateBox1 .15s infinite;
}
#keyframes rotateBox1 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(-60deg); }
0%{ transform:rotate(0deg); }
}
#wing2 {
transform-origin: bottom left;
transform-box: fill-box;
opacity:0.75;
animation: rotateBox2 .15s infinite;
}
#keyframes rotateBox2 {
0%{ transform:rotate(0deg); }
50%{ transform:rotate(30deg); }
0%{ transform:rotate(0deg); }
}
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="img-responsive" width="1200" height="700" viewBox="0 0 1200 700" version="1.1" >
<image xlink:href="https://i.stack.imgur.com/DUxlZ.jpg" x="-100" width="1200" height="700" />
<g id="bee" transform="translate(1400,100)">
<g transform="matrix(0.26458,0,0,0.26458,-10.137,-3.944)">
<path d="m108.9 137.3c0-0.3 1.5-2.6 5.2-3.1 15.7-2.2 29.9 28.8 28.9 30.3-1 1.5-8.5 8.6-12.1 9.5-3.6 0.8-7.2 3.2-8.8 3.2-1.7-0.1-7.1 0.5-7.3-0.7-0.1-1.2-2.7-15.4-2.7-20 0-4.6-0.2-13.2-0.9-14.6-0.7-1.4-2.3-4.5-2.3-4.5z" fill="#fff"/>
<path d="m115.6 138.6c-3.2-3.6-9.8-6.9-18.8-4.6-9 2.3-24.6 13.4-24 31.9 0.5 18.6 10.7 29.8 13.7 32.2 1.8 1.5 3.6-1.1 6.2-4 0 0 0 0 0 0 0.7-0.7 3.9-4.8 5.7-6.7 3.9-4.2 8.9-15.8 8.9-15.8 0 0 0.1 7-5 16.4 7.5-4.8 19.8-15.8 21.2-24.8 2.2-13.6-4.8-21.1-7.9-24.6z"/>
<path d="m143 137.4c0 0 15.9-0.8 19.4 0 3.4 0.8 17.5 2.8 26.8 17.8 7 11.2 5.3 29.7 3.2 35.2-2 5.4-12.6 20.3-12.6 20.3l-18.8-11.8c-1.2-0.4-9.4-6.4-10.5-8.1-1.1-1.7-2.1-1.3-3.8-4.6-1.8-3.3-2.6-4.5-3.7-6.6-3.6-6.8-6-3.2-7.1-3.2h-4.6c0 0 7.2-22.7 5.9-28.5-1.3-5.8-4.3-12.9-4.3-12.9z" fill="#fc0"/>
<path d="m85.6 158c0 0-9.3-1-19.1 4.8-13 7.6-19.1 14.4-18.9 17.5 0.2 3.2 3.5 4.1 6.1 0.7 2.6-3.5 1.7-5.8 1.7-5.8 0 0 10.4-11.2 19.3-13.4 8.3-2.1 12.9-1.2 12.9-1.2l3.5-2.4z"/>
<path d="m91.3 149.8c-4.1 1-7.6 5-8.2 14.7-0.7 11.2-0.4 15.1 5.5 11.7 7.1-4.1 11.1-12.8 10.4-20.2-0.5-5-3.2-7.3-7.6-6.3z" fill="#fff"/>
<path d="m82.9 142.2c0 0-7.1-6.1-18.5-6.9-15-1.1-23.9 0.9-25.5 3.6-1.6 2.7 0.5 5.4 4.6 4 4.1-1.4 4.7-3.8 4.7-3.8 0 0 14.9-3.3 23.5 0 8 3 11.3 6.3 11.3 6.3h4.3zm28.3-6.9c0 0 13 0.5 17.1 10.2 9.1 21.4-13.8 31.6-13.8 31.6 0 0 18.6 4.9 26.4-2.4 7.8-7.3 14.4-20.9 5.1-34.4-9.3-13.5-24.1-13.5-34.7-4.9zm32.6 2.1c0 0 8.1-1.2 15.5 4.3 7.3 5.5 9.1 22.7 2.8 31.8-6.9 10-16.3 11-16.3 11l-4.2-7.1c0 0 12.7-6 14.5-16.5 1.8-10.5-2.5-20.7-12.4-23.6zm13.2-0.3c0 0 15.2 2.4 17.7 16.9 2.5 14.5-3.3 25-8.6 28.9-10.1 7.5-18.3 5-18.3 5 0 0 7 7.2 9.5 8.7 0.8 0.5 28.5-6.2 28-33.1-0.2-10.5-4-26.7-28.2-26.5zM187 152.2"/>
<path d="m187 152.2c0 0 9.1 21.1 2.3 33.3-7.1 12.6-15.9 15.5-21.6 15.1-4.6-0.3-4.4-0.5-4.4-0.5 0 0 13.6 14.4 14.4 19.9 0.8 5.5 0 1.7 2.1-2.3 2.1-4 15.9-11.7 17.5-29.4 1.5-17-1.6-24.5-10.3-36.1zm-61.2 25.3c0 0-0.2 4.2-1.1 7.1-0.9 2.8 0 3.8 1.1 8.3 1.1 4.5 1.7 7.8-0.8 9.5-2.5 1.7-2.1 2.7-2.5 1.7-0.4-0.9 0.3-1.4 1.1-3.4 0.8-2 1.5-3.8 0-7-1.5-3.2-4.2-6.1-3.6-10.4 0.3-2.1 0.9-4.9 0.9-4.9l1.5-1.9zm8.9-1.1c0.7 1.3 3.4 5.3 3.8 8.1 0.4 2.8-1.5 4.5-1.9 5.9-0.4 1.3-2.2 4.7 0 7.8 2.2 3 3.2 6.2 3.2 9.8 0 3.6 0.9 5.5 1.9 3.4 0.9-2.1 2.3-1.5 0-7-2.3-5.5-2.3-5.3-2.9-7.7-0.5-2.3 4.1-6.2 4.1-9.3 0.1-3.1-2.6-9.1-3.1-11-0.6-1.9-2.3-4.7-2.3-4.7zm14.8 12.7c0.6 0.6 5.5 9.1 4 16.5-1.5 7.4-4.4 12.9-1.8 16.3 2.6 3.4 6.2 7.4 6.9 7.6 0.8 0.2 1.9-1.1 1.3-2.1-0.6-0.9-2.8-2.6-4-5-1.3-2.6-2.8-5.2-1.1-8.2 1.7-3 3-7 3-9.7 0-2.6-0.1-4.3-0.3-7.7-0.2-3.4-2.7-7.6-2.7-7.6h-5.3zm-47.9-23.3c-1.7 4.8-6 7.7-9.6 6.4-3.6-1.3-5.2-6.2-3.6-11 1.7-4.8 6-7.7 9.6-6.4 3.6 1.3 5.2 6.2 3.6 11z"/>
<circle r="3.3" cy="161.2" cx="90.5" fill="#fff"/>
</g>
<g id="wing1">
<path d="M35.4 10.7C28 16.7 24.1 31.2 24.1 31.7a106.4 106.4 0 0 1 1.1 0.6c1.1 0.6 2.5 2.4 2.5 2.4l1-0.3 0 0c2-0.6 5-1.7 8.2-3.2C41.9 28.8 51.6 21.1 51.6 12.7 51.6 4.8 42.9 4.8 35.4 10.7Zm0.4 18.4c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" fill="#000"/>
<path id="inside-wing1" fill="#EAEAEA" d="m35.9 29.1c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" />
</g>
<g id="wing2">
<path id="wing2" d="m27.3 1.3c-6.5 4.6-8.3 16.8-7.9 22.3 0.3 4.1 1 7.7 1.3 9.5 0.5-0.1 1 0 1.6 0.1 0.1 0.1 0.3 0.1 0.4 0.1 1.4 0.2 1.6 0.8 1.6 0.9l0 0c0 0 0 0 0 0 0.3-0.2 0.5-0.4 0.8-0.7 0 0 9.4-10.8 10.8-20.2C37.3 4 33.5-3.1 27.3 1.3Zm6.6 11.9c-0.8 5.6-4.9 13.3-7.5 17.6l-4.2-0.8A73.9 73.9 0 0 1 21.5 23.2c-0.4-4.9 1.3-16.1 6.8-20 1.1-0.8 2.1-1.1 2.8-0.9 0.7 0.2 1.3 0.7 1.9 1.7 1.1 2.1 1.5 5.5 0.9 9.2z" fill="#000"/>
</g>
<!-- Bee moving animation -->
<animateTransform attributeName="transform" type="translate" begin="svg1.click" dur="30s" values="900,0;800,140;800,150;700,100; 610,160;610,150;610,150;610,160;610,150;600,160;610,330;610,300;610,330;685,470;685,470;560,520;570,530;570,530;480,340;480,330;480,340;400,400;400,400;330,220;330,220;280,180;250,80;225,365;
225,365;225,365;200,180;150,150;150,150;0,0;-100,-100"
fill="freeze"
repeatCount="indefinite" />
</g>
<text x="200" y="30" font-size="24px" fill="white">Click me </text>
</svg>

Change it to the following and it all should work...
The main thing is using Snap("bee") rather than $("bee") and including an "easing" function in the animate parameters.
Docs for animate can be found here
var s = Snap("#snappy");
var bee = Snap("#bee");
var vBW = 1200; // viewBoxWidth
var vBH = 700; // viewBoxHeight
function animate1(){
bee.animate({x: vBW}, 4000, mina.linear, animate2);
}
function animate2(){
bee.animate({x: 10}, 2000, mina.linear, animate1);
}
animate1();

Svg path not closing correctly

I'm trying to create a bridge-like shape with an svg using javascript. With the following html I get the overall shape, but the close path is wrong:
<svg height="897" width="414" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 414 897">
<path stroke-width="3" stroke="blue" style="fill:transparent; fill-opacity: 1"
d="M 0 0 V 207 H 30
M 30 207 q 0 -177 177 -177
M 207 30 q 177 0 177 177
H 414 V 0 H 0 z">
</path>
</svg>
This produces the following shape:
It is closing in a strange way which means that it isn't filling correctly. The strange vertical line from the top of the arch to the top left shouldn't be there. How do I get it to close properly and fill properly?

The path will close from your last point to the last declared M. You can fix this by removing all the M calls except the first one. Since you are making a continuous line you don't need to move to a new point every time.
<svg height="897" width="414" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 414 897">
<path stroke-width="3" stroke="blue" style="fill:transparent; fill-opacity: 1"
d="M 0 0 V 207 H 30
q 0 -177 177 -177
q 177 0 177 177
H 414 V 0 H 0 z">
</path>
</svg>

EJS stream with fetches

I am curious, is it possible to livestream data from an api without reloading the page.
I'm interested in redeclaring all variables that the view/page was rendered with from start of - Make a async fetch in the background, which then will redeclare the variables and rerender them in some manner.
I'm not quite sure to which approach i should have - it's basicly an idea where i have school activities fetched from an api and rendered through ejs. But i would like a realtime effect, where as i don't need to reload the page to make another fetch to see the variables being rerendered with the fresh data??
I know i could make an AJAX call on the clientside, which means i would have to rewrite my ejs file
But that's not what i'm looking for...
Is it possible to livestream data with ejs in any way?
<svg class="Bg" viewBox="0 0 201.305 94">
<path fill="rgba(50,50,69,1)" class="pathBg" d="M 0 0 L 201.3046875 0 L 201.3046875 94 L 0 94 L 0 0 Z">
</path>
</svg>
<svg class="before" viewBox="0 0 16 94">
<% switch (elem.color) {
case "green": %>
<path fill="#78952b" class="pathbefore" d="M 0 0 L 16 0 L 16 94 L 0 94 L 0 0 Z">
<% break;
case "red": %>
<path fill="#A83331" class="pathbefore" d="M 0 0 L 16 0 L 16 94 L 0 94 L 0 0 Z">
<% break;
case "purple": %>
<path fill="#7D2772" class="pathbefore" d="M 0 0 L 16 0 L 16 94 L 0 94 L 0 0 Z">
<% break;
case "blue": %>
<path fill="#3674B5" class="pathbefore" d="M 0 0 L 16 0 L 16 94 L 0 94 L 0 0 Z">
<% break;
default: case "grey": %>
<path fill="#808080" class="pathbefore" d="M 0 0 L 16 0 L 16 94 L 0 94 L 0 0 Z">
<% break;
} %>
</path>
</svg>
<div class="holdNavn">
<span><%= elem.class %></span>
</div>
<svg class="tidBg" viewBox="0 0 167 19">
<path fill="rgba(36,36,57,1)" class="pathtidBg"
d="M 9.5 0 L 157.5 0 C 162.7467041015625 0 167 4.253294467926025 167 9.5 C 167 14.74670600891113 162.7467041015625 19 157.5 19 L 9.5 19 C 4.253294467926025 19 0 14.74670600891113 0 9.5 C 0 4.253294467926025 4.253294467926025 0 9.5 0 Z">
</path>
</svg>
<div class="hold">
<span>Hold</span>
</div>
<div class="emneNavn">
<span><%= elem.friendly_name %></span>
</div>
<div class="emne">
<span>Emne</span>
</div>
<div class="tidStart">
<span><%= elem.time %></span>
</div>
<div class="lokaleNummer">
<span><%= elem.classroom %></span>
</div>
<div class="tid">
<span>Tid</span>
</div>
<div class="lokale">
<span>Lokale</span>
</div>
</div>
<% }) %>
</div>```

Dynamically create svg group clones which is store in a variable using java script or jquery

i have a lot shapes created using svg tags and which in turn stored in js variables . I want to clone and append the groups to svg element with unique ids using js.
var ped_pb = '<g transform="scale(1.5)" stroke-width=".0005"><path i:knockout="Off" fill-rule="evenodd" clip-rule="evenodd" d="M10.411,0.506V13.17h12.697V0.506H10.411z"/><g> <defs><path id="XMLID_1_" d="M0,0.253h23.87v23.809H0V0.253z"/> </defs> <clipPath id="XMLID_2_"><use xlink:href="#XMLID_1_" /></clipPath><path i:knockout="Off" clip-path="url(#XMLID_2_)" fill="none" stroke="#000000" stroke-width="1.0131" stroke-miterlimit="8" d="M10.411,0.506h12.697V13.17H10.411V0.506z"/></g><g stroke-width=".000000000000000000005"><path i:knockout="Off" clip-path="url(#XMLID_4_)" stroke="#000000" stroke-width="0.0317" stroke-linejoin="round" stroke-miterlimit="10" d="M1.523,23.777l7.555-8.422l-1.523-1.361l-7.523,8.422L1.523,23.777zM7.904,21.782l1.777-8.611l-8.38,2.723c-0.54,0.158-0.825,0.729-0.667,1.267c0.19,0.538,0.762,0.823,1.301,0.665l6.698-2.185l-1.301-1.172l-1.429,6.902c-0.095,0.538,0.254,1.076,0.794,1.203C7.269,22.668,7.777,22.321,7.904,21.782z"/></g></g>';
i need a js function to populate the above shapes stored in variable to an svg element in different x or y coordinates as when required.

i have achieved the goal in the following way
var ped_pb = '<g transform="scale(1.5)" stroke-width=".0005" style="border: 1px dashed black;"><path i:knockout="Off" fill-rule="evenodd" clip-rule="evenodd" d="M10.411,0.506V13.17h12.697V0.506H10.411z"/><g> <defs><path id="XMLID_1_" d="M0,0.253h23.87v23.809H0V0.253z"/> </defs> <clipPath id="XMLID_2_"><use xlink:href="#XMLID_1_" /></clipPath><path i:knockout="Off" clip-path="url(#XMLID_2_)" fill="none" stroke-width="1.0131" stroke-miterlimit="8" d="M10.411,0.506h12.697V13.17H10.411V0.506z"/></g><g stroke-width=".000000000000000000005"><path i:knockout="Off" clip-path="url(#XMLID_4_)" stroke-width="0.0317" stroke-linejoin="round" stroke-miterlimit="10" d="M1.523,23.777l7.555-8.422l-1.523-1.361l-7.523,8.422L1.523,23.777zM7.904,21.782l1.777-8.611l-8.38,2.723c-0.54,0.158-0.825,0.729-0.667,1.267c0.19,0.538,0.762,0.823,1.301,0.665l6.698-2.185l-1.301-1.172l-1.429,6.902c-0.095,0.538,0.254,1.076,0.794,1.203C7.269,22.668,7.777,22.321,7.904,21.782z"/></g></g>';
function clone(){
var element = document.createElementNS('http://www.w3.org/2000/svg', 'g');
element.setAttributeNS(null, 'id', 'lk');
element.innerHTML= ped_pb;
gg.appendChild(element)
element = document.createElementNS('http://www.w3.org/2000/svg', 'g');
element.setAttributeNS(null, 'id', 'lk1');
element.setAttributeNS(null, 'transform', 'translate(40,80)');
element.setAttributeNS(null, 'fill', '#0FF');
element.innerHTML= ped_pb;
gg.appendChild(element)
element = document.createElementNS('http://www.w3.org/2000/svg', 'g');
element.setAttributeNS(null, 'id', 'lk2');
element.setAttributeNS(null, 'transform', 'translate(80,120)');
element.setAttributeNS(null, 'fill', '#f00');
element.innerHTML= ped_pb;
gg.appendChild(element)
}
document.addEventListener("onload",init(),false)
function init()
{
//clone()
clone()
}
<svg id="mySVG" width="400" height="400" xmlns="http://www.w3.org/2000/svg" >
<g id="gg">
<path id="pawn" d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " />
</g>
</svg>

How to animate SVG?

I'd like to use the jQuery "animate"-call to animate a SVG.
The SVG should get for example rotated or or scaled.
What I've tried so far was this simple code but obviously this is not working so far:
$("#svg").animate({
transform: "scale(0.4)"
}, 400)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" viewBox="0 0 1 1" style="fill:purple;stroke:red" id="svg">
<svg width="100%" height="100%">
<svg width="100%" ID="piece" y="0" x="0" class="black" height="100%">
<g transform="translate(0.005) scale(0.022)">
<path d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " />
</g>
</svg>
I also added this line $("#svg").css({transform: "scale(0.4)"}) to try if the scale style will be applied on the element, and however - this is working.
How can I fix this issue why I'm not be able to animate the SVG element? Any help would be very appreciated, thanks.

You want it to animate and reduce the svg that's right ?
Here's a snipper where it works
$("#svg").animate({
width: "10%", height: "10%"
}, 400)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" viewBox="0 0 1 1" style="fill:purple;stroke:red" id="svg">
<svg width="100%" height="100%">
<svg width="100%" ID="piece" y="0" x="0" class="black" height="100%">
<g transform="translate(0.005) scale(0.022)">
<path d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " />
</g>
</svg>
Here's the documentation to use the animate function : here
or do it with CSS
#svg {
animation: reduce 2s 2; /* To make the animation twice */
}
#keyframes reduce {
from {transform : scale(1);}
to {transform : scale(0.4);}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" viewBox="0 0 1 1" style="fill:purple;stroke:red" id="svg">
<svg width="100%" height="100%">
<svg width="100%" ID="piece" y="0" x="0" class="black" height="100%">
<g transform="translate(0.005) scale(0.022)">
<path d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " />
</g>
</svg>
I make the animation twice but do as you want with the animation-iteration-count property : documentation here
Wish it helped you !

Also one good web tool what SVG Gator made you can try here:
https://app.svgator.com/
There is a few assets of animations.
Best regards.

Develop Reference

JavaScript is the programming language of the Web.

How can this path stroke set the opacity of the group behind it? - javascript

Related

Bee SVG animation with SVG.js

Svg path not closing correctly

EJS stream with fetches

Dynamically create svg group clones which is store in a variable using java script or jquery

How to animate SVG?

Categories

Resources