Scrambled City
How do I make an scrambled city?
Using Javascript to randomize the SVG paths of an image. What is a scrambled city? How do you make a scrambled city? This script and codes were developed by James Podles on 23 November 2022, Wednesday.
Scrambled City - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scrambled City</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #4B5A69; text-align: center; padding-top: 1em;
}
svg { padding: 10em; margin-left: -10em; width: 100%; height: 100%;
}
button { font-size: 1.4em; background: transparent; border: 2px solid #fafafa; color: #fafafa;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <button>Scramble</button>
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="500pt" height="1000pt" viewBox="0 0 500 1000" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path fill="#4B5A69" d="M 0.00 0.00 L 500.00 0.00 L 500.00 133.00 L 0.00 133.00 L 0.00 0.00 Z" /> <path fill="#fafafa" d="M 328.42 21.91 C 329.01 17.93 327.69 13.82 329.01 9.92 C 329.96 13.61 329.29 17.43 329.31 21.18 C 331.83 21.17 334.36 21.17 336.88 21.18 C 336.21 17.99 336.08 14.61 336.56 11.40 C 336.80 11.34 337.29 11.23 337.54 11.17 C 337.42 14.23 337.82 17.30 337.43 20.35 L 338.77 20.53 C 339.00 29.66 341.39 38.58 342.65 47.60 C 343.80 47.54 344.95 47.48 346.11 47.42 C 346.28 44.54 346.50 41.65 347.03 38.81 C 347.53 41.85 348.06 44.89 348.62 47.93 C 349.37 43.82 350.83 39.89 351.69 35.81 C 352.01 32.48 351.69 29.12 351.55 25.78 C 351.88 25.69 352.53 25.50 352.86 25.41 C 352.82 29.95 352.04 34.58 353.19 39.04 C 354.34 44.33 356.27 49.54 356.24 55.02 C 356.23 60.95 356.21 66.87 356.23 72.80 C 360.80 72.80 365.37 72.81 369.94 72.80 C 370.06 76.64 370.06 80.49 370.07 84.34 C 371.83 84.32 373.58 84.30 375.34 84.28 C 377.33 82.88 379.42 81.63 381.37 80.16 C 381.56 80.57 381.93 81.40 382.12 81.81 C 384.43 82.03 386.89 82.23 388.76 80.56 C 389.87 81.41 391.13 82.00 392.42 82.54 C 392.69 83.00 393.22 83.91 393.49 84.37 C 395.04 84.34 396.59 84.31 398.14 84.29 C 398.15 82.88 398.17 81.47 398.19 80.07 C 398.95 80.11 400.48 80.19 401.24 80.23 C 401.23 81.12 401.21 82.92 401.20 83.81 C 404.24 83.82 407.28 83.82 410.32 83.74 C 409.84 82.38 409.35 81.03 408.80 79.70 C 410.47 75.36 412.45 71.09 413.07 66.43 C 414.30 70.94 415.86 75.35 417.35 79.78 C 416.90 81.01 416.48 82.26 416.09 83.52 C 418.44 83.57 420.79 83.59 423.15 83.60 C 423.14 84.32 423.13 85.75 423.13 86.46 C 425.66 86.47 428.20 86.47 430.74 86.49 C 431.41 87.82 432.08 89.14 432.76 90.47 C 434.99 90.48 437.21 90.48 439.44 90.49 C 439.48 89.92 439.55 88.79 439.58 88.22 C 441.32 87.94 442.55 86.94 443.10 85.23 C 443.74 86.06 444.37 86.90 445.01 87.75 C 447.74 87.76 450.49 87.63 453.23 87.91 C 454.83 88.82 456.13 90.17 457.52 91.38 C 458.84 91.37 460.17 91.36 461.50 91.36 C 461.46 93.10 461.43 94.83 461.40 96.57 C 462.35 96.85 463.31 97.13 464.28 97.41 C 464.26 98.18 464.22 99.71 464.19 100.48 C 466.75 100.48 469.32 100.48 471.88 100.48 C 471.88 102.21 471.88 103.94 471.89 105.67 C 319.44 105.65 166.99 105.68 14.54 105.66 C 14.55 103.94 14.55 102.21 14.56 100.49 C 18.56 100.49 22.56 100.48 26.56 100.49 C 26.55 97.76 26.55 95.03 26.55 92.30 C 27.78 92.30 29.01 92.31 30.24 92.33 C 30.64 91.97 31.43 91.24 31.83 90.88 C 33.39 91.98 34.98 93.02 36.62 93.98 C 38.02 92.06 39.48 90.19 40.99 88.36 C 41.24 88.77 41.73 89.61 41.98 90.03 C 43.40 89.60 44.85 89.52 46.25 90.11 C 47.26 88.91 48.18 87.61 49.34 86.54 C 50.78 86.38 52.22 86.30 53.67 86.29 C 53.99 85.63 54.63 84.30 54.95 83.64 C 55.52 84.50 56.08 85.37 56.63 86.25 C 57.99 86.67 59.35 87.10 60.71 87.55 C 60.75 86.78 60.82 85.24 60.86 84.46 C 62.53 84.79 64.02 85.55 65.20 86.79 C 65.23 83.40 64.38 79.36 67.44 76.94 C 67.44 75.78 67.44 74.63 67.42 73.47 C 67.63 73.52 68.05 73.61 68.26 73.66 C 68.15 75.39 68.30 77.13 69.43 78.54 C 70.86 80.49 70.37 83.00 70.54 85.25 C 72.98 85.39 75.66 84.91 77.81 86.36 C 84.82 86.60 91.83 86.42 98.84 86.46 C 98.75 84.32 98.52 82.17 97.88 80.11 C 98.02 79.40 98.29 77.98 98.42 77.27 C 98.82 77.39 99.62 77.65 100.01 77.78 C 99.68 75.00 99.46 72.21 99.51 69.41 C 99.98 69.45 100.93 69.55 101.40 69.59 C 101.64 67.06 101.89 64.53 102.14 62.00 C 102.67 64.60 103.19 67.19 103.63 69.81 L 105.21 69.13 C 105.42 72.00 105.27 74.89 104.87 77.74 C 105.36 77.66 106.34 77.50 106.83 77.42 C 106.73 80.44 106.30 83.44 106.07 86.45 C 108.80 86.47 111.52 86.47 114.24 86.45 C 114.27 85.51 114.31 83.61 114.34 82.66 C 114.01 82.17 113.35 81.18 113.02 80.69 C 113.45 79.18 113.89 77.58 115.49 76.90 C 115.12 74.11 114.96 71.29 115.38 68.49 C 115.78 68.59 116.57 68.80 116.97 68.90 C 117.24 66.70 117.51 64.50 117.87 62.30 C 118.40 65.01 118.71 67.75 119.04 70.49 C 119.41 69.87 120.16 68.62 120.53 68.00 C 120.80 71.25 120.60 74.50 120.18 77.73 L 122.10 77.28 C 122.20 78.39 122.30 79.50 122.40 80.62 C 121.74 82.65 121.53 84.78 121.46 86.90 C 122.86 86.31 124.14 85.53 125.31 84.57 C 126.34 85.15 127.27 85.86 128.17 86.63 C 129.81 86.54 131.17 85.78 132.25 84.56 C 133.58 85.03 134.84 85.68 135.90 86.64 C 139.58 86.66 141.94 83.53 144.57 81.44 C 144.00 76.97 144.45 72.51 147.06 68.71 C 149.54 72.55 150.44 77.02 149.48 81.51 C 150.83 82.60 152.26 83.98 154.14 83.41 C 151.20 81.36 152.86 77.77 152.90 74.87 C 153.26 77.25 153.59 79.64 154.02 82.02 C 156.26 78.77 156.14 74.67 157.38 71.05 C 157.48 69.85 158.56 69.44 159.56 69.16 C 161.95 72.98 161.84 77.69 163.17 81.91 C 164.85 79.88 164.64 77.32 164.41 74.90 C 164.92 77.47 166.82 80.67 164.43 82.83 C 164.74 83.96 165.05 85.09 165.36 86.22 C 169.11 84.68 173.13 84.23 177.16 84.69 C 178.44 85.29 179.77 85.75 181.12 86.16 C 182.31 83.70 184.23 81.75 185.98 79.69 C 186.52 80.56 187.06 81.43 187.62 82.29 C 188.68 83.33 189.65 84.47 190.34 85.80 C 191.85 85.81 193.35 85.82 194.86 85.81 C 194.50 82.41 193.89 79.06 193.24 75.71 C 193.73 75.68 194.72 75.61 195.22 75.58 C 195.21 73.01 195.21 70.44 195.22 67.87 C 194.83 67.54 194.04 66.89 193.64 66.56 C 195.14 64.06 196.84 61.69 198.77 59.51 C 200.61 57.52 200.28 54.68 200.49 52.20 C 200.82 54.65 201.22 57.09 201.81 59.50 C 204.23 61.35 205.76 64.01 207.33 66.57 C 206.91 66.90 206.09 67.55 205.68 67.88 C 205.69 70.43 205.69 72.98 205.68 75.53 C 206.18 75.58 207.18 75.68 207.68 75.72 C 207.01 79.04 206.48 82.38 206.09 85.73 C 208.89 85.83 211.68 85.99 214.47 86.19 C 214.52 83.31 214.53 80.42 214.56 77.53 C 214.29 77.19 213.73 76.51 213.46 76.17 C 213.80 74.96 214.13 73.75 214.47 72.54 C 214.93 72.24 215.84 71.64 216.30 71.34 C 216.25 68.83 216.12 66.30 215.61 63.83 C 216.04 63.41 216.91 62.58 217.34 62.17 C 217.56 58.79 217.30 55.42 217.10 52.05 C 217.71 52.06 218.95 52.08 219.57 52.09 L 217.85 52.17 C 217.68 55.56 217.94 58.94 218.24 62.31 C 218.60 62.68 219.33 63.40 219.70 63.77 C 219.33 66.39 219.29 69.05 219.27 71.69 C 219.80 71.96 220.87 72.50 221.40 72.77 C 221.43 77.12 220.53 81.41 220.65 85.76 C 223.14 85.93 225.64 85.94 228.13 85.85 C 228.00 80.31 228.58 74.72 227.48 69.25 C 230.36 68.54 229.81 65.28 230.60 63.09 C 232.44 56.65 238.15 52.25 243.82 49.22 C 243.74 47.05 243.62 44.88 243.40 42.72 C 244.80 40.98 246.36 39.36 248.04 37.88 C 248.13 37.04 248.32 35.36 248.42 34.52 C 248.58 35.65 248.75 36.77 248.92 37.90 C 250.56 39.39 252.10 40.99 253.49 42.71 C 253.26 44.89 253.15 47.07 253.09 49.26 C 258.85 52.31 264.66 56.81 266.37 63.42 C 267.09 65.56 266.67 68.65 269.49 69.25 C 268.34 73.88 268.85 78.68 268.78 83.39 C 271.95 83.42 275.12 83.42 278.29 83.43 C 278.46 81.07 277.54 78.21 279.72 76.53 C 279.31 75.47 278.90 74.42 278.49 73.36 C 279.34 73.32 281.03 73.23 281.88 73.18 C 282.01 69.90 280.99 66.46 282.26 63.32 C 283.45 60.22 283.29 56.84 283.57 53.59 C 283.70 56.37 283.68 59.16 283.78 61.95 C 285.33 64.04 285.81 66.63 284.55 69.00 C 284.74 70.40 284.95 71.80 285.15 73.20 C 285.93 73.25 287.50 73.34 288.28 73.39 C 287.86 74.59 287.44 75.78 287.03 76.97 C 287.44 77.20 288.26 77.65 288.67 77.87 C 288.54 80.49 288.34 83.13 288.66 85.74 C 289.38 85.99 290.82 86.48 291.54 86.73 C 291.57 84.13 291.51 81.51 290.72 79.01 C 294.37 75.10 297.75 70.95 301.16 66.82 C 300.98 65.30 300.82 63.78 300.70 62.26 C 301.23 62.45 302.28 62.83 302.81 63.02 C 302.39 63.53 301.55 64.54 301.14 65.05 C 302.75 68.48 305.40 71.23 308.15 73.78 C 308.58 73.08 309.01 72.38 309.45 71.68 C 309.59 69.59 309.64 67.50 309.50 65.41 C 310.19 64.28 310.90 63.17 311.66 62.07 C 311.52 59.47 311.14 56.86 311.38 54.24 C 313.77 56.22 311.90 59.64 312.17 62.24 C 312.92 63.31 313.65 64.38 314.38 65.46 C 314.27 67.67 314.30 69.88 314.37 72.09 C 315.04 72.63 315.72 73.15 316.41 73.66 C 316.62 75.21 316.92 76.74 317.28 78.26 C 317.67 75.36 317.67 72.44 317.63 69.52 C 317.28 69.15 316.57 68.41 316.22 68.04 C 316.56 66.11 316.84 64.18 317.07 62.24 C 316.31 59.53 316.10 56.71 315.62 53.95 C 318.01 49.69 317.77 44.61 317.53 39.89 C 317.81 39.76 318.35 39.51 318.62 39.39 C 318.52 42.95 319.23 46.44 319.86 49.93 C 320.09 48.57 320.56 45.87 320.80 44.51 C 321.17 46.52 321.47 48.54 321.77 50.56 C 322.58 50.53 323.41 50.51 324.23 50.49 C 325.46 40.94 327.12 31.45 328.42 21.91 Z" /> <path fill="#fafafa" d=" M 347.22 38.31 C 345.76 37.58 345.68 36.71 346.98 35.71 C 348.47 36.41 348.55 37.27 347.22 38.31 Z" /> <path fill="#fafafa" d=" M 319.73 41.39 C 321.33 40.90 321.87 41.47 321.35 43.12 C 319.75 43.60 319.21 43.03 319.73 41.39 Z" /> <path fill="#ffffff" d=" M 282.83 68.30 C 286.20 68.47 281.24 71.31 282.83 68.30 Z" /> <path fill="#ffffff" d=" M 145.63 76.29 C 146.95 76.55 147.16 77.28 146.26 78.49 C 144.93 78.22 144.72 77.49 145.63 76.29 Z" /> <path fill="#ffffff" d=" M 147.76 76.28 C 150.35 74.91 150.02 80.08 147.63 78.46 C 147.67 77.92 147.73 76.82 147.76 76.28 Z" /> </svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Scrambled City - Script Codes CSS Codes
body { background: #4B5A69; text-align: center; padding-top: 1em;
}
svg { padding: 10em; margin-left: -10em; width: 100%; height: 100%;
}
button { font-size: 1.4em; background: transparent; border: 2px solid #fafafa; color: #fafafa;
}
Scrambled City - Script Codes JS Codes
function trippy() { $('path').each(function() { var plot = $(this).attr('d'); var plotElements = plot.split(" "); for (var i = 0; i < plotElements.length; i++) { var matches = plotElements[i].match(/\d+/g); if (matches != null) { var randomNumber = Math.floor((Math.random() * 10) + 1); var randomMath = Math.floor((Math.random() * 2) + 1); if (randomMath == 1) { plotElements[i] = parseFloat(plotElements[i]) - randomNumber; } else { plotElements[i] = parseFloat(plotElements[i]) + randomNumber; } plotElements[i] = plotElements[i].toString().replace(',', ' '); } } plotElements = plotElements.toString().replace(/,/g, ' '); $(this).attr('d', plotElements); });
}
$('button').click(function() { window.setInterval(function() { trippy(); }, 100);
})
Developer | James Podles |
Username | jpod |
Uploaded | November 23, 2022 |
Rating | 3 |
Size | 6,489 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Movie Marathon Calculator | 5,766 Kb |
Document Width Display | 2,580 Kb |
Adaptive Text Color | 2,874 Kb |
JQuery Tooltip Plugin | 2,968 Kb |
Soft Progress bar | 3,431 Kb |
Band Name Generator | 2,840 Kb |
JQuery Cousins Method | 2,682 Kb |
Flyer-flip | 3,641 Kb |
A Pen by James Podles | 2,656 Kb |
PracticeIO Click Counter | 4,019 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Contact | GanNichiHa | 2,514 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
Hc first draft | Stepfray | 5,104 Kb |
Count up | Alanshortis | 2,391 Kb |
Perforated foil | 0x04 | 2,617 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
Vue Transition | Chenming142 | 4,561 Kb |
Svg sky | Omodev | 7,070 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
Add This API | ThatGuySam | 2,848 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!