I'm trying to get the orange marker to follow the course of this RC car race track using an SVG element and the AnimeJS library.
But no matter what I try, I get really strange and undesirable results.
Sometimes I can see the marker following the path but the path it's on is offset from the course and not in the same scale, and some things I try I cannot see the marker at all but I can see the scrollbars on my page altering, which indicates that the marker is there and is moving.
I can also look at the browser's inspect tool and can see that the element's styles are changing rapidly - translateX, translateY and rotate.
The code, as I've left it here, shows the marker is moving. If you look carefully in the JSFiddle demo, and wait 9.49seconds for each lap to complete, you can see a flash of an orange ball for a nano-second but the ball isn't to scale and I have no idea what path it's following.
What am I doing wrong? How can this be achieved? I'm open to using other libraries or tools if it helps.
JSFiddle
HTML
<section id="race-event-overview">
[...]
<div class="race-track-map">
<svg class="race-track" viewBox="0 0 560 350" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"
stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
<path class="track"
d="M648.018 1019s-26.755-194 194-194H2618.98c220.76 0 194 194 194 194v527h-.24s10.84 139-112.49 139-112.49-139-112.49-139h-.24v-286s11.83-148-109.52-148H1413s-81-1.45-81 111c0 0-11.07 108 127 108h807s102-6.22 102 107-116 108-116 108h-247s-204.73 67.41-226.18 61.85c-86.34-22.36-182.03-60.17-220.82-61.85h-347s-103 6.77-103-100v-115s5.06-108-118-108c-123.058 0-113 108-113 108v134s10.542 109-121 109-109-118-109-118v-437"
fill="none" stroke="#2f3b42" stroke-width="88.44"
transform="matrix(-.20047 .08679 -.08673 -.2006 718.369 267.998)" />
<circle class="ball" cx="2903.86" cy="664.618" r="31.382" fill="#ff5000" transform="matrix(-.16499 .12905 -.12897 -.1651 775.915 26.115)" />
<path
d="M305.953 299.197c.673-.28 1.187-.623 1.536-1.032.352-.41.582-.857.695-1.336a3.82 3.82 0 0 0 .046-1.488 6.622 6.622 0 0 0-.42-1.486 4.669 4.669 0 0 0-.805-1.32 3.496 3.496 0 0 0-1.122-.86c-.42-.201-.889-.305-1.4-.304-.512-.002-1.053.115-1.624.351l-.942.391 3.093 7.474.943-.39zm-1.479 1.48l-3.725-9 1.913-.793c.749-.31 1.438-.456 2.072-.434.638.02 1.21.161 1.723.42.514.263.96.624 1.337 1.08.382.454.687.967.92 1.53.226.546.383 1.127.471 1.743a4.598 4.598 0 0 1-.09 1.788 4.008 4.008 0 0 1-.862 1.619c-.43.503-1.043.92-1.846 1.253l-1.913.793zM309.778 287.935l2.975-1.233c.308-.128.64-.165.996-.115.357.053.698.16 1.018.318.321.161.61.36.867.598.257.235.435.479.537.725.072.174.112.385.121.632.012.246-.01.507-.065.78a3.992 3.992 0 0 1-.265.83c-.12.277-.28.534-.478.777.37.376.709.71 1.016 1.008.309.294.6.571.878.828.28.256.553.497.825.726.27.225.552.46.845.7-.09.074-.18.145-.274.21-.078.054-.171.112-.268.176-.1.065-.199.119-.301.161a36.469 36.469 0 0 1-1.164-1.024c-.34-.307-.72-.655-1.134-1.052-.414-.395-.82-.809-1.22-1.235l-2 .828 1.66 4.011a2.996 2.996 0 0 1-.189.1c-.059.027-.118.055-.18.08a7.99 7.99 0 0 1-.26.101 2.008 2.008 0 0 1-.215.07l-3.725-9zm4.609 3.054c.191-.08.355-.218.498-.414.141-.2.252-.416.33-.646.081-.234.127-.471.137-.713a1.404 1.404 0 0 0-.086-.613 1.44 1.44 0 0 0-.382-.518 2.506 2.506 0 0 0-.6-.408 2.173 2.173 0 0 0-.686-.21 1.212 1.212 0 0 0-.64.07l-2.01.833 1.429 3.452 2.01-.833zM322.842 293.064a1.348 1.348 0 0 1-.204.112l-.192.08c-.085.035-.175.068-.262.101a1.95 1.95 0 0 1-.221.072l-3.725-9c.06-.035.128-.07.213-.108a3.347 3.347 0 0 1 .45-.187c.076-.028.15-.052.216-.07l3.725 9zM327.345 280.57a3.548 3.548 0 0 1 .872-.18c.36 1.541.617 2.928.762 4.153.153 1.225.25 2.276.293 3.149.052 1.022.05 1.924-.005 2.71-.051.03-.106.06-.156.091-.054.033-.113.06-.176.086l-.202.084c-.149.062-.27.109-.356.134-.087.026-.16.05-.23.069a23.798 23.798 0 0 1-1.949-1.954 41.468 41.468 0 0 1-2.028-2.436 41.908 41.908 0 0 1-2.361-3.417c.08-.06.16-.123.245-.185.082-.05.164-.104.254-.162.088-.053.184-.113.289-.173a34.127 34.127 0 0 0 1.992 2.946 51.55 51.55 0 0 0 1.89 2.36c.67.784 1.32 1.501 1.95 2.15l.05-.02a51.588 51.588 0 0 0-.483-5.928 37.681 37.681 0 0 0-.65-3.476zM330.873 279.193l4.508-1.869c.031.051.063.112.095.182.033.07.06.129.08.178.043.102.076.19.101.26.025.066.041.123.05.166l-3.667 1.52 1.315 3.177 3.178-1.317c.047.064.08.127.104.187l.077.186c.03.071.057.137.075.197.022.06.04.12.055.181l-3.178 1.317 1.468 3.546 3.666-1.52a1.1 1.1 0 0 1 .102.182l.068.166c.03.071.057.144.081.21.026.07.044.13.055.182l-4.508 1.869-3.725-9zM338.282 276.122l2.975-1.233c.309-.127.644-.166 1-.116.356.053.694.16 1.014.32.324.16.61.359.87.596.254.236.432.48.534.726.072.174.116.384.124.631.01.248-.014.508-.068.782a3.97 3.97 0 0 1-.262.828 3.389 3.389 0 0 1-.48.778c.369.376.708.71 1.015 1.009.309.293.604.57.88.826.278.257.551.498.823.727.271.226.552.46.849.7-.09.074-.181.145-.277.211-.079.053-.169.11-.27.175a1.837 1.837 0 0 1-.3.162 36.469 36.469 0 0 1-1.163-1.024 51.803 51.803 0 0 1-1.132-1.054 31.187 31.187 0 0 1-1.223-1.234l-2 .829 1.661 4.01a3.974 3.974 0 0 1-.63.281 2.008 2.008 0 0 1-.215.07l-3.725-9zm4.609 3.054c.191-.08.358-.218.498-.414.141-.199.252-.416.334-.647.078-.233.123-.47.137-.713a1.45 1.45 0 0 0-.087-.613 1.484 1.484 0 0 0-.382-.518 2.702 2.702 0 0 0-.6-.407 2.241 2.241 0 0 0-.689-.21 1.204 1.204 0 0 0-.64.07l-2.01.834 1.429 3.451 2.01-.833zM349.138 271.567c.37-.154.726-.251 1.057-.291.331-.04.621-.05.87-.033.296.015.567.063.809.137-.002.215-.125.514-.367.892a2.6 2.6 0 0 0-.626-.13 3.599 3.599 0 0 0-.659-.007 2.48 2.48 0 0 0-.769.194c-.66.274-1.07.598-1.237.972-.165.376-.133.842.097 1.396.145.351.32.603.519.762.2.158.421.257.662.291.242.034.499.024.771-.028.27-.052.551-.108.841-.175.306-.07.62-.126.948-.168.327-.042.644-.02.954.066.308.083.603.253.878.507.276.254.518.629.725 1.129.185.445.273.854.27 1.226a2.098 2.098 0 0 1-.265 1.024c-.173.31-.426.588-.755.835a5.327 5.327 0 0 1-1.186.659c-.428.177-.818.285-1.17.317-.353.036-.655.041-.907.015a3.244 3.244 0 0 1-.818-.19c.025-.094.062-.2.109-.313.036-.089.083-.185.137-.29.053-.107.117-.203.193-.292.194.087.404.15.632.184.2.03.427.037.677.02.254-.018.533-.087.833-.211.722-.3 1.186-.666 1.39-1.102.208-.434.191-.936-.045-1.507-.154-.372-.338-.647-.552-.816a1.473 1.473 0 0 0-.703-.318 2.362 2.362 0 0 0-.807.023c-.286.052-.576.112-.873.178a7.665 7.665 0 0 1-.923.162c-.31.034-.616.014-.912-.061a1.998 1.998 0 0 1-.829-.46c-.258-.227-.482-.573-.672-1.033-.177-.429-.263-.822-.261-1.18a2.18 2.18 0 0 1 .24-.987c.159-.297.383-.564.675-.795a4.402 4.402 0 0 1 1.049-.602zM211.104 51.174l3.093-1.281c.28-.116.577-.15.898-.101.323.046.64.163.946.347.31.183.596.43.864.737.265.308.484.67.655 1.08a3.7 3.7 0 0 1 .18 2.289 2.608 2.608 0 0 1-.421.92c-.19.267-.423.457-.703.573l-2.247.932 1.305 3.154a2.34 2.34 0 0 1-.184.096c-.061.03-.12.057-.174.08a7.99 7.99 0 0 1-.26.1c-.084.032-.16.057-.227.074l-3.725-9zm4.969 3.923a1.17 1.17 0 0 0 .511-.413c.136-.19.23-.414.282-.67.053-.252.062-.527.03-.818a3.147 3.147 0 0 0-.227-.87 3.344 3.344 0 0 0-.472-.816 2.413 2.413 0 0 0-.597-.555 1.756 1.756 0 0 0-.664-.254 1.19 1.19 0 0 0-.651.076l-2.01.833 1.788 4.32 2.01-.833zM223.692 56.501a1.348 1.348 0 0 1-.205.112l-.191.08c-.086.035-.175.068-.262.101a1.95 1.95 0 0 1-.221.072l-3.725-9c.059-.035.13-.071.212-.108a3.347 3.347 0 0 1 .452-.187c.078-.03.149-.052.215-.07l3.725 9zM225.098 46.296l-2.499 1.035a.653.653 0 0 1-.056-.104c-.022-.037-.045-.075-.062-.118l-.057-.137c-.017-.04-.04-.107-.076-.2a5.995 5.995 0 0 1-.074-.227l5.88-2.436c.047.074.086.145.115.216l.08.192c.032.077.058.15.083.216.023.064.038.118.046.162l-2.498 1.035 3.4 8.214a1.435 1.435 0 0 1-.225.12l-.205.085c-.089.037-.17.067-.248.096a1.96 1.96 0 0 1-.205.065l-3.4-8.214zM232.702 42.167c.37-.154.725-.25 1.057-.29.33-.04.621-.05.87-.033.296.014.567.063.808.137 0 .214-.125.513-.366.891a2.6 2.6 0 0 0-.626-.129 3.599 3.599 0 0 0-.659-.008 2.48 2.48 0 0 0-.769.195c-.66.273-1.07.598-1.237.971-.165.377-.133.842.096 1.396.146.352.32.604.52.762.2.159.42.258.662.292.242.033.499.024.771-.029.27-.051.551-.108.841-.174.306-.07.62-.127.947-.169.328-.041.645-.019.955.067.308.083.602.252.878.506s.518.63.725 1.13c.184.445.273.853.27 1.226a2.098 2.098 0 0 1-.265 1.024c-.173.309-.426.588-.755.835a5.327 5.327 0 0 1-1.186.658c-.428.178-.818.286-1.17.318-.353.036-.655.04-.907.014a3.244 3.244 0 0 1-.818-.19c.025-.094.061-.2.108-.312.037-.09.084-.186.137-.291.054-.106.117-.203.194-.292.194.088.404.151.632.184.2.03.426.037.677.02.253-.017.533-.086.833-.21.722-.3 1.186-.666 1.39-1.102.208-.435.191-.936-.045-1.508-.154-.371-.338-.646-.552-.816a1.473 1.473 0 0 0-.703-.317 2.362 2.362 0 0 0-.807.023c-.286.052-.576.111-.873.178a7.665 7.665 0 0 1-.923.161c-.31.035-.617.015-.912-.06a1.998 1.998 0 0 1-.83-.46c-.257-.228-.48-.574-.671-1.034-.177-.428-.263-.821-.261-1.18a2.18 2.18 0 0 1 .24-.987c.159-.296.383-.563.675-.795a4.402 4.402 0 0 1 1.049-.602zM500.743 4.226c.158.359.263.68.322.966.057.289.092.534.11.74a3.55 3.55 0 0 1-.038.643 2.036 2.036 0 0 1-.818-.308c.017-.128.023-.274.017-.439a6.131 6.131 0 0 0-.097-.53 3.995 3.995 0 0 0-.254-.737c-.182-.411-.4-.74-.658-.984a1.873 1.873 0 0 0-.948-.481c-.377-.075-.823-.055-1.337.054-.513.11-1.11.317-1.793.618-1.324.585-2.197 1.204-2.62 1.866-.422.661-.454 1.398-.094 2.216.124.28.25.512.378.69.132.179.251.32.362.419.123.112.245.2.364.257-.01.165-.034.303-.068.415a1.397 1.397 0 0 1-.257.495 3.279 3.279 0 0 1-.538-.432 4.925 4.925 0 0 1-1-1.509c-.514-1.168-.51-2.176.015-3.03.523-.854 1.545-1.616 3.061-2.286.77-.34 1.458-.57 2.069-.692.612-.12 1.155-.125 1.637-.017.48.11.9.335 1.259.679.361.342.67.805.926 1.387zM496.267 18.149a9.376 9.376 0 0 1-.123-.294 2.981 2.981 0 0 1-.087-.243c.414-.266.829-.546 1.25-.85l1.232-.884-1.441-3.268c-.483.103-.979.208-1.481.32-.505.112-.992.23-1.468.356a1.45 1.45 0 0 1-.088-.172 1.154 1.154 0 0 1-.083-.157l-.073-.165c-.02-.045-.04-.097-.061-.154a1.746 1.746 0 0 1-.055-.17 49.542 49.542 0 0 1 4.244-.913 44.45 44.45 0 0 1 3.101-.406c.984-.09 1.832-.13 2.55-.122.065.102.118.199.16.291l.118.27c.034.077.063.152.086.218.027.069.049.126.07.174.018.055.033.105.05.145A31.595 31.595 0 0 1 502.225 14a48.029 48.029 0 0 1-2.413 2.012 54.36 54.36 0 0 1-3.384 2.44 2.325 2.325 0 0 1-.09-.16c-.026-.05-.05-.096-.07-.143zm6.964-6.323c-.52.026-1.068.064-1.65.116a35.515 35.515 0 0 0-3.694.53l1.28 2.905a25.604 25.604 0 0 0 1.588-1.237c.494-.419.927-.794 1.299-1.125.43-.395.83-.771 1.203-1.13l-.026-.06zM506.12 18.636l-1.08-2.45a.452.452 0 0 1 .101-.058.619.619 0 0 1 .114-.067l.135-.06c.039-.017.104-.043.196-.076.091-.037.166-.064.223-.079l2.541 5.763c-.07.052-.141.09-.211.12l-.187.083a2.721 2.721 0 0 1-.371.137l-1.08-2.45-8.046 3.552a1.417 1.417 0 0 1-.123-.217l-.09-.205a6.737 6.737 0 0 1-.1-.24 1.812 1.812 0 0 1-.068-.201l8.046-3.552zM509.385 23.956l1.95 4.421a1.76 1.76 0 0 1-.178.099c-.067.036-.126.062-.174.083a3.61 3.61 0 0 1-.254.106 1.084 1.084 0 0 1-.164.052l-1.585-3.595-3.112 1.373 1.374 3.117a.895.895 0 0 1-.183.108l-.182.08c-.07.031-.135.06-.193.078-.06.024-.119.043-.178.06l-1.374-3.118-3.473 1.534 1.585 3.595a1.088 1.088 0 0 1-.178.105l-.162.072c-.07.03-.14.062-.207.084a1.423 1.423 0 0 1-.178.059l-1.95-4.422 8.816-3.891zM512.589 31.223l1.286 2.917c.134.303.18.634.138.987a3.371 3.371 0 0 1-.293 1.012c-.151.325-.34.615-.57.874-.228.258-.465.44-.706.546-.17.075-.377.123-.622.137a3.366 3.366 0 0 1-.774-.05 3.922 3.922 0 0 1-.825-.24 3.35 3.35 0 0 1-.78-.459c-.364.374-.687.718-.974 1.029-.284.312-.55.61-.798.89s-.48.557-.7.831c-.217.274-.443.557-.672.856a4.114 4.114 0 0 1-.216-.27c-.054-.076-.113-.164-.18-.262a1.82 1.82 0 0 1-.166-.294c.313-.39.642-.782.987-1.175.296-.345.633-.724 1.016-1.144.38-.42.78-.833 1.192-1.24l-.864-1.96-3.929 1.735a3.053 3.053 0 0 1-.187-.363c-.038-.086-.07-.169-.105-.254a1.99 1.99 0 0 1-.074-.212l8.816-3.891zm-2.916 4.632c.083.188.224.35.42.483.2.136.418.241.648.317.232.071.467.111.708.119.24.004.442-.028.605-.1.179-.079.345-.21.503-.39.157-.182.286-.383.39-.603.102-.222.165-.45.191-.687a1.193 1.193 0 0 0-.084-.631l-.87-1.972-3.38 1.493.87 1.97zM507.812 44.274a1.277 1.277 0 0 1-.115-.2l-.081-.185c-.039-.087-.073-.172-.108-.26a1.991 1.991 0 0 1-.076-.218l8.815-3.891c.036.058.073.128.112.208a3.395 3.395 0 0 1 .195.442c.03.077.055.147.073.212l-8.815 3.892zM516.065 47c.43-.494.77-.885 1.023-1.168.25-.28.443-.49.568-.622.154-.158.25-.25.294-.28l-.026-.059-8.239 3.65a2.39 2.39 0 0 1-.112-.207c-.039-.08-.07-.144-.09-.191a6.737 6.737 0 0 1-.1-.24 1.477 1.477 0 0 1-.063-.19l8.815-3.892c.075.125.137.244.187.356l.156.356c.1.227.17.393.212.502.043.105.074.191.093.257l-4.74 5.451-1.002 1.141c-.243.275-.428.477-.555.607a2.888 2.888 0 0 1-.27.273l.025.059 8.25-3.659c.036.061.073.129.109.203a3.002 3.002 0 0 1 .185.42c.032.08.056.15.07.206l-8.814 3.892a5.06 5.06 0 0 1-.188-.35c-.053-.106-.104-.22-.16-.347a8.382 8.382 0 0 1-.212-.511c-.04-.116-.076-.211-.098-.285L516.065 47zM516.108 62.871c-.15-.258-.3-.53-.456-.815-.124-.243-.264-.516-.418-.826a19.72 19.72 0 0 1-.45-.953c-.28-.635-.437-1.211-.466-1.724-.03-.509.073-.979.313-1.406.24-.427.62-.822 1.14-1.192.519-.37 1.187-.735 2.004-1.096 2.952-1.303 4.943-.79 5.968 1.534.21.476.351.895.43 1.262.077.364.123.675.132.929.02.298.003.553-.055.763a2.845 2.845 0 0 1-.42-.072 1.443 1.443 0 0 1-.277-.092.78.78 0 0 1-.196-.124c.047-.168.072-.37.069-.603a4.825 4.825 0 0 0-.086-.734 4.666 4.666 0 0 0-.333-1.004 2.961 2.961 0 0 0-.69-.997 2.271 2.271 0 0 0-1.023-.538c-.4-.098-.86-.102-1.38-.02-.52.085-1.106.274-1.758.562-.725.32-1.31.631-1.754.935-.447.304-.77.624-.972.957-.2.336-.29.693-.272 1.074.021.382.132.808.337 1.273.145.327.274.605.385.834a9.277 9.277 0 0 0 .52.958l3.46-1.528-.647-1.47a.614.614 0 0 1 .111-.066c.037-.023.073-.046.113-.063l.126-.056c.047-.021.11-.045.184-.075.075-.026.142-.05.202-.065l1.012 2.296-4.853 2.142zM521.841 76.093l.318-.635c-.748-.416-1.305-1.036-1.673-1.87-.388-.88-.453-1.718-.192-2.512.26-.79.784-1.363 1.573-1.711 1.298-.574 2.482-.277 3.549.892.52-.685 1.007-1.128 1.464-1.329.495-.219 1.005-.206 1.522.04.518.243.904.649 1.155 1.217.24.546.277 1.069.115 1.565-.165.498-.493.853-.989 1.072-.842.372-1.848.077-3.013-.881a18.673 18.673 0 0 0-1.935 3.216c.653.123 1.44-.017 2.358-.422l.418-.191.492 1.117c-1.245.55-2.481.65-3.714.305a12.118 12.118 0 0 0-.744 1.724l-.704-1.597zm.752-1.412a28.372 28.372 0 0 1 2.325-3.75c-.734-.723-1.496-.912-2.282-.564a2.293 2.293 0 0 0-1.252 1.278 2.162 2.162 0 0 0 .024 1.753c.234.529.63.956 1.185 1.283zm3.607-3.466c.725.644 1.391.828 2.001.559.585-.259.748-.678.49-1.264-.255-.576-.676-.735-1.263-.476-.387.17-.797.566-1.228 1.181zM533.811 79.356l1.338 3.036c.12.272.16.565.12.887-.04.319-.148.634-.323.942-.174.311-.41.6-.709.872a3.86 3.86 0 0 1-1.053.675 3.576 3.576 0 0 1-1.15.297 3.505 3.505 0 0 1-1.11-.068 2.609 2.609 0 0 1-.918-.394 1.615 1.615 0 0 1-.582-.683l-.973-2.207-3.09 1.364a2.32 2.32 0 0 1-.1-.18c-.03-.06-.058-.118-.081-.171a7.92 7.92 0 0 1-.106-.255 2.39 2.39 0 0 1-.078-.223l8.815-3.892zm-3.766 5.008c.089.202.229.368.42.498.19.13.414.218.667.263.252.047.524.05.81.01.291-.037.576-.12.856-.243.302-.134.569-.295.796-.485.228-.188.406-.39.536-.605a1.74 1.74 0 0 0 .236-.663c.03-.227-.001-.44-.09-.643l-.87-1.97-4.23 1.867.869 1.971zM530.581 95.977a9.376 9.376 0 0 1-.123-.294 2.981 2.981 0 0 1-.087-.243c.414-.266.828-.549 1.25-.85l1.232-.884-1.44-3.268c-.484.103-.98.208-1.482.32-.505.112-.991.23-1.467.356a1.482 1.482 0 0 1-.09-.171 1.181 1.181 0 0 1-.082-.158l-.073-.165c-.02-.045-.039-.097-.06-.154a1.746 1.746 0 0 1-.056-.17c1.605-.41 3.018-.716 4.245-.913a44.45 44.45 0 0 1 3.1-.406c.984-.09 1.832-.13 2.55-.122.066.102.119.199.16.291l.118.27c.035.078.063.149.087.218.026.069.048.126.07.174.017.055.033.106.05.145a31.595 31.595 0 0 1-1.945 1.875 50.197 50.197 0 0 1-2.412 2.012 55.932 55.932 0 0 1-3.384 2.44 2.325 2.325 0 0 1-.091-.16c-.025-.05-.049-.096-.07-.143zm6.964-6.323c-.52.026-1.068.064-1.65.116a35.515 35.515 0 0 0-3.694.53l1.28 2.905a27.13 27.13 0 0 0 1.588-1.237c.494-.418.927-.794 1.299-1.125.431-.395.83-.771 1.203-1.13l-.026-.059zM540.736 95.063l1.285 2.915c.135.306.18.634.138.987a3.371 3.371 0 0 1-.293 1.012 3.674 3.674 0 0 1-.57.874c-.228.258-.464.442-.705.549-.17.075-.378.12-.623.134a3.366 3.366 0 0 1-.774-.05 3.922 3.922 0 0 1-.825-.24 3.35 3.35 0 0 1-.78-.46c-.363.375-.687.719-.973 1.032-.285.31-.551.608-.799.888-.247.28-.48.557-.7.831-.217.273-.442.56-.672.856a4.404 4.404 0 0 1-.215-.267l-.18-.265a1.82 1.82 0 0 1-.167-.294c.313-.39.642-.782.987-1.175.296-.345.633-.725 1.016-1.145.38-.418.78-.832 1.192-1.238l-.864-1.96-3.929 1.734a3.053 3.053 0 0 1-.187-.363c-.038-.086-.07-.169-.105-.254a1.87 1.87 0 0 1-.072-.21l8.815-3.89zm-2.915 4.633c.081.184.223.346.42.483.199.133.416.238.646.314.232.071.469.114.708.119.24.004.442-.028.605-.1.179-.08.345-.21.503-.39.158-.18.286-.383.39-.603.102-.223.165-.451.193-.684a1.21 1.21 0 0 0-.085-.632l-.87-1.974-3.38 1.492.87 1.975zM544.195 104.994l-1.08-2.45a.446.446 0 0 1 .1-.061.619.619 0 0 1 .115-.065l.135-.059.195-.08c.092-.033.168-.06.224-.075l2.541 5.763c-.072.048-.14.089-.21.12l-.188.083a5.178 5.178 0 0 1-.213.087 1.038 1.038 0 0 1-.158.05l-1.08-2.45-8.046 3.551a1.417 1.417 0 0 1-.123-.217l-.09-.204a6.904 6.904 0 0 1-.1-.243 1.815 1.815 0 0 1-.068-.198l8.046-3.552zM548.448 112.426c.16.364.265.713.312 1.04.047.327.063.615.053.864-.009.291-.05.56-.117.804-.214 0-.512-.115-.891-.346.061-.194.1-.402.113-.622a3.568 3.568 0 0 0-.007-.653 2.458 2.458 0 0 0-.21-.757c-.285-.647-.615-1.046-.988-1.203-.376-.155-.834-.11-1.377.13-.345.152-.591.328-.743.529a1.345 1.345 0 0 0-.273.662 2.32 2.32 0 0 0 .045.763c.057.266.12.543.192.829.075.3.139.61.187.934.05.323.034.637-.044.946a2.09 2.09 0 0 1-.48.881c-.245.279-.61.527-1.1.743-.437.193-.839.29-1.207.295a2.074 2.074 0 0 1-1.019-.24 2.674 2.674 0 0 1-.842-.728 5.26 5.26 0 0 1-.679-1.159c-.185-.42-.3-.804-.34-1.15a4.478 4.478 0 0 1-.035-.899c.025-.299.082-.571.17-.814.093.022.198.056.311.1.089.035.185.079.29.13.107.05.204.11.293.185a2.32 2.32 0 0 0-.167.629c-.026.199-.028.42-.005.671.024.25.098.526.228.82.312.708.685 1.159 1.12 1.351.435.197.93.169 1.49-.079.364-.16.632-.349.794-.564a1.46 1.46 0 0 0 .299-.704c.032-.252.019-.517-.041-.798-.057-.28-.124-.568-.196-.86a7.6 7.6 0 0 1-.18-.91 2.546 2.546 0 0 1 .039-.905 1.98 1.98 0 0 1 .436-.831c.219-.26.556-.49 1.006-.689.42-.185.807-.279 1.163-.282.355-.006.682.067.98.213.297.15.566.366.801.65.237.286.444.627.62 1.024z"
fill="#707070" fill-rule="nonzero" />
<path d="M3181 719l29-13" fill="none" stroke="#fff" stroke-width="8.02"
transform="matrix(.4417 0 0 .44199 -911.014 -195.384)" />
</svg>
</div>
</section>
SCSS:
#race-event-overview {
position: relative;
height: 500px;
background: #242D33;
.race-track-map {
position: absolute;
top: 75px;
right: 0;
svg {
height: 350px;
width: 560px;
}
}
}
JS:
var path = anime.path('.race-track .track');
anime({
targets: '.race-track .ball',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'linear',
duration: 9490, // fastest lap on course
loop: true
});
I guess I am too late to be useful for you but:
tl;dr
The whole problem is that transform origin is kind of broken in SVGs and anime.js is a simple tool. To fix this you have to place the animating object (the circle) to cx="0" cy="0" and remove any transforms on the path.
More info
Really helpful article on SVG transform is here on CSS Tricks. The important think from there is: transform of all elements inside svg element has transform origin in upper left corner of the svg element.
If you inspect the transforms that anime.js creates on the animated element you will see exactly the values from the path's d attribute. Those values are number of pixels from origin (again upper left corner of the svg element) however when there is transform applied to the element it will not match.
Try Removing transforms in SVG files
Related
I'm trying to copy the color value from the <h1> element to <path> elements.
<div id='my_id'>
<h1 style='color:orange'>What What</h1>
<div id='my_element'>
<svg>
<path d="M10 10"></path>
<path d="M10 10"></path>
<path d="M10 10"></path>
</svg>
</div>
</div>
mycolor_element = document.querySelectorAll('#my_id h1')[0];
let my_value = window.getComputedStyle(mycolor_element).color;
document.querySelectorAll('#my_element svg path')[0].style.fill = my_value;
I expect that if my <h1> is orange then my <path>s are also orange.
You can use querySelector (if is just one element) with window.getComputedStyle for catch color of element then set it to the svg like:
const mycolor_element = window.getComputedStyle(document.querySelector('#my_id > h1')).color;
document.querySelectorAll('#my_element > svg > path').forEach(el => el.style.fill = mycolor_element);
h1 {
color: orange
}
<div id='my_id'>
<h1 style='color:orange'>What What</h1>
<div id='my_element'>
<svg>
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 0 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 15 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 30 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
</svg>
</div>
</div>
You can simplify this task by applying a fill:currentColor property value to your <path> elements:
path{
fill:currentColor;
}
This way all paths can inherit the fill color from the parent element's (text) color property:
let h1 = document.querySelector('#my_id h1');
let h1Color = window.getComputedStyle(h1).color;
let svgWrap = document.getElementById('svgWrap');
svgWrap.style.color = h1Color;
.colorOrange{
color:orange
}
.svgCurrentColor path{
fill:currentColor;
}
<div class='colorOrange'>
<h1>Inherit color via css</h1>
<div class='svgWrap'>
<svg class="svgCurrentColor">
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 0 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 15 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 30 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
</svg>
</div>
</div>
<div id='my_id'>
<h1 style="color:purple">Inherit color via js</h1>
<div id='svgWrap' >
<svg class="svgCurrentColor">
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 0 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 15 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 30 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
</svg>
</div>
</div>
So you might not need any javaScript at all.
document.querySelectorAll
This method is not used to select one element only.
Use the
document.querySelector
method instead.
Using the following codes, I display the number of products in the shopping cart numerically next to the shopping cart icon.
HTML:
<div class="ico-shop">
<a href="<?php echo wc_get_cart_url(); ?>">
<button class="ico-shop_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16" >
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
</svg>
</button>
<span class="counting_cart_items"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
</a>
</div>
CSS:
.ico-shop button {
background: none;
border: none;
outline: none;
list-style: none;
padding-right: 17px;
border-right: 2px solid #afb1b5;
}
.ico-shop {
position: relative;
}
.counting_cart_items {
position: absolute;
top: 18px;
right: 3px;
font-size: 12px;
background: #52abff;
color: #fff;
text-shadow: none;
padding: 1px 7px;
border-radius: 50%;
}
PHP (In the function file):
function custom_cart_count_fragments( $fragments ) {
$fragments[ 'div.cart-totals' ] = '<div class="cart-totals">' . WC()->cart->get_cart_contents_count() . '</div>';
return $fragments;
}
Result:
But I don't want this number to be displayed when there are no items in the cart.
For this purpose, I wrote the following script code, which does not work:
script:
var cart_item = document.querySelector(".counting_cart_items");
$(cart_item).each(function () {
if ($(this) == 0) {
$(this).css("display", "none");
} else {
$(this).css("display", "block");
}
});
Is there a way to solve this problem?
Why not something like
<div class="ico-shop">
<a href="<?php echo wc_get_cart_url(); ?>">
<button class="ico-shop_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16" >
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
</svg>
</button>
<?php if (WC()->cart->get_cart_contents_count() > 0) { ?>
<span class="counting_cart_items"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
<?php } ?>
</a>
</div>
Or (only pertinent line included here)
<span class="counting_cart_items" style="display: <?php echo (WC()->cart->get_cart_contents_count() > 0 ? "block" : "none"); ?>><?php echo WC()->cart->get_cart_contents_count(); ?></span>
Alternatively, you could give the span an ID, then use document.getElementByID(<id>).style.display = <block/none>. I suspect $(this) == 0 may also not be working as you intend it to. I would need more information to comment on how to do more in JS
I am trying to reproduce something that I saw a while ago which is animating an SVG clock. Everything works fine but I can't get around the transform-origin which seems not to be working... is the way the path is made?
// Real time clock animation
let sec = document.querySelector('.seconds-lancet');
let min = document.querySelector('.minutes-lancet');
let hour = document.querySelector('.hours-lancet');
setInterval(function() {
let d = new Date();
function r(el, deg) {
el.setAttribute('transform', 'rotate('+ deg +')');
}
r(sec, 6*d.getSeconds());
r(min, 6*d.getMinutes());
r(hour, 30*(d.getHours()%12) + d.getMinutes()/2);
}, 1000);
.seconds-lancet,
.minutes-lancet,
.hours-lancet {
transform-origin: bottom center !important;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 621.07 768">
<g id="clock">
<circle cx="70.64" cy="107.54" r="41.2" fill="#cdcfd0" opacity=".81" transform="rotate(-80.78 70.641 107.542)"/>
<path fill="#034732" d="M112.62 99.31c0-19-14.55-34.39-32.5-34.39s-32.5 15.4-32.5 34.39v8.42l64.45 1.21z"/>
<path fill="#034732" d="M116.79 114l-74.17-1.39v-13.3c0-21.72 16.83-39.39 37.5-39.39s37.5 17.67 37.5 39.39v.28zm-64.17-11.18l54.74 1 .26-4.68c-.07-16.14-12.38-29.22-27.5-29.22s-27.5 13.18-27.5 29.39z"/>
<circle cx="80.29" cy="107.1" r="34.38" fill="#fff"/>
<path fill="#008048" d="M80.29 145a37.93 37.93 0 1 1 37.93-37.93A38 38 0 0 1 80.29 145zm0-68.77a30.84 30.84 0 1 0 30.84 30.84 30.88 30.88 0 0 0-30.84-30.81z"/>
<path fill="#ffffff" d="M80.29 138.14a31.07 31.07 0 1 1 12.09-59.7A31.18 31.18 0 0 1 108.92 95a31 31 0 0 1-6.66 34 31.2 31.2 0 0 1-9.88 6.66 30.87 30.87 0 0 1-12.09 2.48z"/>
<path fill="#034732" d="M77.29 84.72l-.67.2h-.21a.5.5 0 0 1-.12-1l1-.32a2.14 2.14 0 0 1 .56-.1.56.56 0 0 1 .57.57v5.51a.57.57 0 1 1-1.14 0zM80 89.05l2-1.71c.89-.75 1.22-1.17 1.22-1.76a1 1 0 0 0-1-1 1.61 1.61 0 0 0-1.29.72.49.49 0 0 1-.4.18A.52.52 0 0 1 80 85a.63.63 0 0 1 .13-.36 2.53 2.53 0 0 1 2.16-1 2 2 0 0 1 2.15 1.95c0 1-.54 1.58-1.69 2.52l-1.34 1.12H84a.5.5 0 0 1 0 1h-3.7a.55.55 0 0 1-.61-.54.68.68 0 0 1 .31-.64zM99.72 109.68a.59.59 0 0 1 .8-.86 2.12 2.12 0 0 0 1.59.66 1.09 1.09 0 0 0 1.21-1c0-.68-.63-1.06-1.61-1.06h-.25a.53.53 0 0 1-.53-.52.66.66 0 0 1 .26-.49l1.64-1.73h-2.54a.53.53 0 0 1-.54-.52.54.54 0 0 1 .54-.53h3.58a.55.55 0 0 1 .6.53.86.86 0 0 1-.35.66l-1.64 1.68c1.06.13 2 .66 2 1.93a2.21 2.21 0 0 1-2.44 2.18 3.31 3.31 0 0 1-2.32-.93zM78.51 129.87a3.16 3.16 0 0 1-.79-2.48c0-2 .94-3.53 2.78-3.53a2.83 2.83 0 0 1 1.63.46.55.55 0 0 1 .28.49.54.54 0 0 1-.54.53.55.55 0 0 1-.29-.08 1.94 1.94 0 0 0-1.12-.36c-1 0-1.5.87-1.56 2.06a2.26 2.26 0 0 1 3.83 1.39 2.26 2.26 0 0 1-2.41 2.21 2.39 2.39 0 0 1-1.81-.69zm3.08-1.48a1.34 1.34 0 0 0-2.65 0 1.22 1.22 0 0 0 1.35 1.16 1.17 1.17 0 0 0 1.3-1.16zM57.16 109.89a.53.53 0 0 1-.26-.47.52.52 0 0 1 .54-.52.63.63 0 0 1 .31.09 1.94 1.94 0 0 0 1.19.4c1 0 1.53-.84 1.57-2A1.93 1.93 0 0 1 59 108a2.06 2.06 0 0 1-2.3-2.06 2.26 2.26 0 0 1 2.42-2.25 2.4 2.4 0 0 1 1.81.69 3.3 3.3 0 0 1 .78 2.48c0 2.08-1 3.53-2.79 3.53a2.94 2.94 0 0 1-1.76-.5zm3.31-4a1.23 1.23 0 0 0-1.35-1.19 1.19 1.19 0 0 0-1.29 1.2 1.18 1.18 0 0 0 1.32 1.16 1.2 1.2 0 0 0 1.32-1.15z"/>
<rect width="2.32" height=".98" x="51.17" y="106.63" fill="#008048" rx=".43" ry=".43"/>
<path fill="#008048" d="M80.91 80c0 .24-.17.36-.41.36h-.2a.33.33 0 0 1-.37-.36v-1.51c0-.23.13-.49.37-.49h.2a.47.47 0 0 1 .41.49z"/>
<rect width="2.32" height=".98" x="106.97" y="106.63" fill="#008048" rx=".43" ry=".43"/>
<rect width=".98" height="2.32" x="79.93" y="133.68" fill="#008048" rx=".43" ry=".43"/>
<path fill="#008048" d="M65.73 131.33a.4.4 0 0 0 .11.53.38.38 0 0 0 .53-.11l.63-1a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.11zM55.6 120.8a.39.39 0 0 0-.15.52.39.39 0 0 0 .52.15l1-.56a.39.39 0 0 0 .15-.52.39.39 0 0 0-.53-.15zM56 92.41a.38.38 0 0 0-.53.11.4.4 0 0 0 .11.53l1 .63a.39.39 0 0 0 .53-.11.37.37 0 0 0-.11-.53zM66.49 82.28a.37.37 0 0 0-.52-.15.38.38 0 0 0-.14.52l.55 1a.38.38 0 0 0 .52.15.37.37 0 0 0 .15-.52zM94.86 82.79a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.1l-.63 1a.37.37 0 0 0 .11.53.38.38 0 0 0 .53-.11zM105 93.32a.39.39 0 0 0 .15-.52.37.37 0 0 0-.52-.15l-1 .56a.38.38 0 0 0-.14.52.38.38 0 0 0 .52.14zM104.63 121.58a.38.38 0 0 0 .53-.11.39.39 0 0 0-.11-.53l-1-.63a.37.37 0 0 0-.53.11.38.38 0 0 0 .11.53zM94.1 131.71a.39.39 0 0 0 .52.15.39.39 0 0 0 .15-.52l-.56-1a.38.38 0 0 0-.52-.14.37.37 0 0 0-.15.52z"/>
<g id="hands">
<path class="minutes-lancet" fill="#2e2c2b" d="M81.26 107h-1.93l.3-30.58c0-.23.25-.42.56-.42.31 0 .56.19.56.42z"/>
<path class="hours-lancet" fill="#2e2c2b" d="M81.48 107h-2.3l.35-22.69c0-.17.31-.31.67-.31.37 0 .67.14.67.31z"/>
<path class="seconds-lancet" fill="#008048" d="M81.06 109H79.6l.23-32.55a.44.44 0 0 1 .42-.45.45.45 0 0 1 .43.45z"/>
<circle cx="80.28" cy="107" r="2" fill="#034732"/>
</g>
</g>
</svg>
Thanks
Looks like you've assumed that the transform-box is the fill-box, it's not by default it's the view-box. Setting transform-box: fill-box; seems to make things work better.
// Real time clock animation
let sec = document.querySelector('.seconds-lancet');
let min = document.querySelector('.minutes-lancet');
let hour = document.querySelector('.hours-lancet');
setInterval(function() {
let d = new Date();
function r(el, deg) {
el.setAttribute('transform', 'rotate('+ deg +')');
}
r(sec, 6*d.getSeconds());
r(min, 6*d.getMinutes());
r(hour, 30*(d.getHours()%12) + d.getMinutes()/2);
}, 1000);
.seconds-lancet,
.minutes-lancet,
.hours-lancet {
transform-origin: bottom center !important;
transform-box: fill-box;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 621.07 768">
<g id="clock">
<circle cx="70.64" cy="107.54" r="41.2" fill="#cdcfd0" opacity=".81" transform="rotate(-80.78 70.641 107.542)"/>
<path fill="#034732" d="M112.62 99.31c0-19-14.55-34.39-32.5-34.39s-32.5 15.4-32.5 34.39v8.42l64.45 1.21z"/>
<path fill="#034732" d="M116.79 114l-74.17-1.39v-13.3c0-21.72 16.83-39.39 37.5-39.39s37.5 17.67 37.5 39.39v.28zm-64.17-11.18l54.74 1 .26-4.68c-.07-16.14-12.38-29.22-27.5-29.22s-27.5 13.18-27.5 29.39z"/>
<circle cx="80.29" cy="107.1" r="34.38" fill="#fff"/>
<path fill="#008048" d="M80.29 145a37.93 37.93 0 1 1 37.93-37.93A38 38 0 0 1 80.29 145zm0-68.77a30.84 30.84 0 1 0 30.84 30.84 30.88 30.88 0 0 0-30.84-30.81z"/>
<path fill="#ffffff" d="M80.29 138.14a31.07 31.07 0 1 1 12.09-59.7A31.18 31.18 0 0 1 108.92 95a31 31 0 0 1-6.66 34 31.2 31.2 0 0 1-9.88 6.66 30.87 30.87 0 0 1-12.09 2.48z"/>
<path fill="#034732" d="M77.29 84.72l-.67.2h-.21a.5.5 0 0 1-.12-1l1-.32a2.14 2.14 0 0 1 .56-.1.56.56 0 0 1 .57.57v5.51a.57.57 0 1 1-1.14 0zM80 89.05l2-1.71c.89-.75 1.22-1.17 1.22-1.76a1 1 0 0 0-1-1 1.61 1.61 0 0 0-1.29.72.49.49 0 0 1-.4.18A.52.52 0 0 1 80 85a.63.63 0 0 1 .13-.36 2.53 2.53 0 0 1 2.16-1 2 2 0 0 1 2.15 1.95c0 1-.54 1.58-1.69 2.52l-1.34 1.12H84a.5.5 0 0 1 0 1h-3.7a.55.55 0 0 1-.61-.54.68.68 0 0 1 .31-.64zM99.72 109.68a.59.59 0 0 1 .8-.86 2.12 2.12 0 0 0 1.59.66 1.09 1.09 0 0 0 1.21-1c0-.68-.63-1.06-1.61-1.06h-.25a.53.53 0 0 1-.53-.52.66.66 0 0 1 .26-.49l1.64-1.73h-2.54a.53.53 0 0 1-.54-.52.54.54 0 0 1 .54-.53h3.58a.55.55 0 0 1 .6.53.86.86 0 0 1-.35.66l-1.64 1.68c1.06.13 2 .66 2 1.93a2.21 2.21 0 0 1-2.44 2.18 3.31 3.31 0 0 1-2.32-.93zM78.51 129.87a3.16 3.16 0 0 1-.79-2.48c0-2 .94-3.53 2.78-3.53a2.83 2.83 0 0 1 1.63.46.55.55 0 0 1 .28.49.54.54 0 0 1-.54.53.55.55 0 0 1-.29-.08 1.94 1.94 0 0 0-1.12-.36c-1 0-1.5.87-1.56 2.06a2.26 2.26 0 0 1 3.83 1.39 2.26 2.26 0 0 1-2.41 2.21 2.39 2.39 0 0 1-1.81-.69zm3.08-1.48a1.34 1.34 0 0 0-2.65 0 1.22 1.22 0 0 0 1.35 1.16 1.17 1.17 0 0 0 1.3-1.16zM57.16 109.89a.53.53 0 0 1-.26-.47.52.52 0 0 1 .54-.52.63.63 0 0 1 .31.09 1.94 1.94 0 0 0 1.19.4c1 0 1.53-.84 1.57-2A1.93 1.93 0 0 1 59 108a2.06 2.06 0 0 1-2.3-2.06 2.26 2.26 0 0 1 2.42-2.25 2.4 2.4 0 0 1 1.81.69 3.3 3.3 0 0 1 .78 2.48c0 2.08-1 3.53-2.79 3.53a2.94 2.94 0 0 1-1.76-.5zm3.31-4a1.23 1.23 0 0 0-1.35-1.19 1.19 1.19 0 0 0-1.29 1.2 1.18 1.18 0 0 0 1.32 1.16 1.2 1.2 0 0 0 1.32-1.15z"/>
<rect width="2.32" height=".98" x="51.17" y="106.63" fill="#008048" rx=".43" ry=".43"/>
<path fill="#008048" d="M80.91 80c0 .24-.17.36-.41.36h-.2a.33.33 0 0 1-.37-.36v-1.51c0-.23.13-.49.37-.49h.2a.47.47 0 0 1 .41.49z"/>
<rect width="2.32" height=".98" x="106.97" y="106.63" fill="#008048" rx=".43" ry=".43"/>
<rect width=".98" height="2.32" x="79.93" y="133.68" fill="#008048" rx=".43" ry=".43"/>
<path fill="#008048" d="M65.73 131.33a.4.4 0 0 0 .11.53.38.38 0 0 0 .53-.11l.63-1a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.11zM55.6 120.8a.39.39 0 0 0-.15.52.39.39 0 0 0 .52.15l1-.56a.39.39 0 0 0 .15-.52.39.39 0 0 0-.53-.15zM56 92.41a.38.38 0 0 0-.53.11.4.4 0 0 0 .11.53l1 .63a.39.39 0 0 0 .53-.11.37.37 0 0 0-.11-.53zM66.49 82.28a.37.37 0 0 0-.52-.15.38.38 0 0 0-.14.52l.55 1a.38.38 0 0 0 .52.15.37.37 0 0 0 .15-.52zM94.86 82.79a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.1l-.63 1a.37.37 0 0 0 .11.53.38.38 0 0 0 .53-.11zM105 93.32a.39.39 0 0 0 .15-.52.37.37 0 0 0-.52-.15l-1 .56a.38.38 0 0 0-.14.52.38.38 0 0 0 .52.14zM104.63 121.58a.38.38 0 0 0 .53-.11.39.39 0 0 0-.11-.53l-1-.63a.37.37 0 0 0-.53.11.38.38 0 0 0 .11.53zM94.1 131.71a.39.39 0 0 0 .52.15.39.39 0 0 0 .15-.52l-.56-1a.38.38 0 0 0-.52-.14.37.37 0 0 0-.15.52z"/>
<g id="hands">
<path class="minutes-lancet" fill="#2e2c2b" d="M81.26 107h-1.93l.3-30.58c0-.23.25-.42.56-.42.31 0 .56.19.56.42z"/>
<path class="hours-lancet" fill="#2e2c2b" d="M81.48 107h-2.3l.35-22.69c0-.17.31-.31.67-.31.37 0 .67.14.67.31z"/>
<path class="seconds-lancet" fill="#008048" d="M81.06 109H79.6l.23-32.55a.44.44 0 0 1 .42-.45.45.45 0 0 1 .43.45z"/>
<circle cx="80.28" cy="107" r="2" fill="#034732"/>
</g>
</g>
</svg>
I don't know how to make this algorithm in JavaScript/Node.js that converts bitmaps into svg paths pixel by pixel:
// input
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 1 1 1 1 1 1 0 0
0 0 1 1 1 1 1 1 0 0
0 1 1 1 0 0 1 1 1 0
0 1 1 1 0 0 1 1 1 0
0 0 1 1 1 1 1 1 0 0
0 0 1 1 1 1 1 1 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
// output
<path d="M2 2 h6 v2 h1 v2 h-1 v2 h-6 v-2 h-1 v-2 h1 v-2 M4 4 v2 h2 v-2 z">
Does anyone know how the algorithm should work?
Any pseudocode would help.
Tools does the similar approach:
https://github.com/59naga/pixel-to-svg
https://github.com/brainshave/sharpvg
https://codepen.io/shshaw/pen/XbxvNj
http://drububu.com/tutorial/bitmap-to-vector.html
You can converts pixels to SVG path string like this.
Using this algorithm, I made script coverts pixel art to SVG.
http://defghi1977.html.xdomain.jp/tech/img2svg3/dot2svg3.htm
(Sorry this page is written in Japanese.)
I am making a folt clone for fun and I am having trouble with the explore function. Basically I want to reset grid locations when the connected tiles > 3. Here is an example of what might happen during the game...
current_position=[3,4]
0 0 0 0 0 0
0 0 0 0 0 0
0 0 0 0 0 0
0 0 0 2 2 0
0 0 0 1 0 0
0 0 0 1 2 3
move(down)
current_position=[4,4]
0 0 0 0 0 0
0 0 0 0 0 0
0 0 0 0 0 0
0 0 0 2 2 0
0 0 0 1 2 0
0 0 0 1 2 3
resetGridLocations(explore([4,4]))
0 0 0 0 0 0
0 0 0 0 0 0
0 0 0 0 0 0
0 0 0 0 0 0
0 0 0 1 2 0
0 0 0 1 0 3
score += 3
Here is a JS bin of my source code for the game. You can play the semi-functional version by calling move(keyCode) in the console. Currently the explore() function searches 2 layers around the position for duplicate values. It works for the above example but not for larger groups like below. A recursive solution seems attractive.
0 0 0 0 0 0
0 0 0 0 2 0
0 0 1 1 2 0
0 0 0 2 2 0
0 0 0 1 2 0
0 0 0 1 2 3