How to modify the stroke width of this SVG spiral path? - html
I am trying to create a spiral path in svg as you can see in the code below but I want the stroke width starting as thicker and ending with a thinner one like this one here . Can someone help ?
<html>
<head>
</head>
<body>
<svg id="mySVG" width="400" height="400">
<path id="Spiral" stroke-width="3" fill="none" stroke="maroon" d="M200 200 S 200.2 200 200.4 200.1 200.6 200.2 200.7 200.4 200.8 200.6 200.9 200.8 200.9 201.1 200.9 201.4 200.8 201.6 200.6 201.9 200.4 202.2 200.2 202.4 199.8 202.6 199.5 202.8 199.1 202.9 198.6 202.9 198.2 202.9 197.7 202.8 197.2 202.6 196.8 202.4 196.3 202 195.9 201.6 195.5 201.1 195.2 200.6 195 200 194.8 199.3 194.8 198.7 194.8 197.9 194.9 197.2 195.1 196.5 195.5 195.8 195.9 195.1 196.5 194.4 197.1 193.8 197.8 193.3 198.7 192.9 199.5 192.6 200.5 192.4 201.5 192.3 202.5 192.4 203.5 192.6 204.5 192.9 205.5 193.4 206.4 194 207.3 194.7 208.1 195.6 208.7 196.5 209.3 197.6 209.7 198.8 210 200 210.1 201.3 210.1 202.6 209.9 203.9 209.5 205.2 208.9 206.5 208.2 207.7 207.3 208.8 206.2 209.8 205 210.7 203.7 211.4 202.3 212 200.8 212.4 199.2 212.6 197.6 212.6 196 212.4 194.4 211.9 192.8 211.3 191.3 210.5 189.9 209.4 188.7 208.2 187.6 206.8 186.6 205.3 185.9 203.6 185.3 201.9 185 200 184.9 198.1 185.1 196.2 185.5 194.3 186.2 192.4 187.1 190.6 188.2 188.9 189.5 187.4 191.1 186 192.8 184.8 194.7 183.8 196.8 183.1 198.9 182.6 201.1 182.4 203.3 182.5 205.6 182.9 207.7 183.5 209.9 184.5 211.9 185.7 213.7 187.1 215.4 188.8 216.8 190.8 218 192.9 219 195.1 219.6 197.5 220 200 220 202.5 219.8 205.1 219.2 207.6 218.2 210 217 212.3 215.5 214.5 213.6 216.5 211.6 218.2 209.3 219.7 206.8 220.9 204.2 221.8 201.4 222.4 198.6 222.6 195.7 222.4 192.9 221.9 190.1 221 187.5 219.8 185 218.2 182.7 216.3 180.6 214.1 178.8 211.7 177.3 209 176.2 206.1 175.4 203.1 175 200 175 196.8 175.4 193.7 176.2 190.6 177.4 187.6 179 184.7 180.9 182.1 183.2 179.7 185.7 177.5 188.6 175.8 191.7 174.3 194.9 173.3 198.3 172.7 201.7 172.5 205.2 172.7 208.7 173.4 212 174.5 215.2 176 218.2 178 221 180.3 223.5 183 225.6 185.9 227.3 189.2 228.7 192.6 229.6 196.3 230 200 230 203.8 229.4 207.6 228.5 211.3 227 214.8 225.1 218.2 222.7 221.4 220 224.2 216.9 226.7 213.5 228.8 209.9 230.4 206 231.6 202 232.3 198 232.5 193.9 232.2 189.8 231.4 185.9 230 182.1 228.2 178.6 225.9 175.4 223.1 172.5 220 170 216.5 168 212.7 166.5 208.6 165.5 204.4 165 200 165.1 195.6 165.7 191.2 166.9 186.9 168.6 182.8 170.9 178.8 173.6 175.2 176.8 172 180.4 169.1 184.3 166.7 188.6 164.8 193 163.5 197.7 162.7 202.4 162.5 207.1 162.9 211.7 163.9 216.3 165.4 220.6 167.6 224.6 170.3 228.3 173.4 231.6 177.1 234.4 181.1 236.6 185.5 238.4 190.2 239.5 195 240 200 239.9 205 239.1 210 237.7 214.9 235.8 219.7 233.2 224.1 230 228.2 226.4 231.9 222.3 235.1 217.8 237.8 213 239.9 207.9 241.5 202.7 242.3 197.3 242.5 192 242 186.7 240.9 181.6 239.1 176.7 236.6 172.2 233.6 168.1 230 164.4 225.9 161.3 221.3 158.7 216.3 156.8 211.1 155.6 205.6 155 200 155.2 194.3 156 188.7 157.6 183.2 159.9 177.9 162.8 173 166.3 168.4 170.4 164.2 175 160.7 180.1 157.7 185.5 155.3 191.2 153.6 197 152.7 203 152.5 209 153 214.8 154.3 220.5 156.4 225.9 159.1 231 162.6 235.6 166.6 239.6 171.2 243.1 176.3 245.9 181.8 248 187.7 249.4 193.8 250 200 249.8 206.3 248.8 212.5 247 218.6 244.5 224.5 241.3 230 237.3 235 232.8 239.6 227.6 243.6 222.1 246.9 216.1 249.5 209.8 251.3 203.3 252.3 196.7 252.5 190.1 251.9 183.6 250.4 177.3 248.1 171.4 245.1 165.8 241.3 160.8 236.8 156.3 231.7 152.5 226.1 149.4 220 147.1 213.6 145.6 206.9 145 200 145.2 193.1 146.3 186.2 148.3 179.5 151.1 173.1 154.7 167.1 159 161.5 164 156.5 169.7 152.2 175.8 148.6 182.4 145.8 189.3 143.8 196.4 142.7 203.6 142.5 210.8 143.2 217.9 144.8 224.8 147.3 231.3 150.7 237.4 154.8 242.9 159.7 247.7 165.3 251.9 171.5 255.2 178.1 257.7 185.2 259.3 192.5 260 200 259.7 207.5 258.5 215 256.3 222.3 253.3 229.3 249.4 235.9 244.6 241.9 239.1 247.3 233 252 226.3 255.9 219.2 259 211.7 261.1 203.9 262.3 196.1 262.5 188.2 261.7 180.5 259.9 173.1 257.2 166 253.5 159.5 249 153.5 243.7 148.2 237.6 143.7 230.9 140.1 223.7 137.4 216.1 135.7 208.1 135 200 135.3 191.8 136.7 183.7 139 175.9 142.3 168.3 146.6 161.2 151.7 154.7 157.7 148.8 164.3 143.8 171.6 139.6 179.3 136.3 187.4 134 195.8 132.7 204.2 132.5 212.7 133.4 221 135.3 229 138.3 236.7 142.2 243.7 147.1 250.2 152.9 255.8 159.4 260.6 166.7 264.5 174.5 267.4 182.7 269.2 191.3 270 200 269.6 208.8 268.2 217.5 265.6 226 262 234.1 257.4 241.7 251.9 248.7 245.5 255 238.4 260.5 230.6 265 222.2 268.5 213.5 270.9 204.5 272.3 195.4 272.5 186.4 271.5 177.4 269.4 168.8 266.2 160.7 262 153.1 256.7 146.2 250.5 140.1 243.5 135 235.7 130.8 227.4 127.7 218.6 125.8 209.4 125 200 125.4 190.6 127 181.2 129.7 172.2 133.6 163.5 138.5 155.3 144.5 147.8 151.3 141.1 159 135.3 167.3 130.5 176.2 126.8 185.5 124.2 195.1 122.8 204.9 122.6 214.6 123.6 224.1 125.8 233.3 129.2 242 133.8 250.1 139.4 257.4 146.1 263.9 153.6 269.4 161.8 273.8 170.8 277.1 180.2 279.2 190 280 200 279.6 210.1 277.9 220 274.9 229.7 270.8 238.9 265.5 247.6 259.2 255.6 251.9 262.7 243.7 268.9 234.8 274 225.3 278 215.4 280.7 205.2 282.2 194.8 282.4 184.5 281.3 174.4 278.9 164.6 275.3 155.3 270.4 146.7 264.4 138.9 257.4 132 249.4 126.2 240.6 121.5 231.1 118.1 221 115.9 210.6 115 200 115.5 189.3 117.3 178.8 120.4 168.5 124.8 158.7 130.4 149.5 137.2 141 144.9 133.4 153.6 126.9 163 121.5 173.1 117.3 183.7 114.3 194.5 112.8 205.5 112.6 216.5 113.8 227.2 116.3 237.6 120.2 247.4 125.4 256.5 131.7 264.7 139.2 272 147.7 278.2 157 283.1 167.1 286.8 177.7 289.1 188.7 290 200 289.5 211.3 287.6 222.5 284.2 233.4 279.6 243.7 273.6 253.5 266.5 262.4 258.3 270.4 249.1 277.3 239.1 283.1 228.4 287.5 217.3 290.6 205.8 292.2 194.2 292.4 182.6 291.2 171.3 288.4 160.3 284.3 150 278.9 140.3 272.1 131.6 264.2 124 255.3 117.5 245.4 112.2 234.8 108.4 223.5 105.9 211.9 105 200 105.6 188.1 107.6 176.3 111.1 164.8 116 153.8 122.3 143.6 129.9 134.1 138.6 125.7 148.2 118.4 158.8 112.4 170 107.7 181.8 104.5 193.9 102.8 206.1 102.6 218.3 103.9 230.3 106.8 241.8 111.1 252.7 116.9 262.9 124 272 132.4 280.1 141.8 286.9 152.2 292.4 163.4 296.5 175.2 299 187.5 299 187.5 "></path>
</svg>
</body>
</html>
SVG paths can't have variable width strokes. You would need to either:
Don't use strokes. Instead use a filled path that spirals in and gets narrower as it does, or
Use a sequence of lines or paths that line up with one another. Each successive path would have a slighlty narrower stroke-width. Giving the illusion of a continuous path with a narrowing width.
Like the followong example:
<svg stroke="black">
<path d="M 0,75 L 50,75" stroke-width="10"/>
<path d="M 50,75 L 100,75" stroke-width="9"/>
<path d="M 100,75 L 150,75" stroke-width="8"/>
<path d="M 150,75 L 200,75" stroke-width="7"/>
<path d="M 200,75 L 250,75" stroke-width="6"/>
<path d="M 250,75 L 300,75" stroke-width="5"/>
</svg>
Related
How to morph svg into another svg correctly with Anime.js?
I have a problem where two of my svg have the same number of points, but something isn't right when I play the animation, the two svgs are so close together but the animation just jumps out of nowhere and it isn't right, a weird shape happens before the first svg changes to the second.
I'm doing the svgs in Adobe XD. Here is the code:
<svg id="morph" viewBox="0 0 1920 540">
<path class="morph" d="m864.216 135.95 36.39 41.917S780.519 307.11 1078.914 373.479s221.979-87.327 221.979-87.327l32.75-34.931s25.473 101.3 207.422 34.931 440.314 150.2 411.2 380.744S34.528 576.079 34.528 576.079s-3.64-429.647 342.063-509.987 272.923 174.653 487.623 69.861"/>
</svg>
<script>
var overlay = document.getElementById('morph');
var morphing = anime({
targets: '.morph',
d: [
{value : "m864.216 135.95 36.39 41.917S780.519 307.11 1078.914 373.479s221.979-87.327 221.979-87.327l32.75-34.931s25.473 101.3 207.422 34.931 440.314 150.2 411.2 380.744S34.528 576.079 34.528 576.079s-3.64-429.647 342.063-509.987 272.923 174.653 487.623 69.861"},
{value: "M2.49 576.483S20.535 398.736 122.472 239.61s236.674-199.127 302-217.883c176.407-41.244 334 45.685 334 45.685l340 233.7s172 105.427 280 119.484 322 12.3 322 12.3 118 5.271 160 61.5 56 89.613 62 117.727S2.49 576.483 2.49 576.483Z"},
],
duration: 1200,
loop: false,
easing: 'easeInOutQuint'
})
</script>
Your paths still need some optimizations to be fully compatible for interpolation.
Most animation libraries try to make paths compatible to some extent (e.g by converting them to polygons like in flubber.js).
But usually you'll get the best results cleaning up your paths manually.
step 1
step 2
m 864.216 135.95
M 2.49 576.483
l 36.39 41.917
S 20.535 398.736 122.472 239.61
S 780.519 307.11 1078.914 373.479
s 236.674 -199.127 302-217.883
s 221.979 -87.327 221.979 -87.327
c 176.407 -41.244 334 45.685 334 45.685
l 32.75 -34.931
l 340 233.7
s 25.473 101.3 207.422 34.931
s 172 105.427 280 119.484
s 440.314 150.2 411.2 380.744
s 322 12.3 322 12.3
S 34.528 576.079 34.528 576.079
s 118 5.271 160 61.5
s -3.64 -429.647 342.063-509.987
s 56 89.613 62 117.727
s 272.923 174.653 487.623 69.861
S 2.49 576.483 2.49 576.483
Z
Your command types also need to be compatible.
E.g. The second animation step has only one l (lineTo) command and a Z (closePath) missing in the first path.
Unfortunately, you can't be sure your editor/graphic app will output the same commands as it might decide to use shorthand commands (like h for horizontal lineTos )to minify the markup.
Normalize d to a reduced set of commands
This will simplify the further adjustments by converting path data to M, C, L and Z commands.
I'm using Jarek Foksa's getPathData polyfill.
path.getPathData({normalize: true});
{normalize: true} Parameter will also convert all commands to absolute coordinates.
Convert L commands to C
You can easily convert L commands to C curves by repeating the x/y coordinates like this.
L 901 178
to:
C 901 178 901 178 901 178
Adjust M starting points
Set the starting point to something like the leftmost corner/point. So your paths will be interpolated using a visual reference point.
Otherwise you might get weird flipping transitions.
Changing the M of a path is also way easier with absolute and normalized commands. You'll also find a helper function in the snippet
(1. path data chunk
=> will be appended after the second chunk)
M 864 136 (old starting point => will be deleted)
C 901 178 901 178 901 178
C 901 178 781 307 1079 373
C 1377 440 1301 286 1301 286
C 1334 251 1334 251 1334 251
C 1334 251 1359 353 1541 286
C 1723 220 1981 436 1952 667
C 1923 897 35 576 35 576 => will become the new M xy coordinate
(2. path data chunk)
C 35 576 31 146 377 66
C 722 -14 650 241 864 136
(3. path data chunk: closePath)
Z
Result:
M 35 576
C 35 576 31 146 377 66
C 722 -14 650 241 864 136
C 901 178 901 178 901 178
C 901 178 781 307 1079 373
C 1377 440 1301 286 1301 286
C 1334 251 1334 251 1334 251
C 1334 251 1359 353 1541 286
C 1723 220 1981 436 1952 667
C 1923 897 35 576 35 576
Z
Path direction
In your case both paths have a clockwise direction.
If you encounter weird flipping transitions you can try to reverse path directions.
You might use #enxaneta's great codepen example or
Svg Path commander Library.
Example 1: Normalize and change starting point (including helpers)
let svgNorm = document.querySelectorAll('.svgNorm');
svgNorm.forEach(function(svg) {
let svgPaths = svg.querySelectorAll('path');
normalizePaths(svgPaths, 0, true);
})
let orig1 = document.querySelector('.orig1');
let orig2 = document.querySelector('.orig2');
let path1 = document.querySelector('.morph1');
let path2 = document.querySelector('.morph2');
//shift starting point
shiftSvgStartingPoint(path1, 7);
//show starting points
addMarkers(orig1);
addMarkers(orig2);
addMarkers(path1);
addMarkers(path2);
function normalizePaths(paths, decimals = 1, convertLineto = false) {
paths.forEach(function(path, i) {
let pathData = path.getPathData({
normalize: true
});
pathData.forEach(function(com) {
let [type, values] = [com['type'], com['values']];
values.forEach(function(coord, c) {
com['values'][c] = +(com['values'][c]).toFixed(decimals)
})
let [x, y] = [com['values'][0], com['values'][1]];
if (type == 'L' && convertLineto) {
com['type'] = 'C';
com['values'] = [x, y, x, y, x, y];
}
})
path.setPathData(pathData)
})
}
function shiftSvgStartingPoint(path, offset) {
let pathData = path.getPathData({
normalize: true
});
let pathDataL = pathData.length;
//exclude Z/z (closepath) command if present
let lastCommand = (pathData[pathDataL - 1]['type']);
let trimR = 0;
if (lastCommand == 'Z') {
trimR = 1;
}
let newStartIndex = offset + 1 < pathData.length - 1 ? offset + 1 : pathData.length - 1 - trimR;
let newPathData = pathData;
let newPathDataL = newPathData.length;
// slice array to reorder
let newPathDataStart = newPathData.slice(newStartIndex);
let newPathDataEnd = newPathData.slice(0, newStartIndex);
// remove original M
newPathDataEnd.shift();
let newPathDataEndL = newPathDataEnd.length;
let newPathDataEndLastValues = newPathDataEnd[newPathDataEndL - 1]['values'];
let newPathDataEndLastXY = [newPathDataEndLastValues[newPathDataEndLastValues.length - 2],
newPathDataEndLastValues[newPathDataEndLastValues.length - 1]
];
//remove z(close path) from original pathdata array
if (trimR) {
newPathDataStart.pop();
newPathDataEnd.push({
'type': 'Z',
'values': []
});
}
// prepend new M command and concatenate array chunks
newPathData = [{
'type': 'M',
'values': newPathDataEndLastXY
}].concat(newPathDataStart).concat(newPathDataEnd);
// update path's d property
path.setPathData(newPathData);
return path;
}
testInterpolation(path1, path2);
function testInterpolation(path1, path2) {
path1.addEventListener('click', function(e) {
if (!path1.getAttribute('style')) {
path1.setAttribute('style', `d:path("${path2.getAttribute('d')}")`)
} else {
path1.removeAttribute('style');
}
})
}
function addMarkers(path) {
let svg = path.closest('svg');
let markerDef = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
let marker =
`<marker id="circle" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="10%" markerHeight="10%"
orient="auto-start-reverse">
<circle cx="5" cy="5" r="5" fill="green" />
</marker>`;
markerDef.innerHTML = marker;
svg.insertBefore(markerDef, svg.childNodes[0]);
path.setAttribute('marker-start', 'url(#circle)');
}
svg {
display: inline-block;
width: 30%;
overflow: visible;
border: 1px solid #ccc;
margin-right: 5%;
}
.row {
margin-top: 4em;
}
path {
opacity: 0.5;
transition: 0.5s;
}
<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill#1.0.3/path-data-polyfill.min.js"></script>
<div>
<p>Green points illustrate starting points</p>
<svg viewBox="0 0 1920 540">
<path class="orig1" d="
m 864.216 135.95
l 36.39 41.917
S 780.519 307.11 1078.914 373.479
s 221.979 -87.327 221.979 -87.327
l 32.75 -34.931
s 25.473 101.3 207.422 34.931
s 440.314 150.2 411.2 380.744
S 34.528 576.079 34.528 576.079
s -3.64 -429.647 342.063-509.987
s 272.923 174.653 487.623 69.861
z" />
</svg>
<svg viewBox="0 0 1920 540">
<path class="orig2" d="
M 2.49 576.483
S 20.535 398.736 122.472 239.61
s 236.674 -199.127 302-217.883
c 176.407 -41.244 334 45.685 334 45.685
l 340 233.7
s 172 105.427 280 119.484
s 322 12.3 322 12.3
s 118 5.271 160 61.5
s 56 89.613 62 117.727
S 2.49 576.483 2.49 576.483
Z" />
</svg>
</div>
<div class="row">
<svg class="svgNorm" viewBox="0 0 1920 540">
<path class="morph1"
d="
m 864.216 135.95
l 36.39 41.917
S 780.519 307.11 1078.914 373.479
s 221.979 -87.327 221.979 -87.327
l 32.75 -34.931
s 25.473 101.3 207.422 34.931
s 440.314 150.2 411.2 380.744
S 34.528 576.079 34.528 576.079
s -3.64 -429.647 342.063-509.987
s 272.923 174.653 487.623 69.861
z" />
</svg>
<svg class="svgNorm" viewBox="0 0 1920 540">
<path class="morph2"
d="
M 2.49 576.483
S 20.535 398.736 122.472 239.61
s 236.674 -199.127 302-217.883
c 176.407 -41.244 334 45.685 334 45.685
l 340 233.7
s 172 105.427 280 119.484
s 322 12.3 322 12.3
s 118 5.271 160 61.5
s 56 89.613 62 117.727
S 2.49 576.483 2.49 576.483
Z" />
</svg>
<p>Click on the left path to see morphing animation. <br />Inspect this path in DevTools to get new compatible path data.</p>
</div>
Example 2: morph optimized paths with anime.js
var morphing = anime({
targets: ".morph",
d: [
{
value:
"M 2 576 C 2 576 21 399 122 240 C 224 80 359 40 424 22 C 601 -20 758 67 758 67 C 1098 301 1098 301 1098 301 C 1098 301 1270 407 1378 421 C 1486 435 1700 433 1700 433 C 1700 433 1818 438 1860 494 C 1902 551 1916 584 1922 612 C 1928 640 2 576 2 576 Z"
}
],
duration: 1200,
loop: false,
easing: "easeInOutQuint"
});
svg{
display:inline-block;
width:20em;
overflow:visible;
}
.morph{
transition:0.5s;
}
.morphPoly{
transition:0.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<svg id="morph" viewBox="0 0 1920 540">
<path class="morph" d="M 35 576 C 35 576 31 146 377 66 C 722 -14 650 241 864 136 C 901 178 901 178 901 178 C 901 178 781 307 1079 373 C 1377 440 1301 286 1301 286 C 1334 251 1334 251 1334 251 C 1334 251 1359 353 1541 286 C 1723 220 1981 436 1952 667 C 1923 897 35 576 35 576 Z" />
</svg>
... Quite a lot of work.
But once your paths are super compatible you can also morph between shapes via plain css. (E.g by animating/transitioning d:path() properties).
How to center rect box with an svg
I am trying to center this wrench svg inside the rect box but I am having no luck, any thoughts. Basically Id like to center the wrench icon in the rect box. <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <rect width="32" height="32" rx="4" /> <path d="M15.0799 1.85914C14.4167 1.71925 13.7291 1.70835 13.0553 1.83113C12.0053 2.02243 11.0387 2.52916 10.284 3.28379C9.5294 4.03842 9.02267 5.00511 8.83137 6.05503C8.64007 7.10495 8.77329 8.18824 9.21327 9.16053C9.34197 9.44494 9.28105 9.77933 9.06031 10.0001L2.15031 16.9101C1.89313 17.1672 1.74866 17.516 1.74866 17.8797C1.74866 18.2434 1.89314 18.5922 2.15031 18.8494C2.40748 19.1066 2.75628 19.2511 3.11998 19.2511C3.48367 19.2511 3.83247 19.1066 4.08965 18.8494L10.9996 11.9394C11.2204 11.7187 11.5548 11.6577 11.8392 11.7864C12.8115 12.2264 13.8948 12.3596 14.9447 12.1683C15.9946 11.977 16.9613 11.4703 17.7159 10.7157C18.4706 9.96106 18.9773 8.99437 19.1686 7.94444C19.2914 7.27058 19.2805 6.58298 19.1406 5.9198L16.225 8.83537C15.8979 9.15602 15.458 9.33559 15 9.33559C14.5419 9.33559 14.1021 9.15599 13.775 8.83534L13.7696 8.83009L12.1643 7.22476C11.8437 6.89764 11.6641 6.45781 11.6641 5.99974C11.6641 5.54167 11.8437 5.10186 12.1644 4.77474L12.1696 4.76938L15.0799 1.85914ZM12.7864 0.355426C14.1363 0.109471 15.5291 0.280751 16.7792 0.846441C17.0035 0.947945 17.1637 1.15308 17.2078 1.3953C17.252 1.63752 17.1744 1.88597 17.0003 2.06007L13.2339 5.82652C13.1891 5.87306 13.1641 5.93513 13.1641 5.99974C13.1641 6.06434 13.1891 6.1264 13.2338 6.17294L14.8268 7.76588C14.8733 7.81059 14.9354 7.83559 15 7.83559C15.0646 7.83559 15.1266 7.81059 15.1732 7.76589L18.9396 3.99941C19.1137 3.82531 19.3622 3.74775 19.6044 3.79188C19.8466 3.83602 20.0518 3.99622 20.1533 4.22053C20.719 5.47062 20.8902 6.86342 20.6443 8.21332C20.3983 9.56322 19.7468 10.8061 18.7766 11.7763C17.8063 12.7466 16.5635 13.3981 15.2136 13.644C14.037 13.8584 12.8278 13.7558 11.709 13.3514L5.15031 19.9101C4.61183 20.4485 3.8815 20.7511 3.11998 20.7511C2.35846 20.7511 1.62812 20.4485 1.08965 19.9101C0.55117 19.3716 0.248657 18.6413 0.248657 17.8797C0.248657 17.1182 0.551171 16.3879 1.08965 15.8494L7.64833 9.29073C7.24389 8.17188 7.14129 6.96272 7.35567 5.78615C7.60162 4.43625 8.25313 3.19337 9.22337 2.22313C10.1936 1.25289 11.4365 0.601381 12.7864 0.355426Z" fill="#A0AEC0"/> </svg>
One way is to use transform on the path: <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <rect width="32" height="32" rx="4" /> <path transform="translate(5, 5)" d="M15.0799 1.85914C14.4167 1.71925 13.7291 1.70835 13.0553 1.83113C12.0053 2.02243 11.0387 2.52916 10.284 3.28379C9.5294 4.03842 9.02267 5.00511 8.83137 6.05503C8.64007 7.10495 8.77329 8.18824 9.21327 9.16053C9.34197 9.44494 9.28105 9.77933 9.06031 10.0001L2.15031 16.9101C1.89313 17.1672 1.74866 17.516 1.74866 17.8797C1.74866 18.2434 1.89314 18.5922 2.15031 18.8494C2.40748 19.1066 2.75628 19.2511 3.11998 19.2511C3.48367 19.2511 3.83247 19.1066 4.08965 18.8494L10.9996 11.9394C11.2204 11.7187 11.5548 11.6577 11.8392 11.7864C12.8115 12.2264 13.8948 12.3596 14.9447 12.1683C15.9946 11.977 16.9613 11.4703 17.7159 10.7157C18.4706 9.96106 18.9773 8.99437 19.1686 7.94444C19.2914 7.27058 19.2805 6.58298 19.1406 5.9198L16.225 8.83537C15.8979 9.15602 15.458 9.33559 15 9.33559C14.5419 9.33559 14.1021 9.15599 13.775 8.83534L13.7696 8.83009L12.1643 7.22476C11.8437 6.89764 11.6641 6.45781 11.6641 5.99974C11.6641 5.54167 11.8437 5.10186 12.1644 4.77474L12.1696 4.76938L15.0799 1.85914ZM12.7864 0.355426C14.1363 0.109471 15.5291 0.280751 16.7792 0.846441C17.0035 0.947945 17.1637 1.15308 17.2078 1.3953C17.252 1.63752 17.1744 1.88597 17.0003 2.06007L13.2339 5.82652C13.1891 5.87306 13.1641 5.93513 13.1641 5.99974C13.1641 6.06434 13.1891 6.1264 13.2338 6.17294L14.8268 7.76588C14.8733 7.81059 14.9354 7.83559 15 7.83559C15.0646 7.83559 15.1266 7.81059 15.1732 7.76589L18.9396 3.99941C19.1137 3.82531 19.3622 3.74775 19.6044 3.79188C19.8466 3.83602 20.0518 3.99622 20.1533 4.22053C20.719 5.47062 20.8902 6.86342 20.6443 8.21332C20.3983 9.56322 19.7468 10.8061 18.7766 11.7763C17.8063 12.7466 16.5635 13.3981 15.2136 13.644C14.037 13.8584 12.8278 13.7558 11.709 13.3514L5.15031 19.9101C4.61183 20.4485 3.8815 20.7511 3.11998 20.7511C2.35846 20.7511 1.62812 20.4485 1.08965 19.9101C0.55117 19.3716 0.248657 18.6413 0.248657 17.8797C0.248657 17.1182 0.551171 16.3879 1.08965 15.8494L7.64833 9.29073C7.24389 8.17188 7.14129 6.96272 7.35567 5.78615C7.60162 4.43625 8.25313 3.19337 9.22337 2.22313C10.1936 1.25289 11.4365 0.601381 12.7864 0.355426Z" fill="#A0AEC0"/> </svg>
You could also move your icon by changing the actual d path commands. This will require to convert your path commands to relative. This could be done e.g with Yann Armelin's SvgPathEditor Once all comannds are relative, you just have to change the first M x/y coordinates. <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <rect width="32" height="32" rx="4" /> <path d="M20.08 6.86 c -0.66 -0.14 -1.35 -0.15 -2.02 -0.03 c -1.05 0.19 -2.02 0.7 -2.77 1.45 c -0.75 0.75 -1.26 1.72 -1.45 2.77 c -0.19 1.05 -0.06 2.13 0.38 3.11 c 0.13 0.28 0.07 0.62 -0.15 0.84 l -6.91 6.91 c -0.26 0.26 -0.4 0.61 -0.4 0.97 c 0 0.36 0.14 0.71 0.4 0.97 c 0.26 0.26 0.61 0.4 0.97 0.4 c 0.36 0 0.71 -0.14 0.97 -0.4 l 6.91 -6.91 c 0.22 -0.22 0.56 -0.28 0.84 -0.15 c 0.97 0.44 2.06 0.57 3.11 0.38 c 1.05 -0.19 2.02 -0.7 2.77 -1.45 c 0.75 -0.75 1.26 -1.72 1.45 -2.77 c 0.12 -0.67 0.11 -1.36 -0.03 -2.02 l -2.92 2.92 c -0.33 0.32 -0.77 0.5 -1.23 0.5 c -0.46 0 -0.9 -0.18 -1.22 -0.5 l -0.01 -0.01 l -1.61 -1.61 c -0.32 -0.33 -0.5 -0.77 -0.5 -1.23 c 0 -0.46 0.18 -0.9 0.5 -1.22 l 0.01 -0.01 l 2.91 -2.91 z m -2.29 -1.5 c 1.35 -0.25 2.74 -0.07 3.99 0.49 c 0.22 0.1 0.38 0.31 0.43 0.55 c 0.04 0.24 -0.03 0.49 -0.21 0.66 l -3.77 3.77 c -0.04 0.05 -0.07 0.11 -0.07 0.17 c 0 0.06 0.03 0.13 0.07 0.17 l 1.59 1.59 c 0.05 0.04 0.11 0.07 0.17 0.07 c 0.06 0 0.13 -0.02 0.17 -0.07 l 3.77 -3.77 c 0.17 -0.17 0.42 -0.25 0.66 -0.21 c 0.24 0.04 0.45 0.2 0.55 0.43 c 0.57 1.25 0.74 2.64 0.49 3.99 c -0.25 1.35 -0.9 2.59 -1.87 3.56 c -0.97 0.97 -2.21 1.62 -3.56 1.87 c -1.18 0.21 -2.39 0.11 -3.5 -0.29 l -6.56 6.56 c -0.54 0.54 -1.27 0.84 -2.03 0.84 c -0.76 0 -1.49 -0.3 -2.03 -0.84 c -0.54 -0.54 -0.84 -1.27 -0.84 -2.03 c 0 -0.76 0.3 -1.49 0.84 -2.03 l 6.56 -6.56 c -0.4 -1.12 -0.51 -2.33 -0.29 -3.5 c 0.25 -1.35 0.9 -2.59 1.87 -3.56 c 0.97 -0.97 2.21 -1.62 3.56 -1.87 z" fill="#A0AEC0"/> </svg> Other benefits: usually you can decrease the svg file size using relative commands some graphic apps might already added unnecessarily transforms (like scale(1 1), rotate(0) etc): you can keep your svg more slick and readable Also described by Lea Verou.
Why the actual size of some svg is different from what it looks like
I want to create an icon font from SVG files. I'm using https://www.fluttericon.com/ to do that. But when I create a dot-3 icon, there is a problem: The icon size is too large, and exceeds the normal icon size. Here's the preview of the wrong icon: And here's the preview of the normal icon: Obviously, each dot of the wrong icon is the size of a whole normal icon, so three dots would exceed the size of a normal icon But the two SVG files are not clearly distinguishable in the SVG generator. I don't know why there's a difference between them. Here's the code: The wrong one: <svg xmlns="http://www.w3.org/2000/svg" width="45" height="9"> <g> <path d="M40.5,9A4.582,4.582,0,0,1,36,4.5,4.671,4.671,0,0,1,40.5,0,4.582,4.582,0,0,1,45,4.5,4.5,4.5,0,0,1,40.5,9Zm-18,0A4.583,4.583,0,0,1,18,4.5,4.672,4.672,0,0,1,22.5,0,4.583,4.583,0,0,1,27,4.5,4.5,4.5,0,0,1,22.5,9ZM4.5,9A4.582,4.582,0,0,1,0,4.5,4.671,4.671,0,0,1,4.5,0,4.582,4.582,0,0,1,9,4.5,4.5,4.5,0,0,1,4.5,9Z"/> </g> </svg> The right one: <svg height="1000px" width="920px" xmlns="http://www.w3.org/2000/svg"> <g> <path d="M110 390c30.667 0 56.667 10.667 78 32c21.333 21.333 32 47.333 32 78c0 29.333 -10.667 55 -32 77c-21.333 22 -47.333 33 -78 33c-30.667 0 -56.667 -11 -78 -33c-21.333 -22 -32 -47.667 -32 -77c0 -30.667 10.667 -56.667 32 -78c21.333 -21.333 47.333 -32 78 -32c0 0 0 0 0 0m350 0c30.667 0 56.667 10.667 78 32c21.333 21.333 32 47.333 32 78c0 29.333 -11 55 -33 77c-22 22 -47.667 33 -77 33c-29.333 0 -55 -11 -77 -33c-22 -22 -33 -47.667 -33 -77c0 -30.667 10.667 -56.667 32 -78c21.333 -21.333 47.333 -32 78 -32c0 0 0 0 0 0m350 0c30.667 0 56.667 10.667 78 32c21.333 21.333 32 47.333 32 78c0 29.333 -10.667 55 -32 77c-21.333 22 -47.333 33 -78 33c-30.667 0 -56.667 -11 -78 -33c-21.333 -22 -32 -47.667 -32 -77c0 -30.667 10.667 -56.667 32 -78c21.333 -21.333 47.333 -32 78 -32c0 0 0 0 0 0" /> </g> </svg>
How to keep original position when using CSS transform scale?
I want to create a map in svg. What I am trying to accomplish is to have elements which will increase in size when hovered.
The problem is that my svg elements do not remain in the center after scaling. How to modify my CSS code to make elements increase in size and but to keep original center position?
Is there any error in my code?
Here's my website.
Thank you!
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
position: relative;
display: flex;
justify-content: center;
}
svg {
width: 60%;
}
polygon,
circle,
rect,
path {
position: absolute;
transition: 0.3s;
cursor: pointer;
}
polygon:hover,
polygon:hover,
circle:hover,
rect:hover,
path:hover {
transform: scale(1.05, 1.05);
transform-origin: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="mapp.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100%" height="100%" viewBox="0 0 2945 2058" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>平面圖</title>
<g class="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="平面圖">
<path
d="M348,359 L628,244 L626,230 L749,198 L853,172 L984,145 L1146,141 L1240,190 L1318,189 L1325,151 L1414,151 L1578,114 L1759,37 L1910,0 L2069,1 L2080,13 L2134,26 L2183,14 L2247,12 L2252,1 L2325,34 L2338,77 L2372,116 L2416,206 L2462,213 L2478,202 L2515,210 L2529,224 L2529,255 L2580,290 L2665,283 L2680,292 L2657,402 L2687,436 L2714,442 L2771,403 L2794,400 L2848,454 L2849,482 L2840,494 C2840,494 2902.13,497.982 2908,693 C2913.87,888.018 2916,1079 2916,1079 L2945,1473 C2945,1473 2928.91,1707.92 2784,1753 C2639.09,1798.08 2563,1774 2563,1774 L2443,1704 L2355,1675 L1981,1682 L1778,1695 L1575,1722 L1533,1727 L1528,1742 L1460,1778 L1435,1745 L1386,1767 L1370,1735 L1312,1759 L1262,1808 L1272,1822 L1231,1861 L1109,1887 L1074,1854 L975,1846 L937,1831 L775,1823 L734,1892 L720,1905 L639,1896 L646,1885 L612,1879 L590,1874 L590,1863 L602,1867 L653,1756 L492,1663 L421,1725 L411,1714 L444,1682 L445,1661 L456,1638 L370,1595 L285,1524 L190,1493 L135,1489 L0,1225 L81,1134 L138,963 L163,954 L151,936 L227,778 L257,768 L278,785 L411,661 L399,616 L370,599 L337,597 L296,576 L329,496 L313,460 L348,359 Z"
class="ground-basic" fill="#3930C3"></path>
<path
d="M786,352 L733,352 L733,270 L1965,261 L2089,273 L2468,381 L2573,381 L2573,393 L2594,401 L2594,418 L2802,472 C2802,472 2812.86,472.054 2834,487 C2855.14,501.946 2862.49,506.623 2871,520 C2879.51,533.377 2888.77,538.281 2894,558 C2899.23,577.719 2902.95,569.475 2906,604 C2909.05,638.525 2920,1069 2920,1069 L2939,1476 C2939,1476 2949.29,1577.41 2914,1674 C2878.71,1770.59 2861.38,1741.28 2866,1821 C2870.62,1900.72 2899,1973 2899,1973 L2794,2000 L2758,1832 L2567,1866 L2610,2057 L2584,2058 C2584,2058 2539.64,1884.37 2522,1883 C2504.36,1881.63 2439,1900 2439,1900 L2268,1936 C2268,1936 2007.7,1964.14 1958,1930 C1908.3,1895.86 1808.73,1822.51 1782,1762 C1755.27,1701.49 1747.64,1660.95 1728,1655 C1708.36,1649.05 868,1655 868,1655 C868,1655 830.145,1653.57 810,1701 C789.855,1748.43 724,1895 724,1895 L639,1896 L801,1586 L801,1449 L757,1396 L216,1396 L218,1367 L129,1326 L129,1165 L149,1081 L550,697 L680,695 L672,749 L580,751 L407,901 L678,901 L678,965 L641,967 L640,942 L380,942 L201,1118 L179,1169 L179,1294 L213,1317 L341,1317 L371,1280 L507,1280 L557,1307 L841,1306 C841,1306 928.587,1279.64 935,1236 C941.413,1192.36 998,1209 998,1209 C998,1209 1004.84,1262.39 1030,1270 C1055.16,1277.61 1230,1282 1230,1282 L1248,1264 L1342,1261 L1366,1284 L1693,1275 C1693,1275 1719.63,1314.82 1732,1261 C1744.37,1207.18 1746,1166 1746,1166 L1582,1160 L1541,1127 L1563,1118 L1598,1118 L1754,1125 L1802,1082 L1804,962 L1814,877 L1863,871 L1879,908 L1879,965 L2306,965 L2343,928 L2421,928 L2435,914 L2461,914 L2461,968 L2381,968 L2381,985 L2598,985 L2619,964 L2671,964 L2691,984 L2672,1017 L2609,1024 L2588,1013 L2286,1013 C2286,1013 2266.94,1016.47 2268,1035 C2269.06,1053.53 2269,1086 2269,1086 L2130,1088 L2119,1021 L1899,1024 L1804,1161 L1804,1239 L1821,1264 L1821,1341 L1777,1380 L1777,1571 C1777,1571 1760.53,1595.69 1868,1596 C1975.47,1596.31 2349,1572 2349,1572 L2354,1674 L2560,1759 C2560,1759 2736.83,1805.67 2792,1713 C2847.17,1620.33 2865.83,1566.82 2869,1534 C2872.17,1501.18 2867,1416 2867,1416 L2855,1412 L2866,1256 L2837,1102 L2866,1076 L2841,860 L2837,636 C2837,636 2826.02,572.553 2791,553 C2755.98,533.447 2504,466 2504,466 L2016,326 L785,333 L786,352 Z"
class="road" fill="#FFFFFF"></path>
<rect class="ground-lake" fill="#3930C3" fill-rule="nonzero" x="850" y="1381" width="881"
height="184" rx="50">
</rect>
<polygon class="center" fill="#FF575F"
points="1945 1088 1945 1365 2078 1365 2078 1336 2237 1336 2237 1561 2353 1561 2353 1043 2287 1043 2287 1093">
</polygon>
<polygon class="dorm-b" fill="#FF575F"
points="1639 390 1622 390 1621 444 1633 445 1632 539 1984 539 1984 446 1996 446 1996 390 1984 390 1984 381 1947 381 1947 394 1920 394 1920 365 1863 365 1863 348 1824 348 1824 368 1765 368 1743 377 1743 389 1702 389">
</polygon>
<polygon class="dorm-a" fill="#FF575F" points="459 522 1031 522 1031 407 1134 407 1133 354 458 349">
</polygon>
<polygon class="manageBuilding" fill="#FF575F"
points="670 695 670 836 664 836 664 884 673 884 673 902 845 902 851 911 1208 911 1208 847 1221 847 1221 780 1209 780 1209 750 1070 750 1070 733 839 733 839 743 803 743 803 711 937 711 937 697">
</polygon>
<path
d="M1332,784 L1468,784 C1468,784 1470.32,752.959 1502,752.999959 C1533.68,753.041 1535,783 1535,783 L1551,783 L1551,845 L1566,845 L1566,872 L1551,872 L1551,910 L1364,910 L1364,878 L1332,878 L1332,784 Z"
class="library" fill="#FF575F"></path>
<polygon class="engineerBuildibg" fill="#FF575F"
points="1584 768 1587 754 1846 754 1892 859 1879 875 1811 875 1811 952 1802 968 1802 1073 1766 1121 1610 1121 1586 1111 1586 1025 1573 1023 1573 945 1563 945 1563 886 1589 886">
</polygon>
<polygon class="1st" fill="#FF575F"
points="1369 1154 1046 1154 1046 1088 1028 1088 1028 1052 1046 1052 1046 1028 1219 1028 1219 938 1494 938 1494 915 1552 915 1552 993 1568 993 1568 1037 1555 1037 1555 1066 1417 1066 1417 1152">
</polygon>
<circle class="museum" fill="#FF575F" fill-rule="nonzero" cx="624" cy="1211" r="90"></circle>
<polygon class="dorm-c" fill="#FF575F"
points="2476 740 2476 917 2742 917 2742 739 2685 739 2685 747 2638 747 2638 741"></polygon>
<polygon class="dorm-c" fill="#FF575F"
points="2466 916 2393 916 2393 733 2447 733 2447 760 2469 760 2469 784 2449 784 2449 859 2461 859 2461 888 2468 888">
</polygon>
<polygon class="dorm-c" fill="#FF575F"
points="2427 660 2427 712 2477 712 2477 733 2506 733 2506 697 2605 697 2605 730 2636 730 2636 713 2684 713 2684 732 2740 732 2740 694 2688 694 2688 663 2638 663 2638 644 2479 644 2479 659">
</polygon>
<path
d="M1353,1390 L1353,1528 L1379,1552 L1671,1552 C1671,1552 1691.78,1559.48 1709,1538 C1726.22,1516.52 1719,1471 1719,1471 L1720,1429 C1720,1429 1724.97,1415.73 1708,1402 C1691.03,1388.27 1665.52,1389.25 1653,1389 C1640.48,1388.75 1353,1390 1353,1390 Z"
class="grandpa" fill="#FF575F"></path>
<path
d="M1020,1447 C1053.09,1447 1100.48,1422.13 1127,1426 C1168.86,1432.11 1176,1442.79 1176,1458 C1176,1473.78 1170.21,1487.97 1128,1496 C1103.74,1500.62 1068.14,1493 1037,1493 C1008.51,1493 944.913,1533.92 922,1530 C876.282,1522.19 875,1500.56 875,1484 C875,1470.08 888.992,1451.32 921,1445 C946.145,1440.03 982.46,1447 1020,1447 Z"
class="lake" fill="#FF575F"></path>
<path
d="M408,971 L423,961 L628,961 L638,956 L688,956 L688,983 L681,983 L681,1119 L643,1119 L643,1105 L623,1105 L623,1115 C623,1115 562.522,1117.86 544,1150 C525.478,1182.14 523.671,1191.1 524,1226 C524.329,1260.9 524,1272 524,1272 L459,1272 L459,1293 L434,1293 L434,1272 L196,1272 L196,1212 L229,1212 L229,1113 L347,1113 L347,1036 L355,1024 L331,1008 L334,999 L348,1001 L347,988 L385,948 L408,971 Z"
class="2en" fill="#FF575F"></path>
<path
d="M2154,948 L2156,649 L2141,645 L2142,626 C2142,626 2158.27,624.736 2164,631 C2169.73,637.264 2171.81,635.591 2172,646 C2172.19,656.409 2172,949 2172,949 L2154,948 Z"
class="herpStairway" fill="#FF575F"></path>
</g>
</g>
</svg>
</div>
<script src="mapp.js"></script>
</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'sg3plcpnl0133'},{'id':'7428471'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script></html>
Svg Balloon thread animation
I am trying to achieve animation for a balloon. I want the thread to move a bit as if the balloon is floating in the air. I am able to get the movement but for some reason the position of the thread has gone wrong. I understand the positioning values of thread is wrong but how do i match it with the balloon? <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="595.28" height="841.89" viewPort="0 0 595.28 841.89"> <g> <path id="thread" fill="none" stroke="#010101" d="M 302 540 l 1 -150"> <animate attributeType="XML" attributeName="d" values="M60 302 c0 10 -10 90 0 131; M60 302 c0 10 3 90 0 136; M60 302 c0 10 10 90 0 138; M60 302 c0 10 -3 90 0 136; M60 302 c0 10 -10 90 0 131" keyTimes="0; 0.25; 0.5; 0.75; 1" dur="5s" repeatCount="indefinite" /> </path> <path fill="none" stroke="#EF393C" stroke-width="1.028" stroke-miterlimit="10" d="M318.682 354.28c-25.82-22.654-68.935 16.096-49.36 46.686 15.468 24.175 49.806 30.21 66.513 5.493 8.354-12.358 9.695-25.44 1.834-39.134-6.35-11.054-20.36-19.99-30.232-19.99"></path> <path fill="#EF393C" d="M338.955 371.226c-.933-2.055-1.78-4.726-3.24-6.524-.73-.903-1.504-1.738-2.353-2.547-.828-.783-1.63-1.45-2.41-2.053-3.12-2.377-4.55-5.104-7.417-6.565-.697-.35-.936-.977-1.63-1.302-1.694-2.052-4.723-1.792-7.653-3.91-2.03-.31-3.71-1.208-6.188-1.303-1.238-.044-2.98-.385-4.36-.29-.675.046-1.396.12-2.223.233-.79.116-1.867-.505-2.638-.317-1.222.11-1.923.284-3.247.465-1.267.175-2.32.325-3.94.694-1.524.362-2.95.867-4.406 1.392-2.9 1.084-6.554 2.604-8.812 4.636-1.528 1.367-2.778 1.75-3.876 3.456-.605.43-1.726 1.653-2.28 2.117-1.227 1.016-1.982 2.665-2.78 3.54-1.71 1.882-2.156 3.628-3.393 6.304-.48 1.042-1.71 3.7-2.046 4.91-.918 2.237-1.293 6.39-1.637 8.8-.43 2.94.146 5.817.52 8.548.374 2.736 1.067 5.28 1.936 7.616 1.75 4.68 3.137 7.178 5.728 10.64 2.608 3.458 5.764 6.442 8.8 9.208 1.323 1.27 2.26 2.32 3.48 2.66 1.355 2.065 3.347 1.8 5.576 3.446.28.206.564.41.857.61.433.29.875.576 1.324.853.897.555 1.82 1.077 2.767 1.557 1.892.962 3.866 1.757 5.875 2.264.417.103.837.188 1.258.268-1.608 1.887-1.022 2.784-.944 2.887.19.247.51.385.886.384.03 0 .06.006.09-.002.297-.068.606-.03 1.06-.642.246.35 1.366.53 2.106.633.47.063.914-.22 1.104-.707.11-.283.305-1.128-.653-2.262.395-.017.788-.036 1.183-.092 2.018-.298 3.92-1.01 5.77-1.93 1.846-.922 3.622-2.02 5.37-3.138l1.308-.846.62-.405.425-.248c.56-.33.896-.708 1.457-1.004l1.092-.836c2.068-1.81 3.067-2.996 3.746-3.257 2.39-2.125 2.548-2.06 4.785-4.49 1.12-1.222 1.73-2.037 2.865-3.478.568-.727 1.566-2.566 2.17-3.447.3-.44.603-.908.943-1.462.273-.46.52-.893.755-1.325 1.876-3.475 2.75-6.212 3.664-9.858.896-3.645 1.266-7.83 1.16-11.826-.118-3.973-.685-7.924-2.555-12.054zm-47.22 1.378c.04-.043.075-.096.114-.14-.003.045-.036.093-.116.14zm10.388 2.03c.03.008.063.02.094.027l.01.003.11.032c-.08.038-.156.082-.24.12 0-.068.016-.122.026-.18zm2.568 3.93H304.7h-.01zm.345-.048c.035-.004.074-.012.107-.015l.08-.004h.03c-.072.002-.145.012-.217.02z"></path> </g> </svg>
A translate transform can move the path. <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="595.28" height="841.89" viewPort="0 0 595.28 841.89"> <g> <path id="thread" transform="translate(242, 130)" fill="none" stroke="#010101" d="M 302 540 l 1 -150"> <animate attributeType="XML" attributeName="d" values="M60 302 c0 10 -10 90 0 131; M60 302 c0 10 3 90 0 136; M60 302 c0 10 10 90 0 138; M60 302 c0 10 -3 90 0 136; M60 302 c0 10 -10 90 0 131" keyTimes="0; 0.25; 0.5; 0.75; 1" dur="5s" repeatCount="indefinite" /> </path> <path fill="none" stroke="#EF393C" stroke-width="1.028" stroke-miterlimit="10" d="M318.682 354.28c-25.82-22.654-68.935 16.096-49.36 46.686 15.468 24.175 49.806 30.21 66.513 5.493 8.354-12.358 9.695-25.44 1.834-39.134-6.35-11.054-20.36-19.99-30.232-19.99"></path> <path fill="#EF393C" d="M338.955 371.226c-.933-2.055-1.78-4.726-3.24-6.524-.73-.903-1.504-1.738-2.353-2.547-.828-.783-1.63-1.45-2.41-2.053-3.12-2.377-4.55-5.104-7.417-6.565-.697-.35-.936-.977-1.63-1.302-1.694-2.052-4.723-1.792-7.653-3.91-2.03-.31-3.71-1.208-6.188-1.303-1.238-.044-2.98-.385-4.36-.29-.675.046-1.396.12-2.223.233-.79.116-1.867-.505-2.638-.317-1.222.11-1.923.284-3.247.465-1.267.175-2.32.325-3.94.694-1.524.362-2.95.867-4.406 1.392-2.9 1.084-6.554 2.604-8.812 4.636-1.528 1.367-2.778 1.75-3.876 3.456-.605.43-1.726 1.653-2.28 2.117-1.227 1.016-1.982 2.665-2.78 3.54-1.71 1.882-2.156 3.628-3.393 6.304-.48 1.042-1.71 3.7-2.046 4.91-.918 2.237-1.293 6.39-1.637 8.8-.43 2.94.146 5.817.52 8.548.374 2.736 1.067 5.28 1.936 7.616 1.75 4.68 3.137 7.178 5.728 10.64 2.608 3.458 5.764 6.442 8.8 9.208 1.323 1.27 2.26 2.32 3.48 2.66 1.355 2.065 3.347 1.8 5.576 3.446.28.206.564.41.857.61.433.29.875.576 1.324.853.897.555 1.82 1.077 2.767 1.557 1.892.962 3.866 1.757 5.875 2.264.417.103.837.188 1.258.268-1.608 1.887-1.022 2.784-.944 2.887.19.247.51.385.886.384.03 0 .06.006.09-.002.297-.068.606-.03 1.06-.642.246.35 1.366.53 2.106.633.47.063.914-.22 1.104-.707.11-.283.305-1.128-.653-2.262.395-.017.788-.036 1.183-.092 2.018-.298 3.92-1.01 5.77-1.93 1.846-.922 3.622-2.02 5.37-3.138l1.308-.846.62-.405.425-.248c.56-.33.896-.708 1.457-1.004l1.092-.836c2.068-1.81 3.067-2.996 3.746-3.257 2.39-2.125 2.548-2.06 4.785-4.49 1.12-1.222 1.73-2.037 2.865-3.478.568-.727 1.566-2.566 2.17-3.447.3-.44.603-.908.943-1.462.273-.46.52-.893.755-1.325 1.876-3.475 2.75-6.212 3.664-9.858.896-3.645 1.266-7.83 1.16-11.826-.118-3.973-.685-7.924-2.555-12.054zm-47.22 1.378c.04-.043.075-.096.114-.14-.003.045-.036.093-.116.14zm10.388 2.03c.03.008.063.02.094.027l.01.003.11.032c-.08.038-.156.082-.24.12 0-.068.016-.122.026-.18zm2.568 3.93H304.7h-.01zm.345-.048c.035-.004.074-.012.107-.015l.08-.004h.03c-.072.002-.145.012-.217.02z"></path> </g> </svg>