Horse animation with Bootstrap and svg

view.html.erb

<div class="horse-wrapper position-absolute">
  <%= show_svg('horse.svg') %>
</div>

horse.svg

<svg class="horse" width="50pt" height="50pt" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="#a56a43ff">
<path fill="#a56a43" opacity="1.00" d=" M 332.88 46.85 C 358.78 21.88 400.37 14.35 432.72 30.83 C 424.66 41.20 414.62 50.78 401.91 55.00 C 392.49 58.53 381.79 56.03 372.72 60.82 C 355.80 68.84 346.48 86.50 340.28 103.30 C 333.75 121.56 331.38 141.44 321.40 158.37 C 317.49 165.10 311.14 171.27 302.99 171.86 C 293.27 172.45 283.50 172.08 273.77 171.99 C 272.42 171.93 271.07 171.89 269.72 171.87 C 276.56 170.30 282.53 164.90 283.79 157.85 C 290.16 117.72 302.82 75.80 332.88 46.85 Z" />
<path fill="#a56a43" opacity="1.00" d=" M 41.58 145.65 C 53.10 136.89 68.53 135.61 82.42 137.52 C 102.70 140.85 119.23 158.18 122.27 178.41 C 111.10 183.94 102.00 193.28 96.29 204.31 C 84.67 226.30 84.21 253.25 92.81 276.35 C 87.53 289.26 75.98 299.18 62.39 302.35 C 45.15 306.34 26.00 305.56 10.35 296.66 C 5.08 293.72 4.90 285.25 10.10 282.15 C 18.16 277.09 25.65 270.47 29.54 261.59 C 35.73 247.87 33.51 231.80 27.47 218.43 C 22.08 207.52 21.47 194.93 22.67 183.02 C 24.23 168.92 29.94 154.40 41.58 145.65 Z" />
</g>
<g id="#cb8252ff">
<path fill="#cb8252" opacity="1.00" d=" M 432.72 30.83 C 442.95 26.38 453.93 23.49 465.08 22.70 C 470.96 21.97 476.10 28.36 474.13 33.93 C 471.15 42.84 465.61 50.70 459.10 57.40 C 471.51 77.71 483.45 98.33 494.13 119.61 C 475.40 137.94 456.91 156.52 438.52 175.19 C 429.82 167.10 417.92 163.12 406.14 163.26 C 413.44 201.29 417.65 241.92 404.55 279.18 C 403.29 285.01 405.41 291.23 409.61 295.39 C 432.56 319.03 450.91 347.12 463.23 377.68 C 454.36 385.94 444.11 392.58 433.59 398.53 C 422.23 367.47 403.97 338.82 380.09 315.91 C 373.35 309.70 364.00 312.85 355.96 313.28 C 332.29 313.52 308.43 314.18 285.21 319.24 C 266.72 323.31 248.19 327.46 229.28 329.03 C 230.15 306.16 229.15 283.24 229.78 260.36 C 251.86 260.77 272.06 242.19 273.42 220.15 C 274.06 204.11 273.35 188.04 273.77 171.99 C 283.50 172.08 293.27 172.45 302.99 171.86 C 311.14 171.27 317.49 165.10 321.40 158.37 C 331.38 141.44 333.75 121.56 340.28 103.30 C 346.48 86.50 355.80 68.84 372.72 60.82 C 381.79 56.03 392.49 58.53 401.91 55.00 C 414.62 50.78 424.66 41.20 432.72 30.83 M 438.25 93.28 C 431.78 95.39 430.59 105.12 436.34 108.74 C 441.59 112.77 450.11 108.66 450.16 102.03 C 450.81 95.90 443.90 90.86 438.25 93.28 Z" />
<path fill="#cb8252" opacity="1.00" d=" M 122.27 178.41 C 136.27 170.92 152.50 172.19 167.82 172.08 C 167.67 187.71 167.53 203.36 167.87 218.99 C 168.64 241.36 188.99 260.73 211.39 260.29 C 212.54 283.56 211.42 306.91 211.96 330.21 C 193.01 330.64 173.83 332.42 155.05 329.05 C 149.83 328.10 144.27 329.79 140.49 333.51 C 119.54 353.72 103.39 378.84 93.52 406.22 C 82.73 401.23 72.32 395.42 62.55 388.65 C 72.42 363.94 86.45 340.94 103.79 320.78 C 109.28 314.90 110.06 305.30 105.19 298.81 C 100.10 291.91 95.76 284.43 92.81 276.35 C 84.21 253.25 84.67 226.30 96.29 204.31 C 102.00 193.28 111.10 183.94 122.27 178.41 Z" />
</g>
<g id="#3f5c6cff">
<path fill="#3f5c6c" opacity="1.00" d=" M 438.25 93.28 C 443.90 90.86 450.81 95.90 450.16 102.03 C 450.11 108.66 441.59 112.77 436.34 108.74 C 430.59 105.12 431.78 95.39 438.25 93.28 Z" />
<path fill="#3f5c6c" opacity="1.00" d=" M 14.34 369.39 C 24.14 364.12 37.20 366.03 45.01 373.99 C 50.30 379.50 56.25 384.34 62.55 388.65 C 72.32 395.42 82.73 401.23 93.52 406.22 C 131.83 423.84 173.79 432.18 215.64 435.45 C 256.23 438.36 297.22 437.18 337.40 430.48 C 370.78 424.72 403.85 415.02 433.59 398.53 C 444.11 392.58 454.36 385.94 463.23 377.68 C 467.29 373.45 471.79 369.28 477.60 367.71 C 492.66 362.56 509.36 373.67 512.00 389.00 L 512.00 396.74 C 510.44 403.35 507.05 409.43 501.94 413.94 C 477.19 437.62 446.10 453.59 414.15 465.21 C 344.79 489.68 269.69 493.75 196.94 486.93 C 146.80 481.64 96.66 469.26 52.33 444.65 C 36.33 435.63 20.99 425.09 8.09 411.93 C 3.90 407.90 1.58 402.46 0.00 396.97 L 0.00 389.16 C 1.79 380.96 6.65 373.20 14.34 369.39 Z" />
</g>
<g id="#cf976aff">
<path fill="#cf976a" opacity="1.00" d=" M 438.52 175.19 C 456.91 156.52 475.40 137.94 494.13 119.61 C 499.19 129.60 504.29 140.50 503.07 151.99 C 502.56 162.03 500.32 172.74 493.36 180.40 C 485.67 188.83 473.25 190.94 462.39 189.55 C 452.79 188.18 445.46 181.36 438.52 175.19 Z" />
</g>
<g id="#f0c419ff">
<path fill="#f0c419" opacity="1.00" d=" M 167.82 172.08 C 201.79 171.86 235.76 172.29 269.72 171.87 C 271.07 171.89 272.42 171.93 273.77 171.99 C 273.35 188.04 274.06 204.11 273.42 220.15 C 272.06 242.19 251.86 260.77 229.78 260.36 C 223.65 260.35 217.52 260.32 211.39 260.29 C 188.99 260.73 168.64 241.36 167.87 218.99 C 167.53 203.36 167.67 187.71 167.82 172.08 Z" />
</g>
<g id="#f29c1fff">
<path fill="#f29c1f" opacity="1.00" d=" M 211.39 260.29 C 217.52 260.32 223.65 260.35 229.78 260.36 C 229.15 283.24 230.15 306.16 229.28 329.03 C 223.55 329.90 217.74 329.91 211.96 330.21 C 211.42 306.91 212.54 283.56 211.39 260.29 Z" />
</g>
</svg>

view.scss

// анімація дитячої лошадки
.horse-wrapper {
  top: -6px;
  left: 340px;
  // position: relative;
  // width: 480px;
  // height: 480px;
  // background-color: #eee;
}

.horse {
  position: absolute;
  left: 10px; // -100px;
  top: 5%; // 50%;
  transform: translateY(-150%); // translateY(-50%);
  animation: horse-run 3s linear infinite;
}

@keyframes horse-run {
  0% {
    transform: translateX(5%); // translateX(-100%);
  }
  100% {
    transform: translateX(400%); // translateX(100%);
  }
}

helpers/application_helper.rb

  def show_svg(path)
    File.open("app/assets/images/#{path}", "rb") do |file|
      raw file.read
    end
  end

secretpray/Horse animation(Bootstrap and svg).md