I need to animate this logo to fill smoothly and disappear on the end of animation, for example like on this website: https://largo.studio/ I'm trying all of the combination of css, but nothing works.
.path {
stroke-dasharray: 1300;
stroke-dashoffset: 1500;
animation: dash 4s linear forwards;
}
#keyframes dash {
0% {
stroke-dashoffset: 822;
fill: white;
}
50% {
stroke-dashoffset: 600;
}
70% {
fill: #db0d83;
stroke-dashoffset: 400;
}
100% {
fill: white;
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 1824 485" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:22.926;"><path class="path" fill="white" stroke="#db0d83" stroke-width="4" d="M327.236,354.205c0,46.271 -17.896,80.534 -53.581,102.797c-24.88,15.278 -67.548,22.917 -128.113,22.917l-143.064,0l0,-470.769l128.659,0c57.946,0 98.431,6.764 121.567,20.297c33.501,19.643 50.306,51.726 50.306,96.25c0,51.944 -26.736,87.736 -80.316,107.379c69.731,13.531 104.542,53.907 104.542,121.129m-45.833,-229.818c0,-36.229 -12.221,-61.548 -36.774,-75.953c-22.263,-13.093 -59.692,-19.642 -112.182,-19.642l-108.362,0l0,197.738l109.671,0c98.432,0 147.647,-34.049 147.647,-102.143m22.917,225.89c0,-37.976 -13.095,-65.258 -39.286,-81.844c-26.189,-16.587 -67.439,-24.881 -123.749,-24.881l-117.2,0l0,216.725l116.546,0c51.508,0 86.864,-3.929 106.071,-11.786c38.412,-15.715 57.618,-48.452 57.618,-98.214m377.139,-46.611c0,55.437 -13.422,98.976 -40.267,130.623c-26.845,31.647 -63.402,47.47 -109.672,47.47c-45.832,0 -82.175,-15.825 -109.017,-47.47c-26.842,-31.642 -40.267,-75.186 -40.267,-130.623c0,-55.435 13.422,-98.978 40.267,-130.625c26.845,-31.645 63.185,-47.469 109.017,-47.469c46.27,0 82.831,15.829 109.672,47.469c26.841,31.645 40.267,75.19 40.267,130.625m-21.607,0c0,-49.762 -11.571,-88.832 -34.811,-117.2c-23.241,-28.369 -54.454,-42.561 -93.521,-42.561c-39.067,0 -70.172,14.192 -93.194,42.561c-23.021,28.368 -34.483,67.438 -34.483,117.2c0,49.761 11.458,88.829 34.483,117.203c23.025,28.371 54.127,42.557 93.194,42.557c39.067,0 70.278,-14.186 93.521,-42.557c23.243,-28.374 34.811,-67.442 34.811,-117.203m345.71,168.928l-20.298,0l0,-53.037c-21.387,41.468 -59.581,62.202 -114.581,62.202c-77.697,0 -116.547,-40.595 -116.547,-121.783l0,-227.2l20.297,0l0,220.215c0,37.86 7.453,65.566 22.263,82.935c14.865,17.434 39.285,26.191 73.332,26.191c38.412,0 67.747,-11.277 87.737,-33.938c11.869,-13.452 19.718,-29.89 23.572,-49.107c2.687,-13.404 3.927,-34.373 3.927,-62.637l0,-183.659l20.298,0l0,339.818Zm356.842,-109.346c-3.928,36.668 -17.9,65.589 -41.904,86.757c-24.004,21.165 -54.782,31.754 -92.321,31.754c-44.522,0 -80.316,-15.933 -107.379,-47.796c-27.062,-31.864 -40.595,-75.298 -40.595,-130.297c0,-55.435 13.536,-98.98 40.595,-130.625c27.059,-31.64 63.511,-47.469 109.344,-47.469c35.793,0 65.042,9.389 87.738,28.154c22.694,18.769 36.447,44.96 41.249,78.571l-20.953,0c-4.365,-27.062 -16.372,-48.564 -36.011,-64.492c-19.64,-15.93 -43.651,-23.9 -72.023,-23.9c-39.285,0 -70.496,14.187 -93.631,42.561c-23.133,28.371 -34.701,67.438 -34.701,117.2c0,49.761 11.57,88.831 34.701,117.203c23.131,28.368 54.346,42.557 93.631,42.557c29.682,0 54.894,-9.171 75.624,-27.5c20.731,-18.328 33.066,-42.559 36.993,-72.678l19.643,0Zm96.249,109.346l-20.298,0l0,-470.116l20.298,0l0,470.116Zm273.687,-470.116l-59.582,87.738l-20.953,0l50.416,-87.738l30.119,0Zm88.392,302.498l-265.831,0l0,5.237c0,46.263 11.567,83.373 34.594,111.308c23.025,27.938 52.489,41.905 88.501,41.905c28.155,0 52.601,-8.079 73.442,-24.227c20.839,-16.145 35.247,-38.192 43.105,-66.129l20.297,0c-7.42,33.174 -23.597,59.561 -48.562,79.227c-24.898,19.61 -54.235,29.462 -87.955,29.462c-44.195,0 -79.305,-15.854 -105.306,-47.47c-26.045,-31.67 -39.067,-75.186 -39.067,-130.623c0,-55.435 12.99,-98.98 38.958,-130.625c25.969,-31.64 61.001,-47.469 105.088,-47.469c44.087,0 78.902,14.627 104.433,43.869c25.533,29.243 38.303,70.285 38.303,123.094l0,12.441Zm-21.606,-19.642c0,-43.433 -10.917,-77.921 -32.629,-103.343c-21.712,-25.423 -49.87,-38.086 -84.573,-38.086c-36.011,0 -65.37,12.553 -88.173,37.758c-22.804,25.205 -35.576,59.802 -38.194,103.671l243.569,0Z" style="fill-rule:nonzero;"></path><path d="M327.236,354.205c0,46.271 -17.896,80.534 -53.581,102.797c-24.88,15.278 -67.548,22.917 -128.113,22.917l-143.064,0l0,-470.769l128.659,0c57.946,0 98.431,6.764 121.567,20.297c33.501,19.643 50.306,51.726 50.306,96.25c0,51.944 -26.736,87.736 -80.316,107.379c69.731,13.531 104.542,53.907 104.542,121.129Zm-45.833,-229.818c0,-36.229 -12.221,-61.548 -36.774,-75.953c-22.263,-13.093 -59.692,-19.642 -112.182,-19.642l-108.362,0l0,197.738l109.671,0c98.432,0 147.647,-34.049 147.647,-102.143Zm22.917,225.89c0,-37.976 -13.095,-65.258 -39.286,-81.844c-26.189,-16.587 -67.439,-24.881 -123.749,-24.881l-117.2,0l0,216.725l116.546,0c51.508,0 86.864,-3.929 106.071,-11.786c38.412,-15.715 57.618,-48.452 57.618,-98.214Zm377.139,-46.611c0,55.437 -13.422,98.976 -40.267,130.623c-26.845,31.647 -63.402,47.47 -109.672,47.47c-45.832,0 -82.175,-15.825 -109.017,-47.47c-26.842,-31.642 -40.267,-75.186 -40.267,-130.623c0,-55.435 13.422,-98.978 40.267,-130.625c26.845,-31.645 63.185,-47.469 109.017,-47.469c46.27,0 82.831,15.829 109.672,47.469c26.841,31.645 40.267,75.19 40.267,130.625Zm-21.607,0c0,-49.762 -11.571,-88.832 -34.811,-117.2c-23.241,-28.369 -54.454,-42.561 -93.521,-42.561c-39.067,0 -70.172,14.192 -93.194,42.561c-23.021,28.368 -34.483,67.438 -34.483,117.2c0,49.761 11.458,88.829 34.483,117.203c23.025,28.371 54.127,42.557 93.194,42.557c39.067,0 70.278,-14.186 93.521,-42.557c23.243,-28.374 34.811,-67.442 34.811,-117.203Zm345.71,168.928l-20.298,0l0,-53.037c-21.387,41.468 -59.581,62.202 -114.581,62.202c-77.697,0 -116.547,-40.595 -116.547,-121.783l0,-227.2l20.297,0l0,220.215c0,37.86 7.453,65.566 22.263,82.935c14.865,17.434 39.285,26.191 73.332,26.191c38.412,0 67.747,-11.277 87.737,-33.938c11.869,-13.452 19.718,-29.89 23.572,-49.107c2.687,-13.404 3.927,-34.373 3.927,-62.637l0,-183.659l20.298,0l0,339.818Zm356.842,-109.346c-3.928,36.668 -17.9,65.589 -41.904,86.757c-24.004,21.165 -54.782,31.754 -92.321,31.754c-44.522,0 -80.316,-15.933 -107.379,-47.796c-27.062,-31.864 -40.595,-75.298 -40.595,-130.297c0,-55.435 13.536,-98.98 40.595,-130.625c27.059,-31.64 63.511,-47.469 109.344,-47.469c35.793,0 65.042,9.389 87.738,28.154c22.694,18.769 36.447,44.96 41.249,78.571l-20.953,0c-4.365,-27.062 -16.372,-48.564 -36.011,-64.492c-19.64,-15.93 -43.651,-23.9 -72.023,-23.9c-39.285,0 -70.496,14.187 -93.631,42.561c-23.133,28.371 -34.701,67.438 -34.701,117.2c0,49.761 11.57,88.831 34.701,117.203c23.131,28.368 54.346,42.557 93.631,42.557c29.682,0 54.894,-9.171 75.624,-27.5c20.731,-18.328 33.066,-42.559 36.993,-72.678l19.643,0Zm96.249,109.346l-20.298,0l0,-470.116l20.298,0l0,470.116Zm273.687,-470.116l-59.582,87.738l-20.953,0l50.416,-87.738l30.119,0Zm88.392,302.498l-265.831,0l0,5.237c0,46.263 11.567,83.373 34.594,111.308c23.025,27.938 52.489,41.905 88.501,41.905c28.155,0 52.601,-8.079 73.442,-24.227c20.839,-16.145 35.247,-38.192 43.105,-66.129l20.297,0c-7.42,33.174 -23.597,59.561 -48.562,79.227c-24.898,19.61 -54.235,29.462 -87.955,29.462c-44.195,0 -79.305,-15.854 -105.306,-47.47c-26.045,-31.67 -39.067,-75.186 -39.067,-130.623c0,-55.435 12.99,-98.98 38.958,-130.625c25.969,-31.64 61.001,-47.469 105.088,-47.469c44.087,0 78.902,14.627 104.433,43.869c25.533,29.243 38.303,70.285 38.303,123.094l0,12.441Zm-21.606,-19.642c0,-43.433 -10.917,-77.921 -32.629,-103.343c-21.712,-25.423 -49.87,-38.086 -84.573,-38.086c-36.011,0 -65.37,12.553 -88.173,37.758c-22.804,25.205 -35.576,59.802 -38.194,103.671l243.569,0Z" style="fill:none;fill-rule:nonzero;stroke:#e5097f;stroke-width:0.22px;"></path></svg>
If I understand correctly, the problem you have is that not everything disappears (or rather becomes white) when the animation ends. In that case, I would think that the problem is in the stroke declaration in the path
.path {
stroke-dasharray: 1300;
stroke-dashoffset: 1500;
animation: dash 4s linear forwards;
}
#keyframes dash {
0% {
stroke:#e5097f;
stroke-dashoffset: 822;
fill: white;
}
50% {
stroke-dashoffset: 600;
}
70% {
fill: #db0d83;
stroke-dashoffset: 400;
}
100% {
fill: white;
stroke: white;
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 1824 485" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:22.926;"><path class="path" fill="white" stroke="#db0d83" stroke-width="4" d="M327.236,354.205c0,46.271 -17.896,80.534 -53.581,102.797c-24.88,15.278 -67.548,22.917 -128.113,22.917l-143.064,0l0,-470.769l128.659,0c57.946,0 98.431,6.764 121.567,20.297c33.501,19.643 50.306,51.726 50.306,96.25c0,51.944 -26.736,87.736 -80.316,107.379c69.731,13.531 104.542,53.907 104.542,121.129m-45.833,-229.818c0,-36.229 -12.221,-61.548 -36.774,-75.953c-22.263,-13.093 -59.692,-19.642 -112.182,-19.642l-108.362,0l0,197.738l109.671,0c98.432,0 147.647,-34.049 147.647,-102.143m22.917,225.89c0,-37.976 -13.095,-65.258 -39.286,-81.844c-26.189,-16.587 -67.439,-24.881 -123.749,-24.881l-117.2,0l0,216.725l116.546,0c51.508,0 86.864,-3.929 106.071,-11.786c38.412,-15.715 57.618,-48.452 57.618,-98.214m377.139,-46.611c0,55.437 -13.422,98.976 -40.267,130.623c-26.845,31.647 -63.402,47.47 -109.672,47.47c-45.832,0 -82.175,-15.825 -109.017,-47.47c-26.842,-31.642 -40.267,-75.186 -40.267,-130.623c0,-55.435 13.422,-98.978 40.267,-130.625c26.845,-31.645 63.185,-47.469 109.017,-47.469c46.27,0 82.831,15.829 109.672,47.469c26.841,31.645 40.267,75.19 40.267,130.625m-21.607,0c0,-49.762 -11.571,-88.832 -34.811,-117.2c-23.241,-28.369 -54.454,-42.561 -93.521,-42.561c-39.067,0 -70.172,14.192 -93.194,42.561c-23.021,28.368 -34.483,67.438 -34.483,117.2c0,49.761 11.458,88.829 34.483,117.203c23.025,28.371 54.127,42.557 93.194,42.557c39.067,0 70.278,-14.186 93.521,-42.557c23.243,-28.374 34.811,-67.442 34.811,-117.203m345.71,168.928l-20.298,0l0,-53.037c-21.387,41.468 -59.581,62.202 -114.581,62.202c-77.697,0 -116.547,-40.595 -116.547,-121.783l0,-227.2l20.297,0l0,220.215c0,37.86 7.453,65.566 22.263,82.935c14.865,17.434 39.285,26.191 73.332,26.191c38.412,0 67.747,-11.277 87.737,-33.938c11.869,-13.452 19.718,-29.89 23.572,-49.107c2.687,-13.404 3.927,-34.373 3.927,-62.637l0,-183.659l20.298,0l0,339.818Zm356.842,-109.346c-3.928,36.668 -17.9,65.589 -41.904,86.757c-24.004,21.165 -54.782,31.754 -92.321,31.754c-44.522,0 -80.316,-15.933 -107.379,-47.796c-27.062,-31.864 -40.595,-75.298 -40.595,-130.297c0,-55.435 13.536,-98.98 40.595,-130.625c27.059,-31.64 63.511,-47.469 109.344,-47.469c35.793,0 65.042,9.389 87.738,28.154c22.694,18.769 36.447,44.96 41.249,78.571l-20.953,0c-4.365,-27.062 -16.372,-48.564 -36.011,-64.492c-19.64,-15.93 -43.651,-23.9 -72.023,-23.9c-39.285,0 -70.496,14.187 -93.631,42.561c-23.133,28.371 -34.701,67.438 -34.701,117.2c0,49.761 11.57,88.831 34.701,117.203c23.131,28.368 54.346,42.557 93.631,42.557c29.682,0 54.894,-9.171 75.624,-27.5c20.731,-18.328 33.066,-42.559 36.993,-72.678l19.643,0Zm96.249,109.346l-20.298,0l0,-470.116l20.298,0l0,470.116Zm273.687,-470.116l-59.582,87.738l-20.953,0l50.416,-87.738l30.119,0Zm88.392,302.498l-265.831,0l0,5.237c0,46.263 11.567,83.373 34.594,111.308c23.025,27.938 52.489,41.905 88.501,41.905c28.155,0 52.601,-8.079 73.442,-24.227c20.839,-16.145 35.247,-38.192 43.105,-66.129l20.297,0c-7.42,33.174 -23.597,59.561 -48.562,79.227c-24.898,19.61 -54.235,29.462 -87.955,29.462c-44.195,0 -79.305,-15.854 -105.306,-47.47c-26.045,-31.67 -39.067,-75.186 -39.067,-130.623c0,-55.435 12.99,-98.98 38.958,-130.625c25.969,-31.64 61.001,-47.469 105.088,-47.469c44.087,0 78.902,14.627 104.433,43.869c25.533,29.243 38.303,70.285 38.303,123.094l0,12.441Zm-21.606,-19.642c0,-43.433 -10.917,-77.921 -32.629,-103.343c-21.712,-25.423 -49.87,-38.086 -84.573,-38.086c-36.011,0 -65.37,12.553 -88.173,37.758c-22.804,25.205 -35.576,59.802 -38.194,103.671l243.569,0Z" style="fill-rule:nonzero;"></path><path d="M327.236,354.205c0,46.271 -17.896,80.534 -53.581,102.797c-24.88,15.278 -67.548,22.917 -128.113,22.917l-143.064,0l0,-470.769l128.659,0c57.946,0 98.431,6.764 121.567,20.297c33.501,19.643 50.306,51.726 50.306,96.25c0,51.944 -26.736,87.736 -80.316,107.379c69.731,13.531 104.542,53.907 104.542,121.129Zm-45.833,-229.818c0,-36.229 -12.221,-61.548 -36.774,-75.953c-22.263,-13.093 -59.692,-19.642 -112.182,-19.642l-108.362,0l0,197.738l109.671,0c98.432,0 147.647,-34.049 147.647,-102.143Zm22.917,225.89c0,-37.976 -13.095,-65.258 -39.286,-81.844c-26.189,-16.587 -67.439,-24.881 -123.749,-24.881l-117.2,0l0,216.725l116.546,0c51.508,0 86.864,-3.929 106.071,-11.786c38.412,-15.715 57.618,-48.452 57.618,-98.214Zm377.139,-46.611c0,55.437 -13.422,98.976 -40.267,130.623c-26.845,31.647 -63.402,47.47 -109.672,47.47c-45.832,0 -82.175,-15.825 -109.017,-47.47c-26.842,-31.642 -40.267,-75.186 -40.267,-130.623c0,-55.435 13.422,-98.978 40.267,-130.625c26.845,-31.645 63.185,-47.469 109.017,-47.469c46.27,0 82.831,15.829 109.672,47.469c26.841,31.645 40.267,75.19 40.267,130.625Zm-21.607,0c0,-49.762 -11.571,-88.832 -34.811,-117.2c-23.241,-28.369 -54.454,-42.561 -93.521,-42.561c-39.067,0 -70.172,14.192 -93.194,42.561c-23.021,28.368 -34.483,67.438 -34.483,117.2c0,49.761 11.458,88.829 34.483,117.203c23.025,28.371 54.127,42.557 93.194,42.557c39.067,0 70.278,-14.186 93.521,-42.557c23.243,-28.374 34.811,-67.442 34.811,-117.203Zm345.71,168.928l-20.298,0l0,-53.037c-21.387,41.468 -59.581,62.202 -114.581,62.202c-77.697,0 -116.547,-40.595 -116.547,-121.783l0,-227.2l20.297,0l0,220.215c0,37.86 7.453,65.566 22.263,82.935c14.865,17.434 39.285,26.191 73.332,26.191c38.412,0 67.747,-11.277 87.737,-33.938c11.869,-13.452 19.718,-29.89 23.572,-49.107c2.687,-13.404 3.927,-34.373 3.927,-62.637l0,-183.659l20.298,0l0,339.818Zm356.842,-109.346c-3.928,36.668 -17.9,65.589 -41.904,86.757c-24.004,21.165 -54.782,31.754 -92.321,31.754c-44.522,0 -80.316,-15.933 -107.379,-47.796c-27.062,-31.864 -40.595,-75.298 -40.595,-130.297c0,-55.435 13.536,-98.98 40.595,-130.625c27.059,-31.64 63.511,-47.469 109.344,-47.469c35.793,0 65.042,9.389 87.738,28.154c22.694,18.769 36.447,44.96 41.249,78.571l-20.953,0c-4.365,-27.062 -16.372,-48.564 -36.011,-64.492c-19.64,-15.93 -43.651,-23.9 -72.023,-23.9c-39.285,0 -70.496,14.187 -93.631,42.561c-23.133,28.371 -34.701,67.438 -34.701,117.2c0,49.761 11.57,88.831 34.701,117.203c23.131,28.368 54.346,42.557 93.631,42.557c29.682,0 54.894,-9.171 75.624,-27.5c20.731,-18.328 33.066,-42.559 36.993,-72.678l19.643,0Zm96.249,109.346l-20.298,0l0,-470.116l20.298,0l0,470.116Zm273.687,-470.116l-59.582,87.738l-20.953,0l50.416,-87.738l30.119,0Zm88.392,302.498l-265.831,0l0,5.237c0,46.263 11.567,83.373 34.594,111.308c23.025,27.938 52.489,41.905 88.501,41.905c28.155,0 52.601,-8.079 73.442,-24.227c20.839,-16.145 35.247,-38.192 43.105,-66.129l20.297,0c-7.42,33.174 -23.597,59.561 -48.562,79.227c-24.898,19.61 -54.235,29.462 -87.955,29.462c-44.195,0 -79.305,-15.854 -105.306,-47.47c-26.045,-31.67 -39.067,-75.186 -39.067,-130.623c0,-55.435 12.99,-98.98 38.958,-130.625c25.969,-31.64 61.001,-47.469 105.088,-47.469c44.087,0 78.902,14.627 104.433,43.869c25.533,29.243 38.303,70.285 38.303,123.094l0,12.441Zm-21.606,-19.642c0,-43.433 -10.917,-77.921 -32.629,-103.343c-21.712,-25.423 -49.87,-38.086 -84.573,-38.086c-36.011,0 -65.37,12.553 -88.173,37.758c-22.804,25.205 -35.576,59.802 -38.194,103.671l243.569,0Z" style="fill:none;fill-rule:nonzero;stroke-width:0.22px;"></path></svg>
Related
I have made a single contour .svg cursor (basically a triangle curved at the bottom) without any fill, and I want to be able to change its fill color. I can't just make few different svgs for this, due to fill color being picked by user.
QtGraphicalEffects library is not supported since Qt6, so all I could find on this topic was of little use. The solution for this might be to just drop my svg over a colored rectangle, but then I'll have to mask out the area outside of my cursor to make it transparent(or vice-versa), and I'm not sure if it's even possible. I also found some shader-based solutions but none of then seem to work for my case (might just be me being new to QML)
SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #414141;
stroke-width: 44px;
fill-rule: evenodd;
}
</style>
</defs>
<path id="Pointer_1" data-name="Pointer 1" class="cls-1" d="M300.291,48.248L556.347,560.4s-127.234-47.825-255.133-47.825c-128.157,0-256.979,47.825-256.979,47.825Z"/>
</svg>
[MULTIPLE EDITS]
Firstly, the latest builds of Qt6 do support QtGraphicalEffects via Qt5Compat.GraphicalEffects. https://doc.qt.io/qt-6/qtgraphicaleffects5-
The approach I prefer to use is to leverage the fact that most components have an icon property which has a built-in mechanism for recoloring an SVG. You set the following properties:
icon.source
icon.width
icon.height
icon.color
By creating two SVGs we can use the above approach to control the fill and stroke independently.
The typical component I use is Button, but, I strip off the default Button UI/UX and just leverage from the icon property as follows:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
SplitView {
anchors.fill: parent
orientation: Qt.Horizontal
Item {
SplitView.preferredWidth: parent.width / 2
SplitView.fillHeight: true
Item {
anchors.centerIn: parent
width: parent.width * 8 / 10
height: parent.height * 8 / 10
Button {
anchors.centerIn: parent
visible: fillCombo.currentText !== 'none'
background: Item { }
icon.source: "shape-fill.svg"
icon.width: Math.min(parent.width, parent.height)
icon.height: icon.width
icon.color: fillCombo.currentText
}
Button {
anchors.centerIn: parent
visible: strokeCombo.currentText !== 'none'
background: Item { }
icon.source: "shape-outline.svg"
icon.width: Math.min(parent.width, parent.height)
icon.height: icon.width
icon.color: strokeCombo.currentText
}
}
}
Item {
SplitView.fillWidth: true
SplitView.fillHeight: true
ColumnLayout {
anchors.centerIn: parent
Label {
text: qsTr("Stroke")
}
ComboBox {
id: strokeCombo
model: [ "lightsteelblue", "red", "orange", "yellow", "green", "blue" ]
}
Label {
Layout.topMargin: 20
text: qsTr("Fill")
}
ComboBox {
id: fillCombo
model: [ "none", "red", "orange", "yellow", "green", "blue" ]
}
}
}
}
}
// shape-outline.svg
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
<path stroke="red" stroke-width="44" fill="none" d="M300.291,48.248L556.347,560.4s-127.234-47.825-255.133-47.825c-128.157,0-256.979,47.825-256.979,47.825Z"/>
</svg>
// shape-fill.svg
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
<path stroke="none" fill="black" d="M300.291,48.248L556.347,560.4s-127.234-47.825-255.133-47.825c-128.157,0-256.979,47.825-256.979,47.825Z"/>
</svg>
You can Try it Online!
Alternatively, another approach is you can build your SVG as a data uri by adding a "data:image/svg+xml," prefix to your SVG string. Because you're using a data uri, you can make a function that generates the SVG based on use input:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
SplitView {
anchors.fill: parent
orientation: Qt.Horizontal
Item {
SplitView.preferredWidth: parent.width / 2
SplitView.fillHeight: true
Image {
anchors.centerIn: parent
width: parent.width * 8 / 10
height: parent.height * 8 / 10
source: todatauri(getsvg(strokeCombo.currentText, fillCombo.currentText))
fillMode: Image.PreserveAspectFit
}
}
Item {
SplitView.fillWidth: true
SplitView.fillHeight: true
ColumnLayout {
anchors.centerIn: parent
Label {
text: qsTr("Stroke")
}
ComboBox {
id: strokeCombo
model: [ "black", "red", "orange", "yellow", "green", "blue" ]
}
Label {
Layout.topMargin: 20
text: qsTr("Fill")
}
ComboBox {
id: fillCombo
model: [ "none", "red", "orange", "yellow", "green", "blue" ]
}
}
}
}
function todatauri(svg) {
return "data:image/svg+xml," + svg;
}
function getsvg(stroke, fill) {
return `<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #414141;
stroke-width: 44px;
fill-rule: evenodd;
}
</style>
</defs>
<path id="Pointer_1" data-name="Pointer 1" class="cls-1" stroke="${stroke}" stroke-width="44" fill="${fill}" d="M300.291,48.248L556.347,560.4s-127.234-47.825-255.133-47.825c-128.157,0-256.979,47.825-256.979,47.825Z"/>
</svg>
`;
}
}
You can Try it Online!
i have created sample animation, but there is some kind of issue with the moving road. When animation is finished, it starts from the begining, which i understand, but i want it to look like it's endless drawing, loop this effect. Can't figure this out, can anyone help?
.loader {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 20px;
position: relative;
width: 300px;
}
#small-cloud {
transform: translate(0px, 0px);
animation: cloud 10s linear infinite;
}
#road {
transform: translate(39px, 0px);
animation: road 1s linear infinite;
}
#keyframes road {
0% {
-webkit-transform: translateX(39px);
}
100% {
-webkit-transform: translateX(0px);
}
}
#keyframes cloud {
0% {
-webkit-transform: translateX(0px);
}
50% {
-webkit-transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0px);
}
}
<div class="loader">
<svg width="245" height="176" viewBox="0 0 245 176" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="small-cloud">
<path d="M112.222 85.9652C111.448 85.9582 110.679 86.1049 109.962 86.3965C109.244 86.6882 108.591 87.1192 108.041 87.6646C107.49 88.21 107.054 88.8589 106.756 89.574C106.457 90.2891 106.304 91.056 106.304 91.8307C106.304 92.6054 106.457 93.3727 106.756 94.0878C107.054 94.8029 107.49 95.4518 108.041 95.9971C108.591 96.5425 109.244 96.9733 109.962 97.2649C110.679 97.5566 111.448 97.7032 112.222 97.6962C113.315 97.6962 115.73 97.7541 118.203 97.8115C121.136 97.869 124.185 97.9268 125.852 97.9268C131.488 97.9268 136.088 93.3839 136.088 87.7476C136.089 85.1929 135.134 82.7302 133.412 80.8436C131.689 78.9571 129.323 77.783 126.779 77.5524C124.234 77.3218 121.696 78.0513 119.662 79.5974C117.628 81.1435 116.246 83.3944 115.788 85.9077C115.767 86.0272 115.72 86.1404 115.65 86.2397C115.581 86.3391 115.49 86.4222 115.385 86.4829C115.279 86.5395 115.161 86.569 115.04 86.569C114.92 86.569 114.802 86.5395 114.696 86.4829C113.916 86.1413 113.074 85.9649 112.222 85.9652ZM125.851 99.537C124.183 99.537 121.136 99.4795 118.203 99.4224C115.673 99.3646 113.315 99.3071 112.222 99.3071C110.254 99.285 108.374 98.4875 106.99 97.0879C105.606 95.6883 104.83 93.7993 104.83 91.831C104.83 89.8627 105.606 87.9741 106.99 86.5745C108.374 85.1749 110.254 84.3774 112.222 84.3553C112.983 84.3572 113.739 84.4735 114.465 84.7002C115.034 82.5744 116.186 80.6501 117.792 79.1455C119.398 77.6408 121.393 76.6156 123.551 76.186C125.709 75.7563 127.945 75.9395 130.004 76.7144C132.064 77.4893 133.865 78.8252 135.205 80.571C136.545 82.3167 137.369 84.4026 137.585 86.5926C137.801 88.7826 137.399 90.9893 136.426 92.9629C135.452 94.9365 133.946 96.5983 132.077 97.7602C130.208 98.9221 128.052 99.5377 125.851 99.5374L125.851 99.537Z" fill="#7099B7"/>
</g>
<path d="M201.456 175.516H90.2948C90.1928 175.512 90.0925 175.488 89.9997 175.446C89.9069 175.403 89.8232 175.343 89.7538 175.268C89.6843 175.193 89.6305 175.106 89.5951 175.01C89.5597 174.914 89.5434 174.812 89.5475 174.71C89.5475 174.308 89.8923 173.905 90.2948 173.905H201.456C201.664 173.92 201.861 174.009 202.009 174.157C202.157 174.305 202.246 174.502 202.261 174.71C202.256 174.923 202.17 175.125 202.02 175.275C201.87 175.425 201.668 175.511 201.456 175.516Z" fill="#7099B7"/>
<path d="M109.215 140.494C104.868 140.494 100.7 142.221 97.6261 145.294C94.5525 148.368 92.8255 152.537 92.8255 156.883C92.8255 161.23 94.5525 165.399 97.6261 168.472C100.7 171.546 104.868 173.273 109.215 173.273C118.243 173.273 125.547 165.912 125.547 156.883C125.547 147.855 118.243 140.494 109.215 140.494ZM109.215 174.825C105.667 174.825 102.198 173.773 99.2471 171.801C96.2966 169.83 93.9969 167.028 92.6389 163.749C91.2809 160.471 90.9254 156.863 91.6176 153.383C92.3099 149.903 94.0188 146.706 96.528 144.196C99.0373 141.687 102.234 139.978 105.715 139.286C109.195 138.594 112.803 138.949 116.081 140.307C119.36 141.665 122.162 143.965 124.133 146.915C126.105 149.866 127.157 153.335 127.157 156.883C127.151 161.64 125.259 166.2 121.895 169.563C118.532 172.927 113.972 174.819 109.215 174.825Z" fill="#7099B7"/>
<path d="M164.709 140.494C161.467 140.494 158.299 141.455 155.603 143.256C152.908 145.057 150.808 147.617 149.567 150.612C148.327 153.606 148.002 156.902 148.635 160.081C149.267 163.26 150.828 166.181 153.12 168.473C155.413 170.765 158.333 172.325 161.512 172.958C164.691 173.59 167.987 173.266 170.981 172.025C173.976 170.785 176.536 168.684 178.337 165.989C180.137 163.293 181.099 160.125 181.099 156.883C181.091 152.539 179.362 148.375 176.29 145.303C173.217 142.231 169.053 140.501 164.709 140.494ZM164.709 174.825C161.16 174.825 157.691 173.773 154.741 171.801C151.79 169.83 149.491 167.028 148.133 163.749C146.775 160.471 146.42 156.863 147.112 153.383C147.804 149.902 149.513 146.705 152.022 144.196C154.532 141.687 157.728 139.978 161.209 139.286C164.689 138.594 168.297 138.949 171.575 140.307C174.854 141.665 177.656 143.965 179.627 146.915C181.599 149.866 182.651 153.335 182.651 156.883C182.645 161.64 180.753 166.2 177.389 169.564C174.026 172.927 169.466 174.819 164.709 174.825Z" fill="#7099B7"/>
<path d="M165.112 157.516C164.958 157.51 164.809 157.464 164.678 157.384C164.547 157.303 164.439 157.19 164.364 157.056L147.515 120.654C147.473 120.56 147.451 120.458 147.448 120.355C147.446 120.252 147.464 120.149 147.502 120.053C147.539 119.957 147.595 119.869 147.666 119.795C147.737 119.72 147.823 119.661 147.917 119.619C148.012 119.578 148.113 119.555 148.216 119.553C148.319 119.55 148.422 119.569 148.518 119.606C148.614 119.643 148.702 119.699 148.776 119.77C148.851 119.842 148.911 119.927 148.952 120.021L165.802 156.366C165.975 156.769 165.802 157.286 165.457 157.458C165.348 157.505 165.23 157.525 165.112 157.516Z" fill="#7099B7"/>
<path d="M126.409 121.171H110.537C110.325 121.167 110.123 121.081 109.973 120.931C109.823 120.78 109.737 120.578 109.732 120.366C109.73 120.26 109.749 120.154 109.788 120.055C109.828 119.956 109.887 119.866 109.962 119.791C110.037 119.716 110.127 119.657 110.226 119.617C110.325 119.578 110.431 119.559 110.537 119.561H126.409C126.621 119.566 126.824 119.652 126.974 119.802C127.124 119.952 127.21 120.154 127.214 120.366C127.2 120.575 127.111 120.772 126.963 120.92C126.815 121.068 126.618 121.157 126.409 121.171Z" fill="#7099B7"/>
<path d="M148.032 121.114H140.441V119.561H148.032V121.114Z" fill="#7099B7"/>
<path d="M137.393 156.653C137.255 156.645 137.12 156.605 137 156.535C136.88 156.465 136.778 156.367 136.703 156.251L116.173 121.114C116.09 120.926 116.073 120.716 116.125 120.517C116.177 120.318 116.295 120.143 116.461 120.021C116.648 119.934 116.86 119.915 117.059 119.968C117.259 120.02 117.433 120.141 117.553 120.309L138.083 155.445C138.313 155.79 138.141 156.308 137.795 156.538C137.67 156.603 137.534 156.642 137.393 156.653Z" fill="#7099B7"/>
<path d="M110.192 155.215H137.565L151.08 130.2H123.189L110.192 155.215ZM138.026 156.768H108.869C108.728 156.773 108.588 156.737 108.466 156.666C108.344 156.595 108.245 156.49 108.179 156.365C108.123 156.249 108.093 156.121 108.093 155.992C108.093 155.862 108.123 155.734 108.179 155.618L121.981 129.049C122.154 128.762 122.384 128.589 122.671 128.589H152.402C152.533 128.598 152.66 128.639 152.77 128.709C152.881 128.78 152.972 128.877 153.035 128.992C153.114 129.109 153.161 129.245 153.171 129.387C153.181 129.528 153.154 129.669 153.092 129.797L138.716 156.365C138.646 156.487 138.546 156.589 138.425 156.659C138.303 156.73 138.166 156.768 138.026 156.768Z" fill="#7099B7"/>
<g id="road">
<path id="third" d="M83.9697 175.516H77.5287C77.4267 175.512 77.3264 175.488 77.2336 175.446C77.1407 175.403 77.0571 175.343 76.9876 175.268C76.9182 175.193 76.8644 175.106 76.829 175.01C76.7936 174.914 76.7773 174.812 76.7814 174.71C76.7814 174.308 77.1265 173.905 77.5287 173.905H83.9697C84.1786 173.92 84.3753 174.009 84.5234 174.157C84.6714 174.305 84.7607 174.502 84.7748 174.71C84.7704 174.923 84.6842 175.125 84.5341 175.275C84.3841 175.425 84.1818 175.511 83.9697 175.516Z" fill="#7099B7"/>
<path id="second" d="M70.9725 175.516H64.9914C64.885 175.518 64.7791 175.499 64.6803 175.459C64.5815 175.42 64.4918 175.36 64.4165 175.285C64.3412 175.21 64.2821 175.12 64.2425 175.021C64.2029 174.923 64.1838 174.817 64.1862 174.71C64.1906 174.498 64.2769 174.296 64.427 174.146C64.577 173.996 64.7792 173.91 64.9914 173.905H70.9725C71.1846 173.91 71.3869 173.996 71.5369 174.146C71.687 174.296 71.7732 174.498 71.7776 174.71C71.7801 174.817 71.7609 174.923 71.7214 175.021C71.6818 175.12 71.6226 175.21 71.5474 175.285C71.4721 175.36 71.3821 175.42 71.2833 175.459C71.1845 175.499 71.0789 175.518 70.9725 175.516Z" fill="#7099B7"/>
<path id="first" d="M57.7865 175.516H51.8053C51.6989 175.518 51.593 175.499 51.4942 175.459C51.3954 175.42 51.3057 175.36 51.2305 175.285C51.1552 175.21 51.0961 175.12 51.0565 175.021C51.0169 174.923 50.9977 174.817 51.0002 174.71C51.0046 174.498 51.0909 174.296 51.2409 174.146C51.391 173.996 51.5932 173.91 51.8053 173.905H57.7865C57.9986 173.91 58.2008 173.996 58.3509 174.146C58.5009 174.296 58.5872 174.498 58.5916 174.71C58.5941 174.817 58.5749 174.923 58.5353 175.021C58.4957 175.12 58.4366 175.21 58.3613 175.285C58.2861 175.36 58.1961 175.42 58.0973 175.459C57.9985 175.499 57.8929 175.518 57.7865 175.516Z" fill="#7099B7"/>
</g>
<rect x="167" y="52" width="6" height="34" fill="white"/>
<rect x="174.5" y="52" width="5" height="34" fill="white"/>
<rect x="208" y="52" width="5" height="34" fill="white"/>
</svg>
</div>
I was working on my own answer when Kaiido brought a solution, then I made a mixture from his answer and the SMIL animation approach I was carring on. I worked over opacity applied to #first in order so simulate the vanishing of the road. But it's really time comsuming seting the right values to avoid flashing, so I increased the road speed to minimize it when it appears once every 2 or 2.5 seconds. You can pulish it more. I also reedited your svg to make it smaller joining the bike and road in a single path.
This is the code:
.loader {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 20px;
position: relative;
width: 300px;
}
#small-cloud {
transform: translate(0px, 0px);
animation: cloud 5s linear infinite;
}
#road {
transform: translate(10px, 0px);
animation: road 0.2s linear infinite;
}
#keyframes road {
0% {
transform: translateX(13px);
}
100% {
transform: translateX(0px);
}
}
#keyframes cloud {
0% {
-webkit-transform: translateX(0px);
}
50% {
-webkit-transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0px);
}
}
<html>
<head>
</head>
<body>
<div class="loader">
<svg width="245" height="176" viewBox="0 0 245 176" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="small-cloud">
<path d="M112.222 85.9652C111.448 85.9582 110.679 86.1049 109.962 86.3965C109.244 86.6882 108.591 87.1192 108.041 87.6646C107.49 88.21 107.054 88.8589 106.756 89.574C106.457 90.2891 106.304 91.056 106.304 91.8307C106.304 92.6054 106.457 93.3727 106.756 94.0878C107.054 94.8029 107.49 95.4518 108.041 95.9971C108.591 96.5425 109.244 96.9733 109.962 97.2649C110.679 97.5566 111.448 97.7032 112.222 97.6962C113.315 97.6962 115.73 97.7541 118.203 97.8115C121.136 97.869 124.185 97.9268 125.852 97.9268C131.488 97.9268 136.088 93.3839 136.088 87.7476C136.089 85.1929 135.134 82.7302 133.412 80.8436C131.689 78.9571 129.323 77.783 126.779 77.5524C124.234 77.3218 121.696 78.0513 119.662 79.5974C117.628 81.1435 116.246 83.3944 115.788 85.9077C115.767 86.0272 115.72 86.1404 115.65 86.2397C115.581 86.3391 115.49 86.4222 115.385 86.4829C115.279 86.5395 115.161 86.569 115.04 86.569C114.92 86.569 114.802 86.5395 114.696 86.4829C113.916 86.1413 113.074 85.9649 112.222 85.9652ZM125.851 99.537C124.183 99.537 121.136 99.4795 118.203 99.4224C115.673 99.3646 113.315 99.3071 112.222 99.3071C110.254 99.285 108.374 98.4875 106.99 97.0879C105.606 95.6883 104.83 93.7993 104.83 91.831C104.83 89.8627 105.606 87.9741 106.99 86.5745C108.374 85.1749 110.254 84.3774 112.222 84.3553C112.983 84.3572 113.739 84.4735 114.465 84.7002C115.034 82.5744 116.186 80.6501 117.792 79.1455C119.398 77.6408 121.393 76.6156 123.551 76.186C125.709 75.7563 127.945 75.9395 130.004 76.7144C132.064 77.4893 133.865 78.8252 135.205 80.571C136.545 82.3167 137.369 84.4026 137.585 86.5926C137.801 88.7826 137.399 90.9893 136.426 92.9629C135.452 94.9365 133.946 96.5983 132.077 97.7602C130.208 98.9221 128.052 99.5377 125.851 99.5374L125.851 99.537Z" fill="#7099B7"/>
</g>
<g id="bike">
<path d="m 110.192,155.215 27.373,0 13.515,-25.015 -27.891,0 -12.997,25.015 z m 27.834,1.553 -29.157,0 c -0.141,0.005 -0.281,-0.031 -0.403,-0.102 -0.122,-0.071 -0.221,-0.176 -0.287,-0.301 -0.056,-0.116 -0.086,-0.244 -0.086,-0.373 0,-0.13 0.03,-0.258 0.086,-0.374 l 13.802,-26.569 c 0.173,-0.287 0.403,-0.46 0.69,-0.46 l 29.731,0 c 0.131,0.009 0.258,0.05 0.368,0.12 0.111,0.071 0.202,0.168 0.265,0.283 0.079,0.117 0.126,0.253 0.136,0.395 0.01,0.141 -0.017,0.282 -0.079,0.41 l -14.376,26.568 c -0.07,0.122 -0.17,0.224 -0.291,0.294 -0.122,0.071 -0.259,0.109 -0.399,0.109 z m -0.633,-0.115 c -0.138,-0.008 -0.273,-0.048 -0.393,-0.118 -0.12,-0.07 -0.222,-0.168 -0.297,-0.284 l -20.53,-35.137 c -0.083,-0.188 -0.1,-0.398 -0.048,-0.597 0.052,-0.199 0.17,-0.374 0.336,-0.496 0.187,-0.087 0.399,-0.106 0.598,-0.053 0.2,0.052 0.374,0.173 0.494,0.341 l 20.53,35.136 c 0.23,0.345 0.058,0.863 -0.288,1.093 -0.125,0.065 -0.261,0.104 -0.402,0.115 z m 10.639,-35.539 -7.591,0 0,-1.553 7.591,0 0,1.553 z m -21.623,0.057 -15.872,0 c -0.212,-0.004 -0.414,-0.09 -0.564,-0.24 -0.15,-0.151 -0.236,-0.353 -0.241,-0.565 -0.002,-0.106 0.017,-0.212 0.056,-0.311 0.04,-0.099 0.099,-0.189 0.174,-0.264 0.075,-0.075 0.165,-0.134 0.264,-0.174 0.099,-0.039 0.205,-0.058 0.311,-0.056 l 15.872,0 c 0.212,0.005 0.415,0.091 0.565,0.241 0.15,0.15 0.236,0.352 0.24,0.564 -0.014,0.209 -0.103,0.406 -0.251,0.554 -0.148,0.148 -0.345,0.237 -0.554,0.251 z m 38.703,36.345 c -0.154,-0.006 -0.303,-0.052 -0.434,-0.132 -0.131,-0.081 -0.239,-0.194 -0.314,-0.328 l -16.849,-36.402 c -0.042,-0.094 -0.064,-0.196 -0.067,-0.299 -0.002,-0.103 0.016,-0.206 0.054,-0.302 0.037,-0.096 0.093,-0.184 0.164,-0.258 0.071,-0.075 0.157,-0.134 0.251,-0.176 0.095,-0.041 0.196,-0.064 0.299,-0.066 0.103,-0.003 0.206,0.016 0.302,0.053 0.096,0.037 0.184,0.093 0.258,0.164 0.075,0.072 0.135,0.157 0.176,0.251 l 16.85,36.345 c 0.173,0.403 0,0.92 -0.345,1.092 -0.109,0.047 -0.227,0.067 -0.345,0.058 z m -0.403,-17.022 c -3.242,0 -6.41,0.961 -9.106,2.762 -2.695,1.801 -4.795,4.361 -6.036,7.356 -1.24,2.994 -1.565,6.29 -0.932,9.469 0.632,3.179 2.193,6.1 4.485,8.392 2.293,2.292 5.213,3.852 8.392,4.485 3.179,0.632 6.475,0.308 9.469,-0.933 2.995,-1.24 5.555,-3.341 7.356,-6.036 1.8,-2.696 2.762,-5.864 2.762,-9.106 -0.008,-4.344 -1.737,-8.508 -4.809,-11.58 -3.073,-3.072 -7.237,-4.802 -11.581,-4.809 z m 0,34.331 c -3.549,0 -7.018,-1.052 -9.968,-3.024 -2.951,-1.971 -5.25,-4.773 -6.608,-8.052 -1.358,-3.278 -1.713,-6.886 -1.021,-10.366 0.692,-3.481 2.401,-6.678 4.91,-9.187 2.51,-2.509 5.706,-4.218 9.187,-4.91 3.48,-0.692 7.088,-0.337 10.366,1.021 3.279,1.358 6.081,3.658 8.052,6.608 1.972,2.951 3.024,6.42 3.024,9.968 -0.006,4.757 -1.898,9.317 -5.262,12.681 -3.363,3.363 -7.923,5.255 -12.68,5.261 z m -55.494,-34.331 c -4.347,0 -8.515,1.727 -11.5889,4.8 -3.0736,3.074 -4.8006,7.243 -4.8006,11.589 0,4.347 1.727,8.516 4.8006,11.589 3.0739,3.074 7.2419,4.801 11.5889,4.801 9.028,0 16.332,-7.361 16.332,-16.39 0,-9.028 -7.304,-16.389 -16.332,-16.389 z m 0,34.331 c -3.548,0 -7.017,-1.052 -9.9679,-3.024 -2.9505,-1.971 -5.2502,-4.773 -6.6082,-8.052 -1.358,-3.278 -1.7135,-6.886 -1.0213,-10.366 0.6923,-3.48 2.4012,-6.677 4.9104,-9.187 2.5093,-2.509 5.706,-4.218 9.187,-4.91 3.48,-0.692 7.088,-0.337 10.366,1.021 3.279,1.358 6.081,3.658 8.052,6.608 1.972,2.951 3.024,6.42 3.024,9.968 -0.006,4.757 -1.898,9.317 -5.262,12.68 -3.363,3.364 -7.923,5.256 -12.68,5.262 z m 92.241,0.691 -111.1612,0 c -0.102,-0.004 -0.2023,-0.028 -0.2951,-0.07 -0.0928,-0.043 -0.1765,-0.103 -0.2459,-0.178 -0.0695,-0.075 -0.1233,-0.162 -0.1587,-0.258 -0.0354,-0.096 -0.0517,-0.198 -0.0476,-0.3 0,-0.402 0.3448,-0.805 0.7473,-0.805 l 111.1612,0 c 0.208,0.015 0.405,0.104 0.553,0.252 0.148,0.148 0.237,0.345 0.252,0.553 -0.005,0.213 -0.091,0.415 -0.241,0.565 -0.15,0.15 -0.352,0.236 -0.564,0.241 z" fill="#7099B7"/>
</g>
<g id="road">
<path id="third" d="M83.9697 175.516H77.5287C77.4267 175.512 77.3264 175.488 77.2336 175.446C77.1407 175.403 77.0571 175.343 76.9876 175.268C76.9182 175.193 76.8644 175.106 76.829 175.01C76.7936 174.914 76.7773 174.812 76.7814 174.71C76.7814 174.308 77.1265 173.905 77.5287 173.905H83.9697C84.1786 173.92 84.3753 174.009 84.5234 174.157C84.6714 174.305 84.7607 174.502 84.7748 174.71C84.7704 174.923 84.6842 175.125 84.5341 175.275C84.3841 175.425 84.1818 175.511 83.9697 175.516Z" fill="#7099B7"/>
<path id="second" d="M70.9725 175.516H64.9914C64.885 175.518 64.7791 175.499 64.6803 175.459C64.5815 175.42 64.4918 175.36 64.4165 175.285C64.3412 175.21 64.2821 175.12 64.2425 175.021C64.2029 174.923 64.1838 174.817 64.1862 174.71C64.1906 174.498 64.2769 174.296 64.427 174.146C64.577 173.996 64.7792 173.91 64.9914 173.905H70.9725C71.1846 173.91 71.3869 173.996 71.5369 174.146C71.687 174.296 71.7732 174.498 71.7776 174.71C71.7801 174.817 71.7609 174.923 71.7214 175.021C71.6818 175.12 71.6226 175.21 71.5474 175.285C71.4721 175.36 71.3821 175.42 71.2833 175.459C71.1845 175.499 71.0789 175.518 70.9725 175.516Z" fill="#7099B7"/>
<g>
<path id="first" d="M57.7865 175.516H51.8053C51.6989 175.518 51.593 175.499 51.4942 175.459C51.3954 175.42 51.3057 175.36 51.2305 175.285C51.1552 175.21 51.0961 175.12 51.0565 175.021C51.0169 174.923 50.9977 174.817 51.0002 174.71C51.0046 174.498 51.0909 174.296 51.2409 174.146C51.391 173.996 51.5932 173.91 51.8053 173.905H57.7865C57.9986 173.91 58.2008 173.996 58.3509 174.146C58.5009 174.296 58.5872 174.498 58.5916 174.71C58.5941 174.817 58.5749 174.923 58.5353 175.021C58.4957 175.12 58.4366 175.21 58.3613 175.285C58.2861 175.36 58.1961 175.42 58.0973 175.459C57.9985 175.499 57.8929 175.518 57.7865 175.516Z" fill="#7099B7"/>
<animate attributeName="opacity" begin="0.2s" dur="0.3s" from="1" to="0" values="1;0" calcMode="linear" repeatCount="indefinite" />
</g>
</g>
</svg>
</div>
</html>
I'm thinking that if you apply a similar animation and approach to the cloud it will simply appear in the front and disappear in the back resembling a real traveling.
I've created a pie chart using react and svg circles. Now I want to position the text labels so that the text starts close to the middle of the circle and continue outwards, wheel of fortune style.
This is my code, rendering the svgs. In chrome dev tools I tried to apply tranform: rotate(45deg); and adjusting the number but the text keeps flyying away outside the circle.
<svg viewBox="0 0 32 32">
{elements.map((element, index) => (
<g>
<circle
key={_id}
r={16 / 1.0053}
cx={'50%'}
cy={'50%'}
style={{
strokeDasharray: `${percentage}, 100.53`,
strokeDashoffset: -offset,
stroke: segmentColor,
}}
textAnchor="middle"
></circle>
<text
textAnchor="middle"
x={'50%'}
y={'50%'}
fontFamily={'sans-serif'}
fontSize={'20px'}
fill="black"
textAnchor="start"
>
{title}
</text>
</g>
))}
</svg>
```
The issue is that rotation is about the origin, which is the top left of your image. The easiest way around this is to change the viewBox so the origin is in the center of your SVG: viewBox="-16 -16 32 32".
Then you calculate the angle based on the offset and the percentage.
I assume you have some elements like this:
const elements = [
{ percentage: 15, offset: 0, title: 'title', segmentColor: 'red' },
{ percentage: 40, offset: 15, title: 'another title', segmentColor: 'blue' },
{ percentage: 25, offset: 55, title: 'and another', segmentColor: 'green' },
{ percentage: 20, offset: 80, title: 'yet another', segmentColor: 'black' },
];
So something like this would work:
<svg viewBox="-16 -16 32 32">
{elements.map((element, index) => {
const angle = (element.offset + element.percentage / 2) * 360 / 100;
return <g key={index}>
<circle
r={15.5}
style={{
fill: 'none',
strokeDasharray: `${element.percentage}, 100.53`,
strokeDashoffset: -element.offset,
stroke: element.segmentColor,
}}
textAnchor="middle"
></circle>
<text
x="10%"
transform={`rotate(${angle})`}
fontFamily={'sans-serif'}
fontSize={'2px'}
fill="black"
textAnchor="start"
alignmentBaseline="middle"
>
{element.title}
</text>
</g>
})}
</svg>
Now the x value on the text determined how from the center the text starts.
We have a Singe Page Application using AngularJS 1.5 and it works smoothly using Chrome but unfortunately we also support IE 11+ and probably Edge and using these browsers, the performance is close to horrible (more than two seconds delay). It seems that it has something to do with the way we are using css sprites because if I remove the background-image property everything works smoothly again. My experience on css is not very high thus I hope that somebody with a deeper insight has a hint about performance optimizations. The sprite svg file (325KB 2350px x 2340px) looks like this
<?xml version="1.0" encoding="utf-8"?>
<!-- SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2350 2340" enable-background="new 0 0 2350 2340" xml:space="preserve">
<symbol id="ic_x5F_website_x5F_blk" viewBox="0 -50 50 50">
...
<use xlink:href="#ic_x5F_website_x5F_blk" width="50" height="50" id="XMLID_496_" x="0" y="-50" transform="matrix(1 0 0 -1 284.9999 155)" overflow="visible"/>
...
</svg>
And the relevant css/ less styles are
.ico() {
&:extend(.ic-mixin);
}
.ic {
.ic-mixin;
}
.ic-mixin {
background-image: url('../icons/spritesheet.svg');
background-size: #spritesheet-width #spritesheet-height;
display: inline-block;
width: 50px;
height: 50px;
}
.icon(#column, #row, #color: blk, #offset: 0px, #offsetY: #offset) {
.createIcon(#column, #row, #color, #offset, #offsetY);
}
.createIcon(#column, #row, #color, #offsetX: 0, #offsetY: #offsetX) {
#positionX: #initIconGapX + #iconColumnWidth * (#column - 1);
#positionY: #initIconGapY + #iconOuterSize * (#row - 1);
& when (#color = wht) {
background-position: -(#positionX + #iconOuterSize + #offsetX) -(#positionY + #offsetY);
}
& when (#color = blu) {
background-position: -(#positionX + #iconOuterSize * 2 + #offsetX) -(#positionY + #offsetY);
}
}
.icon-virtual {
&:after {
.ico();
.icon(4, 23, wht, 15px);
content: ' ';
width: 20px;
height: 20px;
background-color: #green;
position: absolute;
top: 2px;
right: 2px;
}
}
Why is Chrome so much faster? Is this a cache problem? Is IE trying to fetch the huge file over and over again? Could there be a problem with the svg file itself? Or is the css to complicated? Are we missing some important properties? Is IE too slow finding the correct background position?
Thanks a lot for any hint!
UPDATE
Exchanging the big file with a different much smaller svg does not help in improving the performance.
I would like to animate the gears on the following SVG when the user hovers over it. That is, when the mouse enters, both gears begin rotating where they left off. When the mouse leaves, the gears stop in whatever position they're in. If possible I would like the animation to begin and end using an ease-in/out function. How can this be done using SVG animations?
Codepen
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256" viewBox="0 0 256 256">
<path d="M249.363 80.921l-6.402-15.451c-1.769-4.267-6.659-6.292-10.927-4.528l-9.032 3.7 c-8.043-12.801-18.893-23.646-31.692-31.689l3.744-9.032c1.768-4.266-0.258-9.162-4.528-10.926l-15.45-6.402 c-4.264-1.764-9.16 0.261-10.923 4.523l-3.744 9.032c-14.458-3.293-29.542-3.478-44.817 0l-3.74-9.028 c-1.768-4.267-6.659-6.292-10.926-4.528l-15.451 6.402c-4.267 1.768-6.296 6.656-4.528 10.926l3.744 9 C71.893 41 61 51.9 53 64.687l-9.032-3.744c-4.263-1.764-9.158 0.261-10.927 4.528l-6.398 15.5 c-1.768 4.3 0.3 9.2 4.5 10.926l9.028 3.74c-3.349 14.666-3.435 29.8 0 44.816l-9.028 3.7 c-4.271 1.768-6.296 6.664-4.528 10.926l6.398 15.451c1.772 4.3 6.7 6.3 10.9 4.524l9.032-3.741 c8.044 12.8 18.9 23.6 31.7 31.693l-3.74 9.032c-1.768 4.3 0.3 9.2 4.5 10.927l15.451 6.4 c4.267 1.8 9.158-0.257 10.926-4.528l3.74-9.028c14.613 3.3 29.7 3.4 44.8 0l3.739 9 c1.768 4.3 6.7 6.3 10.9 4.528l15.45-6.402c4.267-1.768 6.292-6.663 4.524-10.927l-3.744-9.032 c12.8-8.048 23.649-18.896 31.692-31.693l9.032 3.741c4.268 1.8 9.158-0.254 10.927-4.524l6.398-15.451 c1.768-4.262-0.257-9.162-4.524-10.922l-9.032-3.739c3.328-14.583 3.458-29.682 0-44.825l9.032-3.74 C249.103 90.1 251.1 85.2 249.4 80.921z M138 176.536c-32.278 0-58.537-26.259-58.537-58.536 c0-32.281 26.259-58.536 58.537-58.536c32.276 0 58.5 26.3 58.5 58.536C196.535 150.3 170.3 176.5 138 176.536z">
<animateTransform
attributeName="transform"
repeatCount="indefinite"
type="rotate"
from="00 138 118"
to="+360 138 118"
begin="0s" dur="30s"/>
</path>
<path d="M57.552 217.745l-2.16 0.895c0.811 3.6 0.8 7.2 0 10.721l2.16 0.895c1.021 0.4 1.5 1.6 1.1 2.612l-1.53 3.7 c-0.423 1.021-1.593 1.506-2.613 1.082l-2.16-0.895c-1.924 3.061-4.519 5.655-7.58 7.58l0.895 2.2 c0.423 1.02-0.062 2.19-1.082 2.613l-3.695 1.531c-1.021 0.422-2.191-0.063-2.614-1.083l-0.895-2.16 c-3.508 0.801-7.12 0.821-10.719 0l-0.895 2.159c-0.423 1.021-1.593 1.506-2.613 1.083l-3.695-1.53 c-1.021-0.423-1.505-1.594-1.082-2.613l0.895-2.16c-3.062-1.924-5.656-4.519-7.581-7.58l-2.16 0.9 c-1.021 0.424-2.189-0.061-2.613-1.082l-1.53-3.695c-0.423-1.02 0.062-2.19 1.083-2.613l2.159-0.895 c-0.801-3.507-0.821-7.121 0-10.719l-2.159-0.895c-1.021-0.424-1.506-1.594-1.083-2.613l1.53-3.696 c0.423-1.021 1.594-1.505 2.613-1.083l2.161 0.896c1.924-3.062 4.519-5.655 7.58-7.579l-0.896-2.16 c-0.423-1.021 0.063-2.19 1.083-2.613l3.695-1.531c1.021-0.422 2.2 0.1 2.6 1.083l0.895 2.159c3.427-0.78 7.035-0.839 10.7 0 l0.895-2.16c0.422-1.02 1.593-1.504 2.612-1.082l3.695 1.531c1.021 0.4 1.5 1.6 1.1 2.613l-0.895 2.2 c3.061 1.9 5.7 4.5 7.6 7.579l2.161-0.896c1.021-0.422 2.2 0.1 2.6 1.083l1.531 3.7 C59.057 216.2 58.6 217.3 57.6 217.745z M46 224c0-7.721-6.28-14-14-14s-14 6.279-14 14c0 7.7 6.3 14 14 14 S46 231.7 46 224z">
<animateTransform
attributeName="transform"
repeatCount="indefinite"
type="rotate"
from="00 32 224"
to="-360 32 224"
begin="0s" dur="20s"/>
</path>
</svg>
Assuming the cogs have id big and little, here's a way to do this using css animations:
#big {
transform-origin: 138px 118px;
animation-duration: 30s;
animation-name: rotateBig;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: paused;
}
#little {
transform-origin: 32px 224px;
animation-duration: 20s;
animation-name: rotateLittle;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: paused;
}
#big:hover, #little:hover {
animation-play-state: running;
}
#keyframes rotateBig {
to {
transform: rotate(360deg);
}
}
#keyframes rotateLittle {
to {
transform: rotate(-360deg);
}
}
See live example. This animates each of the gears individually when hovered.
For something that animates both gears when the whole svg is hovered:
#big {
transform-origin: 138px 118px;
animation-duration: 30s;
animation-name: rotateBig;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#little {
transform-origin: 32px 224px;
animation-duration: 20s;
animation-name: rotateLittle;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
svg > * {
animation-play-state: paused;
}
svg:hover > * {
animation-play-state: running;
}
#keyframes rotateBig {
to {
transform: rotate(360deg);
}
}
#keyframes rotateLittle {
to {
transform: rotate(-360deg);
}
}
See live example. The only difference is what selectors set animation-play-state.
You may have to resort to using css vendor prefixes to get this to be more compatible, but I've provided it in the cleanest form I could. The fiddle works fine in Opera 25, Chrome 38 and Firefox Nightly 34 at least.
A slight downside with the solution here is that the begin and end isn't using ease-in-out, this is because that makes the repetitions visible. If anyone has a clever idea for how to fix that without using script I'm all ears.
You are almost there. Add this tweaks:
Add id="gear1" to first <path...>
Add id="gear2" to second <path...>
End both <path... with this onmouseover=runGears(); onmouseout=stopGears(); >
remove <animate .....> from both <path....>
On the JS magic to rotate the gears, use this code:
var animateGears ; // event handler
var angle = 0; // rotation of angle
var gear1 = document.getElementById("gear1");
var gear2 = document.getElementById("gear2");
function runGears() {
animateGears = setInterval( function () {
angle += 5;
if (angle == 360 ) { angle = 0 } ; // 360 == 0 degrees
gear1.setAttribute("transform", "rotate(" + angle + " 138 118)");
gear2.setAttribute("transform", "rotate(" + angle + " 32 224)");
}, 100);
}
function stopGears() {
clearInterval(animateGears);
}
Note: play around with the Timeout of 100ms and Angle of +5 to make it look smoother.
Update: The other JS coding that may work for you (without removing the <animate....):-
var svgDoc = document.getElementsByTagName('svg');
svgdoc[0].pauseAnimations(); // pause animation at load time
function runGears() {
svgDoc[0].unpauseAnimations(); // resumes ALL animations
}
function stopGears() {
svgDoc[0].pauseAnimations(); // pause ALL animations
}