Как сделать такой же эффект с текстом на jquery или на javascript

164
11 декабря 2019, 13:50

Есть сайт я хочу такой же эффект с текстом получить https://www.mvrdv.com/.

Надпись: We create happy & adventurous places

Answer 1

Вот так, например:

path { 
  stroke-dasharray: 1000; 
  stroke-dashoffset: 1000; 
  animation: dash 2s linear alternate infinite; 
} 
 
@keyframes dash { 
  from { 
    stroke-dashoffset: 1000; 
  } 
  to { 
    stroke-dashoffset: 0; 
  } 
}
<svg width="325.3" height="65.8" viewBox="0 0 325.3 65.8"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none"><path d="M 0 65.8 L 0.6 61.2 Q 5.3 60.3 6.95 58.55 Q 8.486 56.92 8.592 53.166 A 20.125 20.125 0 0 0 8.6 52.6 L 8.7 10.6 A 21.476 21.476 0 0 0 8.659 9.215 Q 8.526 7.166 7.963 6.319 A 1.993 1.993 0 0 0 7.95 6.3 A 2.166 2.166 0 0 0 7.016 5.548 Q 6.286 5.222 5.153 5.201 A 8.498 8.498 0 0 0 5 5.2 L 0.8 5.4 L 0.6 5 L 1.3 0.6 A 43.219 43.219 0 0 1 2.056 0.606 Q 2.875 0.621 3.462 0.668 A 11.252 11.252 0 0 1 3.8 0.7 L 13.2 0.9 L 49 0.9 Q 52.6 0.9 60.5 0 L 60.1 4.5 Q 56 5 54.55 6.15 Q 53.482 6.997 53.092 8.792 A 9.837 9.837 0 0 0 52.9 10.2 Q 52.3 21.2 51.9 34.1 Q 51.594 43.977 51.522 50.043 A 286.186 286.186 0 0 0 51.5 53.4 Q 51.5 57.292 52.311 58.706 A 2.519 2.519 0 0 0 52.4 58.85 A 2.649 2.649 0 0 0 53.591 59.808 Q 54.071 60.015 54.69 60.113 A 7.781 7.781 0 0 0 55.9 60.2 Q 58.2 60.2 60.2 60 L 60.4 60.4 L 59.5 64.9 A 2342.386 2342.386 0 0 0 56.058 64.798 Q 49.188 64.6 47.4 64.6 L 36 64.6 L 36.6 60.3 Q 41 60 42.7 58.4 A 4.579 4.579 0 0 0 43.785 56.76 Q 44.361 55.342 44.398 53.194 A 17.298 17.298 0 0 0 44.4 52.9 L 44.5 11.2 A 12.225 12.225 0 0 0 44.43 9.842 Q 44.274 8.448 43.766 7.651 A 2.471 2.471 0 0 0 43.35 7.15 A 3.522 3.522 0 0 0 42.157 6.451 Q 41.619 6.256 40.953 6.17 A 8.957 8.957 0 0 0 39.8 6.1 L 25.3 6.1 A 32.527 32.527 0 0 0 23.259 6.159 Q 20.438 6.338 19.05 7.05 Q 17.347 7.925 17.127 10.367 A 8.018 8.018 0 0 0 17.1 10.8 Q 16.5 22.2 16.1 34.75 Q 15.704 47.188 15.7 53.291 A 187.942 187.942 0 0 0 15.7 53.4 Q 15.7 57.292 16.511 58.706 A 2.519 2.519 0 0 0 16.6 58.85 A 2.649 2.649 0 0 0 17.791 59.808 Q 18.271 60.015 18.89 60.113 A 7.781 7.781 0 0 0 20.1 60.2 A 28.433 28.433 0 0 0 21.069 60.181 Q 22.619 60.128 25.134 59.922 A 179.573 179.573 0 0 0 25.4 59.9 L 25.6 60.3 L 24.7 64.9 Q 23.3 64.9 22.5 64.8 Q 17.141 64.647 13.598 64.611 A 198.334 198.334 0 0 0 11.6 64.6 A 49.779 49.779 0 0 0 7.322 64.798 Q 3.978 65.088 0 65.8 Z" id="0" vector-effect="non-scaling-stroke"/><path d="M 71.2 65.2 L 71.8 61.1 Q 75.3 60.5 76.45 59.25 Q 77.6 58 77.6 54.7 L 77.7 22.9 Q 77.7 20.422 77.11 19.565 A 1.523 1.523 0 0 0 77.1 19.55 Q 76.516 18.722 74.889 18.701 A 6.629 6.629 0 0 0 74.8 18.7 L 72 18.8 L 71.7 18.4 L 72.3 14.6 A 12.51 12.51 0 0 1 72.556 14.604 Q 73.135 14.616 74.587 14.673 A 493.737 493.737 0 0 1 75.25 14.7 Q 77.442 14.789 80.873 14.799 A 300.741 300.741 0 0 0 81.7 14.8 Q 84.4 14.8 87.8 14.65 Q 91.2 14.5 92.6 14.5 A 34.148 34.148 0 0 1 97.552 14.835 Q 100.082 15.207 102.13 15.991 A 14.057 14.057 0 0 1 106.15 18.3 A 12.431 12.431 0 0 1 110.62 26.996 A 17.64 17.64 0 0 1 110.7 28.7 A 14.427 14.427 0 0 1 108.724 35.935 A 17.981 17.981 0 0 1 108 37.1 Q 105.3 41.1 100.95 43.55 Q 96.6 46 91.7 46 L 84.8 46 L 84.7 53 Q 84.7 55.639 84.842 57.169 A 13.351 13.351 0 0 0 84.95 58.05 Q 85.158 59.338 85.676 59.901 A 1.452 1.452 0 0 0 85.9 60.1 A 2.051 2.051 0 0 0 86.435 60.364 Q 86.976 60.547 87.801 60.588 A 10.068 10.068 0 0 0 88.3 60.6 Q 89.6 60.6 90.9 60.5 A 87.305 87.305 0 0 1 91.426 60.461 Q 92.288 60.4 92.6 60.4 L 92.8 60.8 L 92 64.8 A 27.928 27.928 0 0 1 91.476 64.794 Q 90.519 64.776 88.7 64.7 Q 86.3 64.6 83.8 64.6 Q 81.531 64.6 78.648 64.695 A 258.017 258.017 0 0 0 75.9 64.8 Q 71.635 64.985 71.238 65.171 A 0.08 0.08 0 0 0 71.2 65.2 Z M 85 40.6 L 93.3 41.7 A 13.082 13.082 0 0 0 97.584 40.296 Q 101.189 38.299 102.203 33.905 A 16.941 16.941 0 0 0 102.6 30.1 A 14.131 14.131 0 0 0 102.262 26.906 Q 101.513 23.677 99.1 21.85 Q 95.825 19.37 88.959 19.211 A 41.373 41.373 0 0 0 88 19.2 A 20.746 20.746 0 0 0 87.514 19.205 Q 86.544 19.228 86.3 19.35 Q 86.021 19.49 85.915 20.28 A 5.356 5.356 0 0 0 85.9 20.4 A 743.167 743.167 0 0 0 85.544 26.425 Q 85.075 34.975 85 40.6 Z" id="1" vector-effect="non-scaling-stroke"/><path d="M 171.6 60.4 L 171.9 60.8 L 171.1 64.8 A 42.322 42.322 0 0 1 170.477 64.795 Q 169.565 64.781 167.982 64.733 A 432.336 432.336 0 0 1 166.95 64.7 A 188.381 188.381 0 0 0 162.234 64.606 A 211.658 211.658 0 0 0 160.6 64.6 L 150.6 64.7 L 151.3 60.7 A 19.879 19.879 0 0 0 152.66 60.604 Q 153.997 60.46 154.869 60.137 A 4.638 4.638 0 0 0 155.2 60 A 3.104 3.104 0 0 0 156.655 58.596 A 4.636 4.636 0 0 0 157 57.75 Q 157.422 56.358 157.488 53.793 A 38.637 38.637 0 0 0 157.5 52.8 L 157.6 29.5 Q 144.8 42.6 132.6 56.6 Q 132.678 58.405 133.157 59.317 A 2.189 2.189 0 0 0 133.45 59.75 A 2.133 2.133 0 0 0 134.247 60.299 Q 134.97 60.6 136.1 60.6 Q 137.3 60.6 138.3 60.5 A 53.137 53.137 0 0 1 138.704 60.461 Q 139.211 60.414 139.467 60.403 A 3.196 3.196 0 0 1 139.6 60.4 L 139.8 60.8 L 139.1 64.8 A 22.641 22.641 0 0 1 138.645 64.795 Q 137.977 64.781 136.811 64.733 A 238.602 238.602 0 0 1 136.05 64.7 A 102.064 102.064 0 0 0 132.838 64.61 A 119.233 119.233 0 0 0 131.3 64.6 Q 127.707 64.6 123.267 64.899 A 154.453 154.453 0 0 0 123.25 64.9 A 170.694 170.694 0 0 0 122.205 64.973 Q 119.069 65.204 118.737 65.371 A 0.081 0.081 0 0 0 118.7 65.4 L 119.2 61.4 Q 122.103 60.851 123.498 59.901 A 3.788 3.788 0 0 0 124.15 59.35 A 3.978 3.978 0 0 0 124.887 58.16 Q 125.356 57.031 125.471 55.303 A 16.609 16.609 0 0 0 125.5 54.7 L 125.6 22.9 Q 125.6 20.422 125.01 19.565 A 1.523 1.523 0 0 0 125 19.55 A 1.645 1.645 0 0 0 124.337 19.018 Q 123.768 18.75 122.855 18.708 A 7.683 7.683 0 0 0 122.5 18.7 Q 121.7 18.7 120.9 18.8 Q 120.1 18.9 119.8 18.9 L 119.6 18.4 L 120.2 14.6 A 34.752 34.752 0 0 1 120.765 14.605 Q 121.591 14.619 123.019 14.667 A 349.009 349.009 0 0 1 123.95 14.7 Q 126.7 14.8 129.5 14.8 A 43.6 43.6 0 0 0 131.352 14.758 Q 132.382 14.714 133.549 14.624 A 86.814 86.814 0 0 0 135 14.5 A 2622.817 2622.817 0 0 0 136.295 14.378 Q 137.921 14.225 138.76 14.143 A 174.605 174.605 0 0 0 139.2 14.1 L 138.8 18.2 Q 136.935 18.511 135.916 18.912 A 4.478 4.478 0 0 0 135.4 19.15 A 2.731 2.731 0 0 0 134.134 20.645 A 3.665 3.665 0 0 0 134.05 20.9 A 7.133 7.133 0 0 0 133.882 21.643 Q 133.74 22.441 133.661 23.613 A 39.07 39.07 0 0 0 133.6 24.8 A 713.3 713.3 0 0 0 133.098 34.916 Q 132.93 38.908 132.831 42.529 A 385.073 385.073 0 0 0 132.7 49.4 Q 144.4 37.6 157.6 22.4 A 13.545 13.545 0 0 0 157.526 21.448 Q 157.418 20.529 157.189 19.964 A 2.06 2.06 0 0 0 156.9 19.45 A 1.608 1.608 0 0 0 156.298 19 Q 155.756 18.754 154.891 18.71 A 7.707 7.707 0 0 0 154.5 18.7 Q 153.7 18.7 152.9 18.8 Q 152.1 18.9 151.8 18.9 L 151.6 18.4 L 152.2 14.6 Q 152.939 14.682 154.822 14.73 A 136.348 136.348 0 0 0 155.7 14.75 Q 158.3 14.8 160.8 14.8 A 48.615 48.615 0 0 0 162.748 14.758 Q 163.621 14.723 164.596 14.658 A 99.372 99.372 0 0 0 166.65 14.5 A 4384.532 4384.532 0 0 0 168.047 14.378 Q 170.341 14.178 171.2 14.1 L 170.9 18.2 A 21.239 21.239 0 0 0 169.565 18.412 Q 167.611 18.793 166.875 19.428 A 1.876 1.876 0 0 0 166.85 19.45 A 2.605 2.605 0 0 0 166.269 20.238 Q 165.895 20.986 165.745 22.17 A 11.194 11.194 0 0 0 165.7 22.6 Q 165.3 30.5 164.95 40.25 Q 164.682 47.715 164.619 52.571 A 212.302 212.302 0 0 0 164.6 55.3 A 23.261 23.261 0 0 0 164.633 56.597 Q 164.745 58.591 165.231 59.438 A 1.954 1.954 0 0 0 165.3 59.55 A 2.023 2.023 0 0 0 166.18 60.268 Q 166.919 60.6 168.1 60.6 Q 169.3 60.6 170.3 60.5 A 53.137 53.137 0 0 1 170.704 60.461 Q 171.211 60.414 171.467 60.403 A 3.196 3.196 0 0 1 171.6 60.4 Z" id="2" vector-effect="non-scaling-stroke"/><path d="M 182.6 65.5 L 183.1 61.4 Q 186.003 60.851 187.429 59.901 A 4.021 4.021 0 0 0 188.1 59.35 Q 189.319 58.084 189.395 55.191 A 14.922 14.922 0 0 0 189.4 54.8 L 189.5 22.8 Q 189.5 20.4 188.9 19.55 Q 188.316 18.722 186.689 18.701 A 6.629 6.629 0 0 0 186.6 18.7 L 183.8 18.8 L 183.5 18.4 L 184.1 14.6 A 41.345 41.345 0 0 1 184.738 14.606 Q 185.63 14.62 187.127 14.668 A 374.323 374.323 0 0 1 188.1 14.7 Q 191 14.8 193.8 14.8 Q 196.7 14.8 199.85 14.65 A 367.274 367.274 0 0 0 201.261 14.58 Q 203.291 14.476 204.2 14.4 Q 212.1 14.4 216.4 17.5 A 9.993 9.993 0 0 1 220.615 24.822 A 14.229 14.229 0 0 1 220.7 26.4 Q 220.7 30.4 218.15 33.6 A 15.044 15.044 0 0 1 212.734 37.832 A 18.432 18.432 0 0 1 211.4 38.4 Q 216.9 39.5 220.35 42.55 A 10.247 10.247 0 0 1 222.91 45.904 A 9.821 9.821 0 0 1 223.8 50.1 Q 223.8 54.3 221.15 57.8 A 17.171 17.171 0 0 1 216.359 62.082 A 21.624 21.624 0 0 1 213.95 63.35 A 23.532 23.532 0 0 1 205.378 65.366 A 27.621 27.621 0 0 1 204 65.4 Q 202.759 65.4 200.557 65.16 A 87.814 87.814 0 0 1 199.2 65 Q 194.8 64.6 192.6 64.6 Q 190 64.6 186.8 64.95 A 181.86 181.86 0 0 0 185.505 65.096 Q 183.879 65.286 183.04 65.422 A 12.448 12.448 0 0 0 182.6 65.5 Z M 196.8 41.8 L 196.5 55.4 A 6.092 6.092 0 0 0 196.676 56.917 A 3.77 3.77 0 0 0 198.5 59.35 A 6.32 6.32 0 0 0 199.899 59.919 Q 201.365 60.341 203.605 60.457 A 34.961 34.961 0 0 0 205.4 60.5 A 14.823 14.823 0 0 0 208.358 60.223 Q 210.133 59.861 211.506 59.027 A 8.165 8.165 0 0 0 212.75 58.1 A 7.891 7.891 0 0 0 215.245 53.429 A 11.471 11.471 0 0 0 215.4 51.5 Q 215.4 47.6 212.8 45.1 A 10.689 10.689 0 0 0 210.046 43.219 Q 208.748 42.586 207.14 42.151 A 23.345 23.345 0 0 0 205.1 41.7 L 196.8 41.8 Z M 200.525 37.069 A 1118.02 1118.02 0 0 0 200.95 37.1 A 333.296 333.296 0 0 0 202.893 37.236 Q 203.653 37.287 204.329 37.328 A 160.61 160.61 0 0 0 205.6 37.4 A 0.032 0.032 0 0 0 205.632 37.431 Q 205.855 37.473 207.6 36.6 A 9.493 9.493 0 0 0 209.944 34.92 A 12.444 12.444 0 0 0 211.2 33.5 A 7.369 7.369 0 0 0 212.437 30.918 Q 212.8 29.568 212.8 27.9 A 10.365 10.365 0 0 0 212.456 25.146 A 7.032 7.032 0 0 0 209.45 21 Q 206.396 18.995 200.31 18.817 A 41.544 41.544 0 0 0 199.1 18.8 A 2.853 2.853 0 0 0 198.755 18.819 Q 198.387 18.864 198.184 19.015 A 0.61 0.61 0 0 0 198.05 19.15 Q 197.8 19.5 197.7 20.5 A 166.353 166.353 0 0 0 197.469 23.881 Q 197.15 29.3 197 36.8 Q 198.105 36.892 200.525 37.069 Z" id="3" vector-effect="non-scaling-stroke"/><path d="M 234.4 65.4 L 234.9 61.2 Q 238.6 60.8 239.9 59.4 A 3.967 3.967 0 0 0 240.666 58.135 Q 241.2 56.778 241.2 54.6 L 241.3 22.9 Q 241.3 20.422 240.71 19.565 A 1.523 1.523 0 0 0 240.7 19.55 Q 240.1 18.7 238.3 18.7 L 235.6 18.8 L 235.4 18.4 L 236 14.6 A 50.596 50.596 0 0 1 236.635 14.605 Q 237.966 14.622 240.7 14.7 Q 244.2 14.8 248.3 14.8 A 505.829 505.829 0 0 0 256.106 14.744 Q 267 14.575 273 13.9 L 273.3 14.4 Q 273.1 15.5 272.4 19.4 A 71.034 71.034 0 0 0 271.681 24.509 A 86.245 86.245 0 0 0 271.4 27.8 L 266.6 28.2 A 5.128 5.128 0 0 1 266.606 27.966 Q 266.625 27.563 266.7 26.85 Q 266.8 25.9 266.8 24.9 Q 266.8 22.86 266.338 21.774 A 2.751 2.751 0 0 0 266.05 21.25 Q 265.376 20.307 263.411 19.928 A 11.052 11.052 0 0 0 262.95 19.85 Q 260.6 19.5 254.8 19.5 Q 252.25 19.5 251.216 19.634 A 5.834 5.834 0 0 0 251.1 19.65 A 3.203 3.203 0 0 0 250.631 19.754 Q 250.043 19.936 249.815 20.323 A 0.974 0.974 0 0 0 249.8 20.35 Q 249.51 20.881 249.407 22.298 A 16.643 16.643 0 0 0 249.4 22.4 L 248.8 36.6 L 257 36.7 Q 258.8 36.7 262.3 36.35 A 1965.101 1965.101 0 0 1 263.716 36.209 Q 266.041 35.978 266.9 35.9 L 267.3 36.4 L 266.1 41.6 A 42.943 42.943 0 0 1 265.516 41.595 Q 264.577 41.582 262.868 41.533 A 517.606 517.606 0 0 1 261.75 41.5 Q 258.5 41.4 254.9 41.4 A 37.272 37.272 0 0 0 252.121 41.51 Q 250.667 41.619 249.062 41.836 A 61.776 61.776 0 0 0 248.6 41.9 A 414.552 414.552 0 0 0 248.38 48.911 Q 248.305 52.233 248.3 55.205 A 250.998 250.998 0 0 0 248.3 55.6 A 23.864 23.864 0 0 0 248.322 56.655 Q 248.387 58.123 248.65 58.8 A 1.738 1.738 0 0 0 249.425 59.682 Q 249.701 59.844 250.061 59.95 A 3.897 3.897 0 0 0 250.25 60 Q 251.199 60.228 253.098 60.283 A 45.262 45.262 0 0 0 254.4 60.3 Q 260.9 60.3 263.7 59.7 Q 265.822 59.245 266.996 58.073 A 4.564 4.564 0 0 0 267.65 57.25 A 7.792 7.792 0 0 0 268.261 56 Q 268.997 54.134 269.5 50.9 L 273.9 50.5 L 274.3 51 A 14.496 14.496 0 0 0 274.172 51.516 Q 273.871 52.809 273.295 55.907 A 346.317 346.317 0 0 0 273.25 56.15 A 91.096 91.096 0 0 0 272.206 63.501 A 101.293 101.293 0 0 0 272.1 64.6 L 271.5 65.1 A 237.409 237.409 0 0 0 270.041 65.051 Q 267.667 64.979 263.218 64.87 A 3264.228 3264.228 0 0 0 260.3 64.8 Q 251.8 64.6 246.5 64.6 A 84.734 84.734 0 0 0 242.077 64.711 A 67.292 67.292 0 0 0 238.9 64.95 L 234.4 65.4 Z" id="4" vector-effect="non-scaling-stroke"/><path d="M 290.8 65 L 291.5 61 Q 294.577 60.769 296.264 60.302 A 7.233 7.233 0 0 0 297.15 60 Q 298.8 59.3 299.25 57.65 Q 299.693 56.027 299.7 52.036 A 73.517 73.517 0 0 0 299.7 51.9 L 299.7 18.8 Q 293.4 19 291.2 19.5 Q 289 20 287.95 21.85 Q 286.936 23.637 286.248 28.455 A 65.091 65.091 0 0 0 286.2 28.8 L 281.5 29.1 Q 281.7 27.8 282.15 23.35 Q 282.6 18.9 282.7 14.6 L 283.5 13.9 L 290.6 14.7 L 316.1 14.7 L 323.4 13.9 L 324.2 14.6 Q 324.3 19 324.7 23.3 A 343.373 343.373 0 0 0 324.843 24.804 Q 325.126 27.712 325.288 28.724 A 10.62 10.62 0 0 0 325.3 28.8 L 320.7 29.1 Q 319.9 23.903 318.851 21.952 A 6.77 6.77 0 0 0 318.85 21.95 Q 317.8 20 315.75 19.5 A 12.96 12.96 0 0 0 314.583 19.282 Q 312.866 19.03 309.861 18.881 A 131.212 131.212 0 0 0 307.9 18.8 A 96.395 96.395 0 0 0 307.656 21.597 Q 307.3 26.388 307 34.75 Q 306.6 45.9 306.6 55.3 A 12.035 12.035 0 0 0 306.678 56.721 Q 306.892 58.519 307.7 59.4 Q 308.535 60.311 310.176 60.53 A 8.496 8.496 0 0 0 311.3 60.6 A 53.419 53.419 0 0 0 312.461 60.588 Q 313.495 60.566 314.25 60.5 A 82.508 82.508 0 0 1 314.651 60.466 Q 315.456 60.4 315.7 60.4 L 316 60.7 L 315.3 64.9 A 44.952 44.952 0 0 1 314.512 64.892 Q 313.009 64.865 310.1 64.75 A 187.944 187.944 0 0 0 302.813 64.6 A 174.076 174.076 0 0 0 302.7 64.6 Q 299.1 64.6 295.6 64.75 A 440.334 440.334 0 0 0 294.08 64.818 Q 292.331 64.899 291.337 64.963 A 43.451 43.451 0 0 0 290.8 65 Z" id="5" vector-effect="non-scaling-stroke"/></g></svg>

Пути сделать можно тут или прикрутить эту же либу и делать их в рантайме

Answer 2

Используется контурный шрифт, без заполнения. То есть CSS атрибут 'fill:none;'. Всё

READ ALSO
Hover function для меню

Hover function для меню

Есть структура:

155
Проблема с установкой свойства css через js

Проблема с установкой свойства css через js

Есть на сайте структура <ul><li><ul><li>То есть в каждом элементе первого списка еще по списку

126
Найти общие точки у графиков OxyPlot

Найти общие точки у графиков OxyPlot

У меня есть два графика, нарисованные с помощью oxyplot, шаг графиков - 001, графики рисуются по массивам, то есть их нельзя задать какой-либо функцией

134
Не отображается Content

Не отображается Content

Можете подсказать в чем проблемаУ меня есть UserControl c ListBox, с помощью него я выбираю страницу для отображения в ContentPresenter

130