How do I control animation-play-start on nested animate element? - css

Question

I'm trying to create an svg that only plays its animation when it's hovered over.
I've made multiple attempts to affect the animation-play-state attribute of the following svg markup's nested animate elements; and I'm just not getting it.
I've tried:
inlining, which doesn't work, because apparently there is no inline equivalent of the animation-play-state CSS property. I also haven't been able to affect the element's inline attributes, unless I set both 'default' and 'hover' states within my CSS
selecting elements by attribute, i.e.
svg [id^=anim_RenderLayer] {/*some attribute*/}
which doesn't have an effect on any attribute I've tried
setting the CSS properties to the enclosing g elements and svg element, which was unsuccessful for the animation-play-start attribute, but successful for others.
Does anyone have any suggestions for getting the below code's animation element's into the 'paused' state, 'running' state on hover over, and to restart on mouseout?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" height="100" version="1.1" width="100">
<g id="RenderLayer_LineSet" inkscape:groupmode="lineset" inkscape:label="RenderLayer_LineSet">
<g id="frame_0001" inkscape:groupmode="frame" inkscape:label="frame_0001">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 50.000, 61.244 57.071, 68.315 64.142, 75.386 67.616, 78.860 74.687, 71.788 78.860, 67.616 71.788, 60.544 64.717, 53.473 61.244, 50.000 68.315, 42.929 75.386, 35.858 78.860, 32.384 71.788, 25.313 67.616, 21.140 60.544, 28.212 53.473, 35.283 50.000, 38.756 42.929, 31.685 35.858, 24.614 32.384, 21.140 25.313, 28.212 21.140, 32.384 28.212, 39.455 35.283, 46.527 38.756, 50.000 31.685, 57.071 24.614, 64.142 21.140, 67.616 28.212, 74.687 32.384, 78.860 39.456, 71.788 46.527, 64.717 50.000, 61.244 " fill="red" />
</g>
<animate attributeName="display" begin="-0.500s" dur="0.500s" id="anim_RenderLayer_LineSet_000001" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0002" inkscape:groupmode="frame" inkscape:label="frame_0002">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 50.000, 61.200 57.068, 68.273 64.136, 75.347 67.653, 78.867 74.712, 71.784 78.897, 67.585 71.823, 60.517 64.749, 53.449 61.244, 49.947 68.312, 42.873 75.380, 35.799 78.822, 32.355 71.738, 25.296 67.578, 21.150 60.504, 28.218 53.430, 35.286 50.000, 38.712 42.926, 31.644 35.852, 24.576 32.422, 21.150 25.339, 28.209 21.178, 32.355 28.247, 39.429 35.315, 46.503 38.756, 49.947 31.682, 57.015 24.608, 64.083 21.103, 67.585 28.162, 74.668 32.347, 78.867 39.415, 71.793 46.483, 64.719 50.000, 61.200 " fill="red" />
</g>
<animate attributeName="display" begin="-0.458s" dur="0.500s" id="anim_RenderLayer_LineSet_000002" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0003" inkscape:groupmode="frame" inkscape:label="frame_0003">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 50.000, 61.073 57.062, 68.153 64.124, 75.234 67.758, 78.877 74.784, 71.762 79.001, 67.493 71.917, 60.435 64.833, 53.376 61.244, 49.800 68.305, 42.720 75.367, 35.639 78.718, 32.280 71.600, 25.256 67.475, 21.186 60.391, 28.244 53.307, 35.302 50.000, 38.597 42.916, 31.539 35.832, 24.481 32.525, 21.186 25.407, 28.210 21.282, 32.280 28.344, 39.360 35.406, 46.441 38.756, 49.800 31.672, 56.858 24.588, 63.916 20.999, 67.493 28.026, 74.608 32.242, 78.877 39.304, 71.797 46.366, 64.717 50.000, 61.073 " fill="red" />
</g>
<animate attributeName="display" begin="-0.417s" dur="0.500s" id="anim_RenderLayer_LineSet_000003" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0004" inkscape:groupmode="frame" inkscape:label="frame_0004">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 50.000, 60.872 57.056, 67.959 64.112, 75.045 67.914, 78.864 74.896, 71.704 79.155, 67.337 72.053, 60.297 64.951, 53.257 61.243, 49.581 68.298, 42.495 75.354, 35.409 78.563, 32.187 71.390, 25.219 67.322, 21.267 60.220, 28.307 53.118, 35.347 50.000, 38.437 42.898, 31.397 35.796, 24.358 32.678, 21.267 25.505, 28.235 21.437, 32.187 28.493, 39.273 35.549, 46.359 38.757, 49.581 31.655, 56.621 24.553, 63.661 20.845, 67.337 27.827, 74.496 32.086, 78.864 39.141, 71.778 46.197, 64.691 50.000, 60.872 " fill="red" />
</g>
<animate attributeName="display" begin="-0.375s" dur="0.500s" id="anim_RenderLayer_LineSet_000004" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0005" inkscape:groupmode="frame" inkscape:label="frame_0005">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.760, 49.312 38.734, 49.337 31.603, 56.349 24.473, 63.360 20.655, 67.113 27.586, 74.322 31.890, 78.799 32.938, 77.798 39.993, 70.711 47.047, 63.623 50.000, 60.656 57.054, 67.744 64.109, 74.832 67.062, 77.798 68.110, 78.799 75.041, 71.590 79.345, 67.113 72.214, 60.102 65.084, 53.091 61.266, 49.337 61.240, 49.312 " fill="red" />
<path d=" M 61.266, 49.337 68.321, 42.250 75.375, 35.162 76.797, 33.733 78.372, 32.101 71.127, 25.208 67.136, 21.410 60.006, 28.421 52.875, 35.433 50.000, 38.260 42.870, 31.249 35.739, 24.238 32.864, 21.410 25.619, 28.304 21.628, 32.101 23.203, 33.733 30.257, 40.821 37.312, 47.908 38.734, 49.337 " fill="red" />
<path d=" M 50.000, 60.605 57.055, 67.692 64.109, 74.780 68.110, 78.799 " fill="red" />
<path d=" M 61.240, 49.312 68.295, 42.225 75.350, 35.137 78.372, 32.101 " fill="red" />
<path d=" M 31.890, 78.799 38.945, 71.711 45.999, 64.624 50.000, 60.605 50.000, 60.656 " fill="red" />
<path d=" M 21.628, 32.101 28.683, 39.188 35.738, 46.276 38.760, 49.312 " fill="red" />
</g>
<animate attributeName="display" begin="-0.333s" dur="0.500s" id="anim_RenderLayer_LineSet_000005" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0006" inkscape:groupmode="frame" inkscape:label="frame_0006">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.764, 49.013 38.584, 49.188 31.414, 56.159 24.245, 63.130 20.446, 66.824 27.326, 74.080 31.670, 78.661 32.738, 77.960 39.797, 70.878 46.857, 63.795 50.000, 60.641 57.060, 67.724 64.119, 74.806 67.262, 77.960 68.330, 78.661 75.210, 71.405 79.554, 66.824 72.385, 59.853 65.215, 52.882 61.416, 49.188 61.236, 49.013 " fill="red" />
<path d=" M 61.416, 49.188 68.476, 42.105 75.535, 35.023 76.616, 33.938 78.159, 32.044 70.829, 25.241 66.933, 21.625 59.763, 28.596 52.593, 35.567 50.000, 38.088 42.830, 31.117 35.661, 24.146 33.067, 21.625 25.738, 28.427 21.841, 32.044 23.384, 33.938 30.443, 41.021 37.503, 48.103 38.584, 49.188 " fill="red" />
<path d=" M 50.000, 60.281 57.061, 67.362 64.123, 74.442 68.330, 78.661 " fill="red" />
<path d=" M 61.236, 49.013 68.298, 41.932 75.359, 34.852 78.159, 32.044 " fill="red" />
<path d=" M 31.670, 78.661 38.732, 71.580 45.793, 64.499 50.000, 60.281 50.000, 60.641 " fill="red" />
<path d=" M 21.841, 32.044 28.902, 39.125 35.964, 46.205 38.764, 49.013 " fill="red" />
</g>
<animate attributeName="display" begin="-0.292s" dur="0.500s" id="anim_RenderLayer_LineSet_000006" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0007" inkscape:groupmode="frame" inkscape:label="frame_0007">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.769, 48.707 38.427, 49.035 31.209, 55.955 23.990, 62.875 20.231, 66.479 27.068, 73.777 31.442, 78.444 32.526, 78.066 39.599, 70.997 46.672, 63.928 50.000, 60.601 57.073, 67.671 64.146, 74.740 67.474, 78.066 68.558, 78.444 75.395, 71.147 79.769, 66.479 72.550, 59.559 65.332, 52.638 61.573, 49.035 61.231, 48.707 " fill="red" />
<path d=" M 61.573, 49.035 68.645, 41.965 75.718, 34.896 76.433, 34.182 77.940, 32.026 70.517, 25.326 66.727, 21.905 59.508, 28.825 52.289, 35.745 50.000, 37.940 42.781, 31.020 35.563, 24.099 33.273, 21.904 25.850, 28.605 22.060, 32.026 23.567, 34.182 30.640, 41.251 37.713, 48.320 38.427, 49.035 " fill="red" />
<path d=" M 50.000, 59.918 57.077, 66.983 64.154, 74.048 68.558, 78.444 " fill="red" />
<path d=" M 61.231, 48.707 68.308, 41.642 75.385, 34.577 77.940, 32.026 " fill="red" />
<path d=" M 31.442, 78.444 38.519, 71.379 45.596, 64.314 50.000, 59.918 50.000, 60.601 " fill="red" />
<path d=" M 22.060, 32.026 29.137, 39.091 36.214, 46.156 38.769, 48.707 " fill="red" />
</g>
<animate attributeName="display" begin="-0.250s" dur="0.500s" id="anim_RenderLayer_LineSet_000007" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0008" inkscape:groupmode="frame" inkscape:label="frame_0008">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.776, 48.414 38.274, 48.888 31.000, 55.750 23.726, 62.612 20.027, 66.102 26.830, 73.432 31.220, 78.161 32.319, 78.107 39.413, 71.059 46.506, 64.010 50.000, 60.539 57.094, 67.588 64.187, 74.636 67.681, 78.107 68.780, 78.161 75.583, 70.832 79.973, 66.102 72.699, 59.240 65.425, 52.378 61.726, 48.888 61.224, 48.414 " fill="red" />
<path d=" M 61.726, 48.888 68.820, 41.839 75.913, 34.791 76.259, 34.447 77.730, 32.049 70.212, 25.456 66.532, 22.228 59.258, 29.091 51.984, 35.953 50.000, 37.825 42.726, 30.963 35.452, 24.100 33.468, 22.228 25.950, 28.822 22.270, 32.049 23.741, 34.447 30.834, 41.496 37.928, 48.544 38.274, 48.888 " fill="red" />
<path d=" M 50.000, 59.542 57.101, 66.582 64.203, 73.623 68.780, 78.161 " fill="red" />
<path d=" M 61.224, 48.414 68.325, 41.373 75.427, 34.333 77.730, 32.049 " fill="red" />
<path d=" M 31.220, 78.161 38.321, 71.120 45.423, 64.080 50.000, 59.542 50.000, 60.539 " fill="red" />
<path d=" M 22.270, 32.049 29.371, 39.090 36.472, 46.130 38.776, 48.414 " fill="red" />
</g>
<animate attributeName="display" begin="-0.208s" dur="0.500s" id="anim_RenderLayer_LineSet_000008" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0009" inkscape:groupmode="frame" inkscape:label="frame_0009">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.783, 48.154 38.134, 48.757 30.804, 55.560 23.474, 62.362 19.847, 65.728 26.627, 73.079 31.021, 77.843 32.131, 78.091 39.250, 71.068 46.369, 64.045 50.000, 60.463 57.119, 67.486 64.238, 74.509 67.869, 78.091 68.979, 77.843 75.759, 70.492 80.153, 65.728 72.823, 58.926 65.493, 52.123 61.866, 48.757 61.217, 48.154 " fill="red" />
<path d=" M 61.866, 48.757 68.985, 41.734 76.107, 34.709 77.544, 32.102 69.936, 25.612 66.361, 22.562 59.031, 29.364 51.701, 36.167 50.000, 37.745 42.670, 30.943 35.340, 24.140 33.639, 22.562 26.031, 29.052 22.456, 32.102 23.893, 34.709 31.012, 41.732 38.134, 48.757 " fill="red" />
<path d=" M 50.000, 59.183 57.131, 66.194 64.261, 73.205 68.979, 77.843 " fill="red" />
<path d=" M 61.217, 48.154 68.347, 41.144 75.478, 34.133 77.544, 32.102 " fill="red" />
<path d=" M 31.021, 77.843 38.152, 70.832 45.282, 63.821 50.000, 59.183 50.000, 60.463 " fill="red" />
<path d=" M 22.456, 32.102 29.587, 39.112 36.718, 46.123 38.783, 48.154 " fill="red" />
</g>
<animate attributeName="display" begin="-0.167s" dur="0.500s" id="anim_RenderLayer_LineSet_000009" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0010" inkscape:groupmode="frame" inkscape:label="frame_0010">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.790, 47.947 38.018, 48.653 30.638, 55.401 23.258, 62.149 19.703, 65.400 26.470, 72.763 30.860, 77.541 31.978, 78.040 39.122, 71.042 46.266, 64.045 50.000, 60.388 57.144, 67.385 64.288, 74.383 68.022, 78.040 69.140, 77.541 75.906, 70.178 80.297, 65.400 72.917, 58.652 65.537, 51.904 61.982, 48.653 61.210, 47.947 " fill="red" />
<path d=" M 61.982, 48.653 69.126, 41.656 75.987, 34.936 77.394, 32.166 69.712, 25.765 66.225, 22.860 58.845, 29.608 51.466, 36.356 50.000, 37.696 42.620, 30.948 35.240, 24.200 33.775, 22.860 26.092, 29.261 22.606, 32.166 24.013, 34.936 31.157, 41.934 38.018, 48.653 " fill="red" />
<path d=" M 50.000, 58.878 57.160, 65.859 64.319, 72.841 69.140, 77.541 " fill="red" />
<path d=" M 61.210, 47.947 68.370, 40.966 75.529, 33.984 77.394, 32.166 " fill="red" />
<path d=" M 30.860, 77.541 38.020, 70.560 45.180, 63.578 50.000, 58.878 50.000, 60.388 " fill="red" />
<path d=" M 22.606, 32.166 29.765, 39.147 36.925, 46.129 38.790, 47.947 " fill="red" />
</g>
<animate attributeName="display" begin="-0.125s" dur="0.500s" id="anim_RenderLayer_LineSet_000010" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0011" inkscape:groupmode="frame" inkscape:label="frame_0011">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.795, 47.810 37.939, 48.584 30.524, 55.293 23.109, 62.002 19.609, 65.168 26.369, 72.537 30.753, 77.316 31.874, 77.986 39.038, 71.008 46.201, 64.031 50.000, 60.331 57.163, 67.309 64.327, 74.286 68.126, 77.986 69.247, 77.316 76.007, 69.947 80.391, 65.168 72.976, 58.459 65.560, 51.750 62.061, 48.584 61.205, 47.810 " fill="red" />
<path d=" M 62.061, 48.584 69.224, 41.606 75.908, 35.097 77.295, 32.220 69.561, 25.880 66.136, 23.073 58.721, 29.782 51.305, 36.491 50.000, 37.672 42.585, 30.963 35.169, 24.254 33.864, 23.073 26.130, 29.412 22.705, 32.220 24.092, 35.097 31.256, 42.074 37.939, 48.584 " fill="red" />
<path d=" M 50.000, 58.667 57.182, 65.626 64.363, 72.584 69.247, 77.316 " fill="red" />
<path d=" M 61.205, 47.810 68.387, 40.851 75.569, 33.893 77.295, 32.220 " fill="red" />
<path d=" M 30.753, 77.316 37.935, 70.358 45.116, 63.399 50.000, 58.667 50.000, 60.331 " fill="red" />
<path d=" M 22.705, 32.220 29.887, 39.178 37.068, 46.137 38.795, 47.810 " fill="red" />
</g>
<animate attributeName="display" begin="-0.083s" dur="0.500s" id="anim_RenderLayer_LineSet_000011" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0012" inkscape:groupmode="frame" inkscape:label="frame_0012">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.797, 47.760 37.910, 48.559 30.482, 55.253 23.053, 61.947 19.575, 65.081 26.333, 72.452 30.714, 77.230 31.837, 77.962 39.008, 70.993 46.179, 64.023 50.000, 60.309 57.171, 67.279 64.342, 74.248 68.163, 77.962 69.286, 77.230 76.044, 69.859 80.425, 65.081 72.996, 58.387 65.568, 51.693 62.090, 48.559 61.203, 47.760 " fill="red" />
<path d=" M 62.090, 48.559 69.261, 41.589 75.879, 35.156 77.259, 32.241 69.506, 25.925 66.104, 23.153 58.675, 29.847 51.246, 36.542 50.000, 37.665 42.571, 30.970 35.142, 24.276 33.896, 23.153 26.143, 29.469 22.741, 32.241 24.121, 35.156 31.292, 42.126 37.910, 48.559 " fill="red" />
<path d=" M 50.000, 58.589 57.190, 65.539 64.381, 72.488 69.286, 77.230 " fill="red" />
<path d=" M 61.203, 47.760 68.394, 40.810 75.584, 33.861 77.259, 32.241 " fill="red" />
<path d=" M 30.714, 77.230 37.904, 70.280 45.094, 63.330 50.000, 58.589 50.000, 60.309 " fill="red" />
<path d=" M 22.741, 32.241 29.931, 39.191 37.121, 46.141 38.797, 47.760 " fill="red" />
</g>
<animate attributeName="display" begin="-0.042s" dur="0.500s" id="anim_RenderLayer_LineSet_000012" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
</g>
</svg>

Answer 1

I was able to create a working solution, using the techniques implemented by Heydon Pickering in the following article: https://www.smashingmagazine.com/2015/09/creating-cel-animations-with-svg/
You can see a working implementation at: https://codepen.io/jamesdoe/pen/yLyrwmV
Basically, each path element within the svg represents a 'frame' of animation; and each of those frames are made visible for only brief moments of time - in the same manner that traditional motion pictures are displayed.
The start and restart of the animation are accomplished by removing and then re-adding classes that apply the animation. i.e.,
<style>
.timeline>g:nth-child(1) path.frame {
animation-name: click_animation_frame_1;
}
.timeline>g:nth-child(2) path.frame {
animation-name: click_animation_frame_2;
}
...
#keyframes click_animation_frame_1 {
0% {opacity: 1;}
16.666666666666668% {opacity: 0;}
}
#keyframes click_animation_frame_2 {
16.666666666666668% {opacity: 1;}
33.333333333333336% {opacity: 0;}
}
...
</style>
<script>
for (let g of document.getElementById('timeline').children) {
for (let path of g.children) {
path.classList.add('frame');
}
}
</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" height="100" version="1.1" width="100" id="timeline">
<g id="frame1">
<path d=" M 38.797, 47.754 37.907, 48.556 30.476, 55.248 23.046, 61.940 19.571, 65.070 26.329, 72.441 30.709, 77.219 31.832, 77.959 39.004, 70.990 46.176, 64.022 50.000, 60.306 57.172, 67.275 64.344, 74.243 68.168, 77.959 69.291, 77.219 76.049, 69.848 80.429, 65.070 72.999, 58.378 65.568, 51.686 62.093, 48.556 61.203, 47.754 "/>
<path d=" M 62.093, 48.556 69.265, 41.587 75.875, 35.164 77.255, 32.244 69.500, 25.931 66.100, 23.163 58.669, 29.855 51.239, 36.548 50.000, 37.664 42.570, 30.971 35.139, 24.279 33.900, 23.163 26.145, 29.476 22.745, 32.244 24.125, 35.164 31.297, 42.133 37.907, 48.556 "/>
<path d=" M 50.000, 58.579 57.191, 65.528 64.383, 72.476 69.291, 77.219 " />
<path d=" M 61.203, 47.754 68.395, 40.805 75.586, 33.857 77.255, 32.244 " />
<path d=" M 30.709, 77.219 37.900, 70.270 45.092, 63.322 50.000, 58.579 50.000, 60.306 " />
<path d=" M 22.745, 32.244 29.937, 39.193 37.128, 46.142 38.797, 47.754 " />
</g>
<g id="frame2">
<path d=" M 38.862, 47.999 38.070, 48.714 30.643, 55.410 23.215, 62.106 19.758, 65.223 26.516, 72.594 30.832, 77.300 31.832, 77.959 39.004, 70.990 46.176, 64.022 50.000, 60.306 57.172, 67.275 64.344, 74.243 68.168, 77.959 69.168, 77.300 75.926, 69.930 80.242, 65.223 72.815, 58.527 65.388, 51.831 61.930, 48.714 61.138, 47.999 "/>
<path d=" M 61.930, 48.714 69.102, 41.745 75.875, 35.164 77.104, 32.562 69.354, 26.243 66.014, 23.519 58.587, 30.216 51.160, 36.912 50.000, 37.957 42.573, 31.261 35.146, 24.565 33.986, 23.519 26.236, 29.839 22.896, 32.562 24.125, 35.164 31.297, 42.133 38.070, 48.714 "/>
<path d=" M 50.000, 58.768 57.189, 65.719 64.379, 72.670 69.168, 77.300 " fill="none" />
<path d=" M 61.138, 47.999 68.327, 41.048 75.517, 34.098 77.104, 32.562 " fill="none" />
<path d=" M 30.832, 77.300 38.022, 70.349 45.211, 63.398 50.000, 58.768 50.000, 60.306 " />
<path d=" M 22.896, 32.562 30.085, 39.513 37.274, 46.464 38.862, 47.999 " fill="none" />
</g>
<g id="frame3">
<path d=" M 39.014, 48.573 38.450, 49.083 31.031, 55.788 23.612, 62.493 20.195, 65.581 26.955, 72.950 31.120, 77.490 31.832, 77.959 39.004, 70.990 46.176, 64.022 50.000, 60.306 57.172, 67.275 64.344, 74.243 68.168, 77.959 68.880, 77.490 75.640, 70.121 79.805, 65.581 72.386, 58.876 64.967, 52.171 61.550, 49.083 60.986, 48.573 "/>
<path d=" M 61.550, 49.083 68.722, 42.114 75.875, 35.164 76.753, 33.307 69.014, 26.974 65.813, 24.354 58.394, 31.059 50.975, 37.764 50.000, 38.645 42.581, 31.940 35.162, 25.235 34.187, 24.354 26.448, 30.687 23.247, 33.307 24.125, 35.164 31.297, 42.133 38.450, 49.083 "/>
<path d=" M 50.000, 59.209 57.184, 66.165 64.369, 73.121 68.880, 77.490 " />
<path d=" M 60.986, 48.573 68.170, 41.617 75.354, 34.661 76.753, 33.307 " />
<path d=" M 31.120, 77.490 38.304, 70.534 45.488, 63.578 50.000, 59.209 50.000, 60.306 " />
<path d=" M 23.247, 33.307 30.432, 40.263 37.616, 47.219 39.014, 48.573 " />
</g>
<g id="frame4">
<path d=" M 39.191, 49.237 38.889, 49.510 31.480, 56.225 24.070, 62.941 20.701, 65.994 27.462, 73.361 31.452, 77.709 31.832, 77.959 39.004, 70.990 46.176, 64.022 50.000, 60.306 57.172, 67.275 64.344, 74.243 68.168, 77.959 68.548, 77.709 75.310, 70.341 79.299, 65.994 71.890, 59.279 64.480, 52.563 61.111, 49.510 60.809, 49.237 "/>
<path d=" M 61.111, 49.510 68.283, 42.542 75.454, 35.573 75.875, 35.164 76.345, 34.170 68.619, 27.821 65.579, 25.323 58.169, 32.038 50.759, 38.753 50.000, 39.441 42.590, 32.726 35.180, 26.011 34.421, 25.323 26.695, 31.672 23.655, 34.170 24.125, 35.164 31.297, 42.133 38.469, 49.101 38.889, 49.510 "/>
<path d=" M 50.000, 59.720 57.179, 66.682 64.357, 73.644 68.548, 77.709 " />
<path d=" M 60.809, 49.237 67.988, 42.275 75.166, 35.313 76.345, 34.170 " />
<path d=" M 31.452, 77.709 38.631, 70.747 45.809, 63.785 50.000, 59.720 50.000, 60.306 " />
<path d=" M 23.655, 34.170 30.834, 41.132 38.012, 48.094 39.191, 49.237 " />
</g>
<g id="frame5">
<path d=" M 39.334, 49.778 39.247, 49.857 31.844, 56.581 24.442, 63.304 21.111, 66.329 27.874, 73.696 31.721, 77.886 31.832, 77.959 39.004, 70.990 46.176, 64.022 50.000, 60.306 57.172, 67.275 64.344, 74.243 68.168, 77.959 68.279, 77.886 75.042, 70.520 78.889, 66.329 71.486, 59.606 64.084, 52.882 60.753, 49.857 60.666, 49.778 "/>
<path d=" M 60.753, 49.857 67.925, 42.889 75.097, 35.920 75.875, 35.164 76.012, 34.874 68.297, 28.512 65.389, 26.113 57.986, 32.837 50.584, 39.560 50.000, 40.090 42.598, 33.367 35.195, 26.643 34.611, 26.113 26.896, 32.475 23.988, 34.874 24.125, 35.164 31.297, 42.133 38.469, 49.101 39.247, 49.857 "/>
<path d=" M 50.000, 60.135 57.174, 67.102 64.348, 74.069 68.279, 77.886 " />
<path d=" M 60.666, 49.778 67.840, 42.811 75.013, 35.844 76.012, 34.874 " />
<path d=" M 31.721, 77.886 38.895, 70.919 46.069, 63.953 50.000, 60.135 50.000, 60.306 " />
<path d=" M 23.988, 34.874 31.162, 41.841 38.335, 48.808 39.334, 49.778 " />
</g>
<g id="frame6">
<path d=" M 78.720, 66.467 71.957, 73.833 68.168, 77.959 60.996, 70.990 53.824, 64.022 50.000, 60.306 42.828, 67.275 35.656, 74.243 31.832, 77.959 25.069, 70.593 21.280, 66.467 28.679, 59.740 36.079, 53.014 39.393, 50.000 32.221, 43.031 25.049, 36.063 24.125, 35.164 31.835, 28.796 34.690, 26.439 42.089, 33.166 49.489, 39.892 50.000, 40.357 57.399, 33.631 64.799, 26.904 65.310, 26.439 73.021, 32.806 75.875, 35.164 68.703, 42.133 61.531, 49.101 60.607, 50.000 68.006, 56.727 75.405, 63.454 78.720, 66.467 "/>
</g>
</svg>