I've used an html code to make a text glitch on a website, however I need to only make the animation glitch happen every 10 seconds as it's a little crazy at the moment.
Where I'm stuck is how to re-execute the html code using a JS setInterval(html, 10000). Is this even possible? Thanks!
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">
<script>
var html = '<defs>';
html += '<filter id="glitch" x="0" y="0">';
html += '<feColorMatrix in="SourceGraphic" mode="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" result="r" />';
html += '<feOffset in="r" result="r" dx="-5">';
html += '<animate attributeName="dx" attributeType="XML" values="0; -5; 0; -18; -2; -4; 0 ;-3; 0" dur="0.2s" repeatCount="indefinite" />';
html += '</feOffset>';
html += '<feColorMatrix in="SourceGraphic" mode="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0" result="g"/>';
html += '<feOffset in="g" result="g" dx="-5" dy="1">';
html += '<animate attributeName="dx" attributeType="XML" values="0; 0; 0; -3; 0; 8; 0 ;-1; 0" dur="0.15s" repeatCount="indefinite" />';
html += '</feOffset>';
html += '<feColorMatrix in="SourceGraphic" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0" result="b"/>';
html += '<feOffset in="b" result="b" dx="5" dy="2">'
html += '<animate attributeName="dx" attributeType="XML" values="0; 3; -1; 4; 0; 2; 0 ;18; 0" dur="0.35s" repeatCount="indefinite"/>';
html += '</feOffset>';
html += '<feBlend in="r" in2="g" mode="screen" result="blend" />';
html += '<feBlend in="blend" in2="b" mode="screen" result="blend" />';
html += '</filter>';
html += '</defs>';
</script></svg>
You don't need setInterval() for this - it can all be done in the SVG animation. Following the strategy outlined here, make a "dummy" animation element that does nothing, and tie the start/end of the other animations to it:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<animateTransform begin="myGlitch.end" id="pause" dur="10s" type="translate" attributeType="XML" attributeName="transform" />
<filter id="glitch" x="0" y="0">
<feColorMatrix in="SourceGraphic" mode="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" result="r" />
<feOffset in="r" result="r" dx="-5">
<animate attributeName="dx" attributeType="XML" values="0; -5; 0; -18; -2; -4; 0 ;-3; 0" dur="0.2s" begin="0; pause.end" />
</feOffset>
<feColorMatrix in="SourceGraphic" mode="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0" result="g" />
<feOffset in="g" result="g" dx="-5" dy="1">
<animate attributeName="dx" attributeType="XML" values="0; 0; 0; -3; 0; 8; 0 ;-1; 0" dur="0.15s" begin="0; pause.end" />
</feOffset>
<feColorMatrix in="SourceGraphic" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0" result="b" />
<feOffset in="b" result="b" dx="5" dy="2">
<animate id="myGlitch" attributeName="dx" attributeType="XML" values="0; 3; -1; 4; 0; 2; 0 ;18; 0" dur="0.35s" begin="0; pause.end" />
</feOffset>
<feBlend in="r" in2="g" mode="screen" result="blend" />
<feBlend in="blend" in2="b" mode="screen" result="blend" />
</filter>
</defs>
</svg>
Notice that the pause animation starts after the end of the last glitch animation (begin=myGlitch.end), and each of the glitch animations start at the end of the pause element (begin="0; pause.end").
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.
I want to add a brush stroke effect animation on my webpage. I tried using transform but it didn't work. I want to the brush stoke to have wipe animation from left to right so that it reveal itself.
Can anyone suggest the way to do it?
You can use SVG clipPath and animation to reach this effect, take a look at Code snippet:
Take a look at comments in code for more details.
Regarding clipPathUnits="objectBoundingBox" take a look at this DOC page.
Regarding SVG animation take a look at this page.
/* create wrapper */
.brush-wrap {
position: relative;
display: inline-block;
padding: 3rem;
}
/* applying example animation (indefinite variant) */
.brush-wrap.brush-wrap--indefinite:before {
clip-path: url(#clip-indefinite);
}
/* clipping/animating object (pseudo element) */
.brush-wrap:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: black;
z-index: -1;
clip-path: url(#clip); /* applying clip animation */
}
.brush-wrap p {
font-size: 2rem;
text-transform: uppercase;
margin: 0;
color: white;
font-style: italic;
filter: drop-shadow(0px 0px 2px black);
}
<div class="brush-wrap">
<p>Vivamus in erat</p>
</div>
<div class="brush-wrap brush-wrap--indefinite">
<p>Vivamus (indefinite)</p>
</div>
<!-- create svg inline with clipPath and animation -->
<!-- do not hide SVG with display: none; it will disable anim/clipping -->
<svg height="0" width="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<!--
square that can be animated
animating view area
user for clipping shape
-->
<!-- runs only once -->
<clipPath id="rect-cp">
<rect id="rect" x="0" y="0" width="0" height="1">
<animate
id="anim"
attributeName="width"
dur="1s"
fill="freeze"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.5,0,0.5,1"
values="0;1"
/>
</rect>
</clipPath>
<!-- indefinite example -->
<clipPath id="rect-cp-indefinite">
<rect id="rect" x="0" y="0" width="0" height="1">
<animate
id="anim-indefinite"
attributeName="width"
dur="1s"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.5,0,0.5,1"
values="0;1"
begin="0s;anim-indefinite.end+1s"
/>
</rect>
</clipPath>
<!--
clip path for shape;
clip path should use clipPathUnits="objectBoundingBox" to stretch to full size
in this case path should contain points from 0 to 1 (1px size)
-->
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<use href="#brush-shape" clip-path="url(#rect-cp)" />
</clipPath>
<clipPath id="clip-indefinite" clipPathUnits="objectBoundingBox">
<use href="#brush-shape" clip-path="url(#rect-cp-indefinite)" />
</clipPath>
<!-- brush shape -->
<path id="brush-shape" d="M.261.995A.07.07 0 0 0 .257.978V.975C.258.97.255.972.257.967.259.963.255.96.257.959V.95C.256.943.259.948.257.943.256.934.255.956.255.944.255.937.254.943.253.94.252.939.253.938.254.937.257.934.257.931.26.926.267.907.277.916.284.899.293.885.287.897.29.879.295.874.308.872.312.862.288.866.246.848.22.864.207.871.2.872.188.891.175.892.176.901.161.91.156.928.143.92.138.928c0-.005-.025-.012-.022.01-.007.013.01-.01.011-.003-.001.004.006 0 .004.003L.13.942C.13.947.113.951.111.945.103.948.059.92.089.918.069.889.048.9.029.904.028.901.002.922.008.898.012.884.032.892.029.873.026.872.031.869.029.867c0-.004.002-.012.005-.014A.055.055 0 0 0 .017.85C.021.826.042.831.045.818.044.818.038.815.041.811.042.804.053.795.046.793.041.79.032.788.029.791.026.792.019.799.024.783V.782C.024.784.022.778.022.781.021.786.019.782.022.778.024.774.023.773.02.77.011.75.041.756.045.75.037.732.04.727.048.717.051.714.045.713.046.704.04.698.026.726.019.716L.02.713C.02.711.049.696.036.696.031.688.013.697.011.7.009.699.012.689.015.686c.004-.01-.008 0-.009 0A.083.083 0 0 0 .01.671C-.015.656.013.64.022.638.065.619.022.624.05.602.076.574.047.581.061.565.065.559.049.563.054.556.056.549.035.568.036.554.034.55.047.529.046.527.045.52.061.504.058.495c0-.008.021-.016.024-.022C.09.469.095.459.101.455.102.454.101.453.1.453.093.454.093.447.09.446.087.446.094.439.095.443c.003.002.008 0 .012.005.004.008.001-.003 0-.006C.1.427.133.438.124.42c0-.006.005-.003.002-.009C.12.412.106.413.104.406.104.395.105.393.098.392.088.392.105.381.108.38.117.373.133.38.141.371.143.369.143.369.143.362V.348C.142.342.143.341.151.342.164.342.166.334.179.329.161.323.132.331.118.344v.002c-.001 0 0 .006-.002.001C.113.338.115.354.112.347.107.338.107.36.1.34.098.344.1.32.101.324L.102.32C.106.32.109.307.111.316H.11L.108.32v.002c0 .006.004.01.002.005C.109.324.115.328.115.325.116.32.117.33.118.324.118.317.119.319.12.315.121.311.125.309.125.304c0-.011.001.007.002-.001.002-.008 0 .008.002.001S.122.289.131.283C.133.283.135.281.135.277.136.271.143.276.144.27.14.26.126.277.123.262.121.254.124.257.122.252S.124.252.124.25C.121.245.128.243.128.247c0 .002 0 .002 0 0A.017.017 0 0 0 .135.244C.137.244.138.239.136.239.129.233.144.217.147.217.155.202.113.217.11.212.107.209.11.217.108.216.104.212.101.22.106.206c0 0-.004.003-.002 0C.106.198.112.215.113.205.112.202.121.202.12.205.122.199.131.198.134.195.139.19.14.192.144.188.151.183.13.188.131.187.123.185.055.231.084.194.128.159.184.15.23.132.26.119.281.094.313.079.321.079.338.05.341.074c0 .004.001.001.002.002C.345.074.342.09.344.084.339.11.33.106.375.088.4.081.424.072.449.069.461.086.479.065.497.067c.07-.01.145.008.213.021a.525.525 0 0 1 .129.034C.844.128.854.123.855.13c0 .003.001.004.001.001 0-.004.002.001.003 0C.861.13.861.145.859.136.832.14.793.123.76.123c.021.019.057.01.076.03C.833.158.826.15.821.149.814.149.802.15.793.142.789.15.775.143.77.146.772.151.768.154.762.151.727.147.687.119.652.139c.037.02.079.016.115.035.043.029.096.022.135.042C.887.223.852.214.835.215.826.213.824.214.829.217c.004.001.004.005 0 .008-.005.007.02.007.025.009.009.001.01.002.01.005-.003.007.027.007.029.012C.905.263.867.262.889.269c.024.003.053.029.075.04 0 .004-.005.002-.006.004 0 .003.006.005.003.01-.002.003.001.007.006.01S.975.34.973.34c-.001.002.01.009.013.013C.996.36.983.358.981.365.977.371.964.355.965.375c.002.002.021.013.01.014-.006 0-.004.003-.01.003-.014.004.012.011.014.015C.986.411.954.416.975.425c.006.006.009.001.013.007C.989.437.984.446.985.44.987.435.984.437.984.44S.983.443.977.442C.97.441.968.442.97.448c.002.018.019.014.022.027C.988.486.961.462.958.476.962.503 1 .488.997.509.997.516.99.514.992.527.994.536.99.539.995.541.998.56.982.538.982.547c-.004.017.002.022 0 .024v.002c.003.004-.011 0-.01.009C.972.584.971.585.97.585.96.586.978.604.98.608c.008-.002.015.013.005.02C.985.637.937.619.957.635.98.649.955.642.973.668.974.674.974.68.972.679.97.696.966.692.96.693.952.691.953.703.945.698.942.699.935.701.94.71c.002.006.022.018.015.026C.955.743.952.751.951.75.95.755.936.753.94.764c.003.01.007.005.005.022.001.009-.001 0-.002.002L.939.796C.948.8.939.808.935.813.931.818.934.825.926.816.922.812.921.812.919.819S.903.814.904.82c0 .003.013.008.01.011C.91.837.926.846.93.849.929.859.927.861.93.87.926.877.906.852.903.859c-.004.009.01.012.012.023C.916.887.906.881.906.884.91.894.899.882.898.881S.888.87.887.877c-.004.014.02.018.027.028C.93.914.907.914.905.915c0 .001.008.008.004.011C.908.931.9.921.901.926.914.945.868.935.866.939.807.926.75.894.69.896.674.894.679.901.673.897.668.896.661.885.657.89.656.892.653.89.653.887.62.879.637.881.59.88.563.878.561.88.536.882.532.882.527.891.529.895.526.915.52.903.513.904.485.903.45.918.424.927.418.921.398.928.392.932c.001.009.005.002.005.011 0 .004-.001.004-.002 0C.394.937.394.945.393.943.373.954.352.952.329.962.303.968.298.993.278.992.273.994.265.996.261 1V.995zm0-.019c-.002-.009-.003.019 0 0zM.354.945C.356.942.356.942.352.943L.337.948c0 .003.014 0 .017-.003zM.097.92C.097.919.095.919.095.921.096.924.097.921.097.92zm.04-.007c0-.003-.003-.002-.003 0 0 .004.003.002.003 0zM.111.903C.111.901.11.901.109.902.106.907.111.907.111.903zM.423.902C.429.893.404.901.396.903.394.904.42.908.423.902zm.02-.006c0-.002-.012 0-.006.003C.439.9.441.898.443.896zM.09.897c.003 0-.004-.007-.003 0 .001.004.002-.001.003 0zM.451.894c-.006-.006-.007.008 0 0zM.883.87C.884.867.876.868.88.87c.002.002.002.002.003 0zM.032.84C.031.839.03.841.032.841V.84zM.038.837C.041.834.037.836.036.837c-.001.002 0 .002.002 0zm.007.001C.05.822.038.834.042.835c.002 0 .001.007.003.003zM.943.802C.943.8.94.799.942.802c.001.002.001.002.001 0zM.059.718C.058.717.057.719.059.719V.718zM.055.712c0-.008-.009.005-.002.004L.055.712zm.01.001C.064.71.062.709.062.712c0 .004.003.004.003.001zM.061.711C.063.708.057.709.058.711c-.001.003.002.003.003 0zM.981.47C.981.467.98.467.98.47c0 .002.001.002.001 0zM.985.431H.984c-.001.002.002.002.001 0zM.977.406H.975c-.002.002.004.002.002 0zM.952.39C.951.388.941.38.94.382c.001.002.012.01.012.008zM.146.371C.148.368.144.369.144.371c-.001.002.001.002.002 0zM.948.359C.948.357.931.349.935.355c0 .001.013.007.013.004zM.115.334c0-.003-.001-.002-.001 0s.001.002.001 0zM.189.33C.188.329.187.331.189.331V.33zM.103.327.102.325C.1.324.104.332.103.327zM.105.324v.002-.002zM.137.31C.141.307.165.296.154.283.154.278.179.276.163.27.16.27.147.281.153.284.154.287.147.287.145.294c0 .002 0 .002-.001 0 0-.002-.001-.002 0 0C.144.299.138.3.137.298c0-.001-.001-.002-.001 0C.136.303.13.305.129.31c.001.005.007 0 .008 0zM.16.235C.159.233.157.239.159.237L.16.235zM.827.227c0-.002-.003-.003-.003 0 0 .002.003.002.003 0zM.161.214h.001C.159.205.155.219.161.214zm.661 0C.822.212.82.212.82.214c.001.002.002.002.002 0zm.003.001C.824.214.823.216.825.216V.215zM.171.21C.17.209.169.211.171.211V.21zM.109.208c0-.003-.001-.003-.001 0 0 .002.001.002.001 0zM.123.202.122.205.123.202zm.006.001c0-.008-.001.002-.001.003L.129.203zM.852.132C.851.131.85.133.852.133V.132zM.343.09C.343.087.342.085.342.089c0 .003.001.004.001.001zM.081.976c0-.007-.003-.01.002-.011C.087.964.081.97.083.973.085.973.086.97.086.967.085.965.091.977.092.969c.001-.006.003.013.002.01C.093.978.094.971.093.976.092.98.081.979.081.976zM.073.971V.965c.002.001.002.01 0 .006zM.085.955C.084.948.087.951.088.95.092.949.086.966.085.955zM.42.939.421.937C.422.936.42.943.42.939zM.426.938C.427.935.428.937.426.939V.938zM.13.932c.003-.018.003.009 0 0zM.753.913c0-.003.002-.002.002 0 .001.003-.002.003-.002 0zM.744.911c0-.002.001-.003.002 0 0 .002-.002.002-.002 0zM.196.908C.195.899.2.907.2.909.197.911.196.91.196.908zM.674.903c0-.005.002.002.001.002L.674.903zM.666.901c-.001-.005.001-.006 0 0 0 .002 0 .002 0 0zm.002.001V.899C.67.9.67.905.668.902zM.933.891V.886v.005zM.247.879c0-.002.002-.003.002 0-.001.002-.001.002-.002 0zM.252.875c0-.004.007-.006.006-.003v.002C.261.876.251.88.252.875zM.027.87.028.867C.029.87.027.875.027.87zM.032.816.033.813c0-.001-.001.01-.001.003zM.036.815V.813v.002zM.998.546C.997.541 1.001.547 1 .548L.998.546zM.091.393c0-.002.002-.002.002 0 0 .003-.002.002-.002 0zm.023-.03L.113.359C.117.355.136.351.124.36.121.362.117.369.114.363zm-.007 0h.001c.001.002-.001.002-.001 0zM.097.335V.332v.003zM.112.317C.112.309.108.31.113.302.119.292.119.3.117.305v.002C.123.31.117.312.115.311v.004C.114.315.113.323.112.317zM.119.301C.118.297.122.292.12.3c0 .001 0 .002-.001.001zM.1.214c0-.003.001-.002.002 0C.102.217.1.216.1.214zM.112.205C.113.201.113.201.113.204.113.205.11.21.112.205zm.78-.034C.893.169.896.167.897.168c0 .006-.006.003-.005.003zM.889.169c0-.007.005.006 0 0zM.875.166A.211.211 0 0 0 .837.157L.841.15l.001.004C.844.156.845.145.844.152c0 .002 0 .002 0 0C.849.147.855.155.86.155c.005 0 .014.001.019.006 0 .006-.002.008-.004.005zM.852.156C.852.153.85.154.85.156c-.001.002.002.002.002 0zM.882.15C.88.149.881.141.882.148V.15zM.87.142C.869.136.86.144.861.134.863.127.867.141.869.135.87.133.872.133.873.135.874.144.871.15.87.142zm.006.001c.003-.01.002.009 0 0zM.23.128h.001C.232.129.229.13.23.128zM.341.069c0-.005.002.002.001.002L.341.069zM.354.07C.352.062.357.067.356.056.357.049.364.052.363.042.364.035.365.046.366.043.367.035.37.044.37.041V.039C.372.038.372.047.374.047V.04C.379.034.474-.004.45.035c-.009.004.01.003.007.01 0 .001-.008.003-.008.001C.439.043.424.048.415.042a.039.039 0 0 1-.016.007C.398.045.396.049.395.05.395.047.39.048.389.052.388.058.378.062.378.055.377.057.378.064.376.059.375.057.375.057.375.059.375.063.37.06.37.063.369.07.366.059.366.058c0 .003-.001.009-.002.005C.362.062.355.074.354.07zM.346.06c0-.007.002 0 .001.002L.346.06zM.348.057.349.056C.351.057.347.06.348.057zM.539.051c-.004-.002 0-.006.001 0 0 .004 0 .001-.001 0zM.527.047c.002-.002.002-.002.001 0 0 .001-.003.003-.001 0zm.003 0c0-.003.003.003.001.002L.53.047zM.459.042C.457.035.479.039.478.04c.003-.001.003.002 0 .003C.475.045.477.036.475.044.472.051.471.042.469.045.468.047.467.046.468.042.467.04.46.049.459.042zm.045.003c0-.005.002.002.001.002L.504.045zM.482.041c-.002-.004 0-.003 0 0 .001.002.001.002 0 0zM.697.04C.694.034.683.044.68.033L.683.027c.001-.001 0 .01.002.004.002-.007.003.008.003.001 0-.01.003.002.003.001.002-.007.002.003.006 0C.7.034.703.034.703.039.704.042.697.043.697.04zm.009 0c0-.005.008-.003.003.001C.708.043.706.042.706.04zM.667.033C.666.028.662.034.662.033.659.03.651.032.644.028.64.022.632.036.629.028.601.037.582.02.551.023.539.021.485.026.498.008.535-.012.61.011.65.019.655.021.667.017.665.03.666.029.669.028.669.024v.001c0 .005.007-.001.008.002 0 .002.005.002.003.003C.678.03.678.031.679.032.682.035.668.037.667.033zM.506.015C.505.009.504.018.506.018V.015zM.474.022V.019c-.002.003 0-.006 0-.008.001.012.004.011.002 0C.475.005.482.012.482.008c0-.003.004-.004.004 0 0 .002 0 .002.001 0 .002-.004 0 .005 0 .006.001.009.002-.017.004-.008l.001.012C.494.019.492.022.49.022.483.026.483.005.481.014c0 .003.001-.002.001.003C.482.021.48.016.48.02.481.023.472.028.474.022zM.489.014V.012c-.002 0 0 .006 0 .002zM.466.022C.467.016.468.021.468.011.47.012.467.029.466.022zM.47.016c0-.007.002.002 0 .003V.016zM.472.011C.473.007.477.007.476.013.474.008.47.018.472.011zM.465.01h.001C.467.012.464.012.465.01zm.029 0C.492.007.495.008.495.01s0 .002-.001 0zM.491.006C.49 0 .494.011.492.01L.491.006z"/>
</defs>
</svg>
Is it possible to draw cloudy border for rect and polygon using svg-graphics? I tried using patterns in stroke, but it does not work.
I need border like this
Thank you!
You can fake it by using a dashed stroke with an SVG filter applied. Note this will likely slow down your page, so use the filter with caution.
<svg viewBox="0 0 300 500" width="600" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="outline-sobel" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="0.3" result="BLUR" />
<feConvolveMatrix in="BLUR" result="TOP-SOBEL" kernelMatrix="
1 2 1
0 0 0
-1 -2 -1"/>
<feConvolveMatrix in="BLUR" result="BOTTOM-SOBEL" kernelMatrix="
-1 -2 -1
0 0 0
1 2 1"/>
<feConvolveMatrix in="BLUR" result="LEFT-SOBEL" kernelMatrix="
1 0 -1
2 0 -2
1 0 -1"/>
<feConvolveMatrix in="BLUR" result="RIGHT-SOBEL" kernelMatrix="
-1 0 1
-2 0 2
-1 0 1"/>
<feComposite in="LEFT-SOBEL" in2="RIGHT-SOBEL" result="X" />
<feComposite in="TOP-SOBEL" in2="BOTTOM-SOBEL" result="Y" />
<feComposite in="X" in2="Y" />
</filter>
<style>
.cb1{
fill: none;
stroke: tomato;
stroke-width: 10;
}
.cb2{
stroke-dasharray: 2 10;
}
.cb3{
stroke-linecap: round;
stroke-linejoin: round;
}
.cb4{
fill: tomato;
}
.cb5
{
stroke-dasharray: 1 10 .9 10 1.1 10 .8 10 .7 10;
stroke-dashoffset: 4;
filter: url(#outline-sobel);
}
.cb6 {
stroke-width: 5;
stroke-dasharray: 0 5 0.1 5 0 5 ;
}
</style>
</defs>
<rect x="10" y="10" width="80" height="30" class="cb1" />
<rect x="10" y="60" width="80" height="30" class="cb1 cb2" />
<rect x="110" y="10" width="80" height="30" class="cb1 cb2 cb3" />
<rect x="110" y="60" width="80" height="30" class="cb1 cb2 cb3 cb4" />
<rect x="210" y="10" width="80" height="30" class="cb1 cb2 cb3 cb4 cb5" />
<path d="
M210 90
h80
a 10 10 0 0 0 -12 -20
a 18 18 0 0 0 -41 4
a 13 13 0 0 0 -26 14
z"
class="cb1 cb2 cb3 cb4 cb5 cb6" />
</svg>
Play with the values on the stroke-dasharray to get different effects, I've deliberately given a slightly random look.
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
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>