Конфетти и брызги

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
  <path d="M 383.8 471.6 q 4.9 -11.9 9.9 0 q 4.9 11.9 9.9 0" fill="none" stroke="#f59e0b" stroke-width="4" stroke-linecap="round" transform="rotate(201.3 393.7 471.6)"/>
  <circle cx="480.6" cy="224.9" r="7.5" fill="#22c55e"/>
  <rect x="354.8" y="384.3" width="16.3" height="9.8" rx="2.4" fill="#3b82f6" transform="rotate(99 363 389.2)"/>
  <circle cx="490.1" cy="460.3" r="6.2" fill="#f59e0b"/>
  <circle cx="601.5" cy="284.9" r="6" fill="#f59e0b"/>
  <path d="M 541.7 213.2 q 5.3 -12.7 10.6 0 q 5.3 12.7 10.6 0" fill="none" stroke="#22c55e" stroke-width="4.2" stroke-linecap="round" transform="rotate(297.1 552.3 213.2)"/>
  <circle cx="206.6" cy="340.4" r="4.8" fill="#f43f5e"/>
  <path d="M 544.1 217.8 q 4.7 -11.3 9.4 0 q 4.7 11.3 9.4 0" fill="none" stroke="#3b82f6" stroke-width="3.8" stroke-linecap="round" transform="rotate(242.8 553.4 217.8)"/>
  <path d="M 515 289.8 q 4.7 -11.2 9.3 0 q 4.7 11.2 9.3 0" fill="none" stroke="#22c55e" stroke-width="3.7" stroke-linecap="round" transform="rotate(68.9 524.3 289.8)"/>
  <path d="M 444.1 414.9 q 4.8 -11.6 9.6 0 q 4.8 11.6 9.6 0" fill="none" stroke="#a855f7" stroke-width="3.9" stroke-linecap="round" transform="rotate(277.2 453.8 414.9)"/>
  <rect x="433.8" y="442.9" width="16.2" height="9.7" rx="2.4" fill="#f43f5e" transform="rotate(258.2 441.9 447.8)"/>
  <circle cx="454.8" cy="472.5" r="4.3" fill="#a855f7"/>
  <path d="M 247.7 205.4 q 5.1 -12.2 10.2 0 q 5.1 12.2 10.2 0" fill="none" stroke="#f43f5e" stroke-width="4.1" stroke-linecap="round" transform="rotate(231.9 257.9 205.4)"/>
  <circle cx="512.9" cy="314.1" r="4.1" fill="#22c55e"/>
  <circle cx="488" cy="415.1" r="7.6" fill="#22c55e"/>
  <rect x="555.8" y="339.2" width="16" height="9.6" rx="2.4" fill="#f43f5e" transform="rotate(321.7 563.8 344)"/>
  <rect x="270.1" y="238.4" width="21" height="12.6" rx="3.2" fill="#3b82f6" transform="rotate(68.5 280.6 244.7)"/>
  <circle cx="385.9" cy="257.9" r="5.4" fill="#22c55e"/>
  <rect x="515.7" y="145.6" width="13.7" height="8.2" rx="2" fill="#f43f5e" transform="rotate(267.1 522.5 149.7)"/>
  <path d="M 462.4 384.4 q 4.3 -10.4 8.7 0 q 4.3 10.4 8.7 0" fill="none" stroke="#f43f5e" stroke-width="3.5" stroke-linecap="round" transform="rotate(359.3 471.1 384.4)"/>
  <circle cx="298.3" cy="205.2" r="8.2" fill="#3b82f6"/>
  <rect x="333.5" y="312.9" width="13" height="7.8" rx="2" fill="#22c55e" transform="rotate(252.5 340 316.8)"/>
  <circle cx="406.5" cy="299.6" r="5.2" fill="#3b82f6"/>
  <path d="M 291.7 417.6 q 3.1 -7.5 6.2 0 q 3.1 7.5 6.2 0" fill="none" stroke="#22c55e" stroke-width="2.5" stroke-linecap="round" transform="rotate(228.6 297.9 417.6)"/>
  <path d="M 400.3 460.2 q 4.9 -11.7 9.7 0 q 4.9 11.7 9.7 0" fill="none" stroke="#f59e0b" stroke-width="3.9" stroke-linecap="round" transform="rotate(234 410 460.2)"/>
  <circle cx="481.9" cy="445.7" r="6" fill="#a855f7"/>
  <rect x="414.8" y="432" width="14.7" height="8.8" rx="2.2" fill="#22c55e" transform="rotate(47.6 422.2 436.5)"/>
  <circle cx="592.8" cy="331.9" r="3.9" fill="#a855f7"/>
  <path d="M 330.1 192.5 q 2.4 -5.8 4.8 0 q 2.4 5.8 4.8 0" fill="none" stroke="#a855f7" stroke-width="1.9" stroke-linecap="round" transform="rotate(265.8 335 192.5)"/>
  <rect x="309.7" y="142.5" width="20.6" height="12.3" rx="3.1" fill="#f43f5e" transform="rotate(78 320 148.7)"/>
  <path d="M 568.5 231.2 q 4.9 -11.8 9.8 0 q 4.9 11.8 9.8 0" fill="none" stroke="#a855f7" stroke-width="3.9" stroke-linecap="round" transform="rotate(346.3 578.3 231.2)"/>
  <circle cx="245.5" cy="206" r="6.8" fill="#22c55e"/>
  <circle cx="226.5" cy="224.1" r="4.2" fill="#f43f5e"/>
  <circle cx="403.1" cy="321.8" r="6.3" fill="#f59e0b"/>
  <circle cx="398.4" cy="276.6" r="8.1" fill="#22c55e"/>
  <circle cx="343.5" cy="399.4" r="4.7" fill="#f59e0b"/>
  <rect x="373.8" y="294.2" width="19.5" height="11.7" rx="2.9" fill="#f59e0b" transform="rotate(153.3 383.6 300)"/>
  <rect x="367" y="115.4" width="13.2" height="7.9" rx="2" fill="#3b82f6" transform="rotate(272.8 373.6 119.3)"/>
  <rect x="322.2" y="278.5" width="21.8" height="13.1" rx="3.3" fill="#f43f5e" transform="rotate(324.6 333.1 285.1)"/>
  <rect x="445.3" y="214.2" width="12.7" height="7.6" rx="1.9" fill="#3b82f6" transform="rotate(125.9 451.7 218)"/>
  <circle cx="241.4" cy="321.1" r="3.7" fill="#3b82f6"/>
  <circle cx="205" cy="248.9" r="5" fill="#f43f5e"/>
  <path d="M 553.2 426 q 5.2 -12.5 10.4 0 q 5.2 12.5 10.4 0" fill="none" stroke="#f43f5e" stroke-width="4.2" stroke-linecap="round" transform="rotate(77.9 563.6 426)"/>
  <circle cx="357.1" cy="271.8" r="5.7" fill="#f59e0b"/>
  <circle cx="383.4" cy="393.2" r="7.5" fill="#f59e0b"/>
  <path d="M 621.9 272.7 q 2.9 -6.9 5.7 0 q 2.9 6.9 5.7 0" fill="none" stroke="#f59e0b" stroke-width="2.3" stroke-linecap="round" transform="rotate(78.9 627.6 272.7)"/>
  <rect x="480.4" y="272.3" width="18.4" height="11" rx="2.8" fill="#a855f7" transform="rotate(271.3 489.6 277.8)"/>
  <path d="M 512.1 277.1 q 2.7 -6.4 5.4 0 q 2.7 6.4 5.4 0" fill="none" stroke="#f43f5e" stroke-width="2.1" stroke-linecap="round" transform="rotate(19.6 517.4 277.1)"/>
  <path d="M 450.9 186.3 q 3.3 -7.9 6.6 0 q 3.3 7.9 6.6 0" fill="none" stroke="#f43f5e" stroke-width="2.6" stroke-linecap="round" transform="rotate(178.1 457.5 186.3)"/>
  <path d="M 429 250 q 4.7 -11.4 9.5 0 q 4.7 11.4 9.5 0" fill="none" stroke="#f59e0b" stroke-width="3.8" stroke-linecap="round" transform="rotate(117.9 438.5 250)"/>
  <rect x="440.7" y="476.1" width="11.7" height="7" rx="1.8" fill="#f59e0b" transform="rotate(120.3 446.5 479.6)"/>
  <path d="M 336.1 310 q 4.7 -11.4 9.5 0 q 4.7 11.4 9.5 0" fill="none" stroke="#22c55e" stroke-width="3.8" stroke-linecap="round" transform="rotate(215.7 345.5 310)"/>
  <rect x="249.5" y="422.8" width="20.5" height="12.3" rx="3.1" fill="#f43f5e" transform="rotate(157.9 259.8 428.9)"/>
  <rect x="195.3" y="286.6" width="16.2" height="9.7" rx="2.4" fill="#f59e0b" transform="rotate(109.8 203.4 291.5)"/>
  <path d="M 340.9 468.5 q 5.2 -12.4 10.3 0 q 5.2 12.4 10.3 0" fill="none" stroke="#f59e0b" stroke-width="4.1" stroke-linecap="round" transform="rotate(72.5 351.3 468.5)"/>
  <rect x="520.3" y="300.1" width="11.2" height="6.7" rx="1.7" fill="#f43f5e" transform="rotate(156.1 525.9 303.5)"/>
  <path d="M 316.5 147.8 q 5.5 -13.1 10.9 0 q 5.5 13.1 10.9 0" fill="none" stroke="#f43f5e" stroke-width="4.4" stroke-linecap="round" transform="rotate(258.8 327.5 147.8)"/>
  <circle cx="493.1" cy="415.1" r="5.8" fill="#f59e0b"/>
  <path d="M 248.8 423.9 q 4.3 -10.4 8.7 0 q 4.3 10.4 8.7 0" fill="none" stroke="#22c55e" stroke-width="3.5" stroke-linecap="round" transform="rotate(131.3 257.5 423.9)"/>
  <circle cx="489" cy="165.3" r="4.7" fill="#3b82f6"/>
  <rect x="232.5" y="203.4" width="16.1" height="9.7" rx="2.4" fill="#22c55e" transform="rotate(280.2 240.5 208.2)"/>
  <circle cx="513.7" cy="291" r="5.7" fill="#f43f5e"/>
  <rect x="353" y="201.6" width="11.4" height="6.8" rx="1.7" fill="#a855f7" transform="rotate(345.9 358.7 205)"/>
  <path d="M 395.1 359.1 q 2.9 -6.9 5.7 0 q 2.9 6.9 5.7 0" fill="none" stroke="#a855f7" stroke-width="2.3" stroke-linecap="round" transform="rotate(33 400.9 359.1)"/>
  <path d="M 407.7 132.4 q 4.5 -10.7 9 0 q 4.5 10.7 9 0" fill="none" stroke="#a855f7" stroke-width="3.6" stroke-linecap="round" transform="rotate(205.8 416.6 132.4)"/>
  <path d="M 268.7 379.6 q 4 -9.7 8.1 0 q 4 9.7 8.1 0" fill="none" stroke="#3b82f6" stroke-width="3.2" stroke-linecap="round" transform="rotate(41.8 276.7 379.6)"/>
  <rect x="272.9" y="322.4" width="11.6" height="7" rx="1.7" fill="#3b82f6" transform="rotate(229.9 278.7 325.9)"/>
  <circle cx="490.5" cy="417.5" r="5.3" fill="#3b82f6"/>
  <path d="M 508.5 225.2 q 2.7 -6.5 5.4 0 q 2.7 6.5 5.4 0" fill="none" stroke="#a855f7" stroke-width="2.2" stroke-linecap="round" transform="rotate(216.2 513.9 225.2)"/>
  <circle cx="352.4" cy="357.3" r="5.3" fill="#f43f5e"/>
</svg>

.confetti {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' width='800' height='600'%3E %3Cpath d='M 383.8 471.6 q 4.9 -11.9 9.9 0 q 4.9 11.9 9.9 0' fill='none' stroke='%23f59e0b' stroke-width='4' stroke-linecap='round' transform='rotate(201.3 393.7 471.6)'/%3E %3Ccircle cx='480.6' cy='224.9' r='7.5' fill='%2322c55e'/%3E %3Crect x='354.8' y='384.3' width='16.3' height='9.8' rx='2.4' fill='%233b82f6' transform='rotate(99 363 389.2)'/%3E %3Ccircle cx='490.1' cy='460.3' r='6.2' fill='%23f59e0b'/%3E %3Ccircle cx='601.5' cy='284.9' r='6' fill='%23f59e0b'/%3E %3Cpath d='M 541.7 213.2 q 5.3 -12.7 10.6 0 q 5.3 12.7 10.6 0' fill='none' stroke='%2322c55e' stroke-width='4.2' stroke-linecap='round' transform='rotate(297.1 552.3 213.2)'/%3E %3Ccircle cx='206.6' cy='340.4' r='4.8' fill='%23f43f5e'/%3E %3Cpath d='M 544.1 217.8 q 4.7 -11.3 9.4 0 q 4.7 11.3 9.4 0' fill='none' stroke='%233b82f6' stroke-width='3.8' stroke-linecap='round' transform='rotate(242.8 553.4 217.8)'/%3E %3Cpath d='M 515 289.8 q 4.7 -11.2 9.3 0 q 4.7 11.2 9.3 0' fill='none' stroke='%2322c55e' stroke-width='3.7' stroke-linecap='round' transform='rotate(68.9 524.3 289.8)'/%3E %3Cpath d='M 444.1 414.9 q 4.8 -11.6 9.6 0 q 4.8 11.6 9.6 0' fill='none' stroke='%23a855f7' stroke-width='3.9' stroke-linecap='round' transform='rotate(277.2 453.8 414.9)'/%3E %3Crect x='433.8' y='442.9' width='16.2' height='9.7' rx='2.4' fill='%23f43f5e' transform='rotate(258.2 441.9 447.8)'/%3E %3Ccircle cx='454.8' cy='472.5' r='4.3' fill='%23a855f7'/%3E %3Cpath d='M 247.7 205.4 q 5.1 -12.2 10.2 0 q 5.1 12.2 10.2 0' fill='none' stroke='%23f43f5e' stroke-width='4.1' stroke-linecap='round' transform='rotate(231.9 257.9 205.4)'/%3E %3Ccircle cx='512.9' cy='314.1' r='4.1' fill='%2322c55e'/%3E %3Ccircle cx='488' cy='415.1' r='7.6' fill='%2322c55e'/%3E %3Crect x='555.8' y='339.2' width='16' height='9.6' rx='2.4' fill='%23f43f5e' transform='rotate(321.7 563.8 344)'/%3E %3Crect x='270.1' y='238.4' width='21' height='12.6' rx='3.2' fill='%233b82f6' transform='rotate(68.5 280.6 244.7)'/%3E %3Ccircle cx='385.9' cy='257.9' r='5.4' fill='%2322c55e'/%3E %3Crect x='515.7' y='145.6' width='13.7' height='8.2' rx='2' fill='%23f43f5e' transform='rotate(267.1 522.5 149.7)'/%3E %3Cpath d='M 462.4 384.4 q 4.3 -10.4 8.7 0 q 4.3 10.4 8.7 0' fill='none' stroke='%23f43f5e' stroke-width='3.5' stroke-linecap='round' transform='rotate(359.3 471.1 384.4)'/%3E %3Ccircle cx='298.3' cy='205.2' r='8.2' fill='%233b82f6'/%3E %3Crect x='333.5' y='312.9' width='13' height='7.8' rx='2' fill='%2322c55e' transform='rotate(252.5 340 316.8)'/%3E %3Ccircle cx='406.5' cy='299.6' r='5.2' fill='%233b82f6'/%3E %3Cpath d='M 291.7 417.6 q 3.1 -7.5 6.2 0 q 3.1 7.5 6.2 0' fill='none' stroke='%2322c55e' stroke-width='2.5' stroke-linecap='round' transform='rotate(228.6 297.9 417.6)'/%3E %3Cpath d='M 400.3 460.2 q 4.9 -11.7 9.7 0 q 4.9 11.7 9.7 0' fill='none' stroke='%23f59e0b' stroke-width='3.9' stroke-linecap='round' transform='rotate(234 410 460.2)'/%3E %3Ccircle cx='481.9' cy='445.7' r='6' fill='%23a855f7'/%3E %3Crect x='414.8' y='432' width='14.7' height='8.8' rx='2.2' fill='%2322c55e' transform='rotate(47.6 422.2 436.5)'/%3E %3Ccircle cx='592.8' cy='331.9' r='3.9' fill='%23a855f7'/%3E %3Cpath d='M 330.1 192.5 q 2.4 -5.8 4.8 0 q 2.4 5.8 4.8 0' fill='none' stroke='%23a855f7' stroke-width='1.9' stroke-linecap='round' transform='rotate(265.8 335 192.5)'/%3E %3Crect x='309.7' y='142.5' width='20.6' height='12.3' rx='3.1' fill='%23f43f5e' transform='rotate(78 320 148.7)'/%3E %3Cpath d='M 568.5 231.2 q 4.9 -11.8 9.8 0 q 4.9 11.8 9.8 0' fill='none' stroke='%23a855f7' stroke-width='3.9' stroke-linecap='round' transform='rotate(346.3 578.3 231.2)'/%3E %3Ccircle cx='245.5' cy='206' r='6.8' fill='%2322c55e'/%3E %3Ccircle cx='226.5' cy='224.1' r='4.2' fill='%23f43f5e'/%3E %3Ccircle cx='403.1' cy='321.8' r='6.3' fill='%23f59e0b'/%3E %3Ccircle cx='398.4' cy='276.6' r='8.1' fill='%2322c55e'/%3E %3Ccircle cx='343.5' cy='399.4' r='4.7' fill='%23f59e0b'/%3E %3Crect x='373.8' y='294.2' width='19.5' height='11.7' rx='2.9' fill='%23f59e0b' transform='rotate(153.3 383.6 300)'/%3E %3Crect x='367' y='115.4' width='13.2' height='7.9' rx='2' fill='%233b82f6' transform='rotate(272.8 373.6 119.3)'/%3E %3Crect x='322.2' y='278.5' width='21.8' height='13.1' rx='3.3' fill='%23f43f5e' transform='rotate(324.6 333.1 285.1)'/%3E %3Crect x='445.3' y='214.2' width='12.7' height='7.6' rx='1.9' fill='%233b82f6' transform='rotate(125.9 451.7 218)'/%3E %3Ccircle cx='241.4' cy='321.1' r='3.7' fill='%233b82f6'/%3E %3Ccircle cx='205' cy='248.9' r='5' fill='%23f43f5e'/%3E %3Cpath d='M 553.2 426 q 5.2 -12.5 10.4 0 q 5.2 12.5 10.4 0' fill='none' stroke='%23f43f5e' stroke-width='4.2' stroke-linecap='round' transform='rotate(77.9 563.6 426)'/%3E %3Ccircle cx='357.1' cy='271.8' r='5.7' fill='%23f59e0b'/%3E %3Ccircle cx='383.4' cy='393.2' r='7.5' fill='%23f59e0b'/%3E %3Cpath d='M 621.9 272.7 q 2.9 -6.9 5.7 0 q 2.9 6.9 5.7 0' fill='none' stroke='%23f59e0b' stroke-width='2.3' stroke-linecap='round' transform='rotate(78.9 627.6 272.7)'/%3E %3Crect x='480.4' y='272.3' width='18.4' height='11' rx='2.8' fill='%23a855f7' transform='rotate(271.3 489.6 277.8)'/%3E %3Cpath d='M 512.1 277.1 q 2.7 -6.4 5.4 0 q 2.7 6.4 5.4 0' fill='none' stroke='%23f43f5e' stroke-width='2.1' stroke-linecap='round' transform='rotate(19.6 517.4 277.1)'/%3E %3Cpath d='M 450.9 186.3 q 3.3 -7.9 6.6 0 q 3.3 7.9 6.6 0' fill='none' stroke='%23f43f5e' stroke-width='2.6' stroke-linecap='round' transform='rotate(178.1 457.5 186.3)'/%3E %3Cpath d='M 429 250 q 4.7 -11.4 9.5 0 q 4.7 11.4 9.5 0' fill='none' stroke='%23f59e0b' stroke-width='3.8' stroke-linecap='round' transform='rotate(117.9 438.5 250)'/%3E %3Crect x='440.7' y='476.1' width='11.7' height='7' rx='1.8' fill='%23f59e0b' transform='rotate(120.3 446.5 479.6)'/%3E %3Cpath d='M 336.1 310 q 4.7 -11.4 9.5 0 q 4.7 11.4 9.5 0' fill='none' stroke='%2322c55e' stroke-width='3.8' stroke-linecap='round' transform='rotate(215.7 345.5 310)'/%3E %3Crect x='249.5' y='422.8' width='20.5' height='12.3' rx='3.1' fill='%23f43f5e' transform='rotate(157.9 259.8 428.9)'/%3E %3Crect x='195.3' y='286.6' width='16.2' height='9.7' rx='2.4' fill='%23f59e0b' transform='rotate(109.8 203.4 291.5)'/%3E %3Cpath d='M 340.9 468.5 q 5.2 -12.4 10.3 0 q 5.2 12.4 10.3 0' fill='none' stroke='%23f59e0b' stroke-width='4.1' stroke-linecap='round' transform='rotate(72.5 351.3 468.5)'/%3E %3Crect x='520.3' y='300.1' width='11.2' height='6.7' rx='1.7' fill='%23f43f5e' transform='rotate(156.1 525.9 303.5)'/%3E %3Cpath d='M 316.5 147.8 q 5.5 -13.1 10.9 0 q 5.5 13.1 10.9 0' fill='none' stroke='%23f43f5e' stroke-width='4.4' stroke-linecap='round' transform='rotate(258.8 327.5 147.8)'/%3E %3Ccircle cx='493.1' cy='415.1' r='5.8' fill='%23f59e0b'/%3E %3Cpath d='M 248.8 423.9 q 4.3 -10.4 8.7 0 q 4.3 10.4 8.7 0' fill='none' stroke='%2322c55e' stroke-width='3.5' stroke-linecap='round' transform='rotate(131.3 257.5 423.9)'/%3E %3Ccircle cx='489' cy='165.3' r='4.7' fill='%233b82f6'/%3E %3Crect x='232.5' y='203.4' width='16.1' height='9.7' rx='2.4' fill='%2322c55e' transform='rotate(280.2 240.5 208.2)'/%3E %3Ccircle cx='513.7' cy='291' r='5.7' fill='%23f43f5e'/%3E %3Crect x='353' y='201.6' width='11.4' height='6.8' rx='1.7' fill='%23a855f7' transform='rotate(345.9 358.7 205)'/%3E %3Cpath d='M 395.1 359.1 q 2.9 -6.9 5.7 0 q 2.9 6.9 5.7 0' fill='none' stroke='%23a855f7' stroke-width='2.3' stroke-linecap='round' transform='rotate(33 400.9 359.1)'/%3E %3Cpath d='M 407.7 132.4 q 4.5 -10.7 9 0 q 4.5 10.7 9 0' fill='none' stroke='%23a855f7' stroke-width='3.6' stroke-linecap='round' transform='rotate(205.8 416.6 132.4)'/%3E %3Cpath d='M 268.7 379.6 q 4 -9.7 8.1 0 q 4 9.7 8.1 0' fill='none' stroke='%233b82f6' stroke-width='3.2' stroke-linecap='round' transform='rotate(41.8 276.7 379.6)'/%3E %3Crect x='272.9' y='322.4' width='11.6' height='7' rx='1.7' fill='%233b82f6' transform='rotate(229.9 278.7 325.9)'/%3E %3Ccircle cx='490.5' cy='417.5' r='5.3' fill='%233b82f6'/%3E %3Cpath d='M 508.5 225.2 q 2.7 -6.5 5.4 0 q 2.7 6.5 5.4 0' fill='none' stroke='%23a855f7' stroke-width='2.2' stroke-linecap='round' transform='rotate(216.2 513.9 225.2)'/%3E %3Ccircle cx='352.4' cy='357.3' r='5.3' fill='%23f43f5e'/%3E %3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}