Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg id="camera-illustration" width="757" height="772" viewBox="0 0 757 772" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame">
<g clip-path="url(#clip0)">
  <g id="picture-group">
<g id="tree-picture">
<path id="Vector" d="M499.77 310.977C499.065 310.978 498.39 311.258 497.892 311.756C497.394 312.254 497.114 312.929 497.113 313.633V495.994C497.114 496.698 497.394 497.373 497.892 497.871C498.39 498.369 499.065 498.649 499.77 498.65H753.827C754.531 498.649 755.207 498.369 755.705 497.871C756.203 497.373 756.483 496.698 756.483 495.994V313.633C756.483 312.929 756.203 312.254 755.705 311.756C755.207 311.258 754.531 310.978 753.827 310.977H499.77Z" fill="#E6E6E6"/>
<path id="Vector_2" d="M739.797 327.287V456.887C739.797 457.751 739.453 458.581 738.842 459.192C738.23 459.803 737.401 460.147 736.537 460.147H516.537C516.382 460.149 516.228 460.135 516.077 460.107C515.301 459.997 514.59 459.611 514.076 459.02C513.561 458.428 513.278 457.671 513.277 456.887V327.287C513.277 326.422 513.62 325.593 514.232 324.982C514.843 324.371 515.672 324.027 516.537 324.027H736.537C737.401 324.027 738.23 324.371 738.842 324.982C739.453 325.593 739.797 326.422 739.797 327.287V327.287Z" fill="white"/>
<path id="Vector_3" d="M694.198 383.335C700.725 383.335 706.017 378.044 706.017 371.516C706.017 364.989 700.725 359.697 694.198 359.697C687.67 359.697 682.379 364.989 682.379 371.516C682.379 378.044 687.67 383.335 694.198 383.335Z" fill="#FF6584"/>
<path id="Vector_4" d="M504.705 321.426C506.857 321.426 508.602 319.682 508.602 317.53C508.602 315.378 506.857 313.633 504.705 313.633C502.553 313.633 500.808 315.378 500.808 317.53C500.808 319.682 502.553 321.426 504.705 321.426Z" fill="#3F3D56"/>
<path id="Vector_5" d="M748.372 321.426C750.524 321.426 752.268 319.682 752.268 317.53C752.268 315.378 750.524 313.633 748.372 313.633C746.22 313.633 744.475 315.378 744.475 317.53C744.475 319.682 746.22 321.426 748.372 321.426Z" fill="#3F3D56"/>
<path id="Vector_6" d="M504.705 495.994C506.857 495.994 508.602 494.249 508.602 492.097C508.602 489.945 506.857 488.2 504.705 488.2C502.553 488.2 500.808 489.945 500.808 492.097C500.808 494.249 502.553 495.994 504.705 495.994Z" fill="#3F3D56"/>
<path id="Vector_7" d="M748.372 495.994C750.524 495.994 752.268 494.249 752.268 492.097C752.268 489.945 750.524 488.2 748.372 488.2C746.22 488.2 744.475 489.945 744.475 492.097C744.475 494.249 746.22 495.994 748.372 495.994Z" fill="#3F3D56"/>
<path id="Vector_8" d="M585.76 417.913C593.592 417.913 599.94 411.565 599.94 403.733C599.94 395.902 593.592 389.553 585.76 389.553C577.929 389.553 571.58 395.902 571.58 403.733C571.58 411.565 577.929 417.913 585.76 417.913Z" fill="#6C63FF"/>
<path id="Vector_9" d="M587.127 446.444H584.223L585.547 401.597L587.127 446.444Z" fill="#3F3D56"/>
<path id="Vector_10" d="M585.803 410.097L588.921 405.783L585.76 411.165L585.419 410.567L585.803 410.097Z" fill="#3F3D56"/>
<path id="Vector_11" d="M585.461 414.454L582.343 410.14L585.504 415.521L585.846 414.923L585.461 414.454Z" fill="#3F3D56"/>
<path id="Vector_12" d="M715.837 417.913C723.668 417.913 730.017 411.565 730.017 403.733C730.017 395.902 723.668 389.553 715.837 389.553C708.005 389.553 701.656 395.902 701.656 403.733C701.656 411.565 708.005 417.913 715.837 417.913Z" fill="#6C63FF"/>
<path id="Vector_13" d="M717.203 446.444H714.299L715.623 401.597L717.203 446.444Z" fill="#3F3D56"/>
<path id="Vector_14" d="M715.879 410.097L718.997 405.783L715.837 411.165L715.495 410.567L715.879 410.097Z" fill="#3F3D56"/>
<path id="Vector_15" d="M715.538 414.454L712.42 410.14L715.58 415.521L715.922 414.923L715.538 414.454Z" fill="#3F3D56"/>
<path id="Vector_16" d="M626.838 412.306C638.404 412.306 647.78 402.93 647.78 391.363C647.78 379.797 638.404 370.42 626.838 370.42C615.271 370.42 605.895 379.797 605.895 391.363C605.895 402.93 615.271 412.306 626.838 412.306Z" fill="#6C63FF"/>
<path id="Vector_17" d="M628.856 454.444H624.567L626.522 388.209L628.856 454.444Z" fill="#3F3D56"/>
<path id="Vector_18" d="M626.901 400.762L631.506 394.391L626.838 402.339L626.333 401.456L626.901 400.762Z" fill="#3F3D56"/>
<path id="Vector_19" d="M626.396 407.197L621.791 400.825L626.459 408.774L626.964 407.891L626.396 407.197Z" fill="#3F3D56"/>
<path id="Vector_20" d="M677.91 404.306C689.477 404.306 698.853 394.93 698.853 383.363C698.853 371.797 689.477 362.42 677.91 362.42C666.344 362.42 656.968 371.797 656.968 383.363C656.968 394.93 666.344 404.306 677.91 404.306Z" fill="#6C63FF"/>
<path id="Vector_21" d="M679.929 446.444H675.64L677.595 380.209L679.929 446.444Z" fill="#3F3D56"/>
<path id="Vector_22" d="M677.974 392.762L682.578 386.391L677.91 394.339L677.406 393.456L677.974 392.762Z" fill="#3F3D56"/>
<path id="Vector_23" d="M677.469 399.197L672.864 392.825L677.532 400.774L678.037 399.891L677.469 399.197Z" fill="#3F3D56"/>
<path id="Vector_24" d="M545.44 404.306C557.007 404.306 566.383 394.93 566.383 383.363C566.383 371.797 557.007 362.42 545.44 362.42C533.874 362.42 524.497 371.797 524.497 383.363C524.497 394.93 533.874 404.306 545.44 404.306Z" fill="#6C63FF"/>
<path id="Vector_25" d="M547.459 446.444H543.169L545.125 380.209L547.459 446.444Z" fill="#3F3D56"/>
<path id="Vector_26" d="M545.503 392.762L550.108 386.391L545.44 394.339L544.935 393.456L545.503 392.762Z" fill="#3F3D56"/>
<path id="Vector_27" d="M544.999 399.197L540.394 392.825L545.062 400.774L545.566 399.891L544.999 399.197Z" fill="#3F3D56"/>
<path id="Vector_28" d="M628.007 460.147H516.537C516.382 460.149 516.228 460.135 516.077 460.107C515.301 459.997 514.59 459.611 514.076 459.02C513.561 458.428 513.278 457.671 513.277 456.887V429.057C523.766 427.309 534.383 426.446 545.017 426.477C584.587 426.477 617.687 437.817 625.987 452.997C627.239 455.177 627.933 457.633 628.007 460.147V460.147Z" fill="#3F3D56"/>
<path id="Vector_29" d="M739.797 450.577V456.887C739.797 457.751 739.453 458.58 738.842 459.192C738.23 459.803 737.401 460.147 736.537 460.147H613.207C617.174 457.274 621.463 454.874 625.987 452.997C641.097 446.517 662.407 442.477 686.017 442.477C706.537 442.477 725.307 445.517 739.797 450.577Z" fill="#3F3D56"/>
</g>
<g id="mountain-picture">
<path id="Vector_30" d="M641.124 0C640.69 0.000600123 640.263 0.107917 639.88 0.3125L415.58 119.623C414.959 119.955 414.495 120.52 414.289 121.193C414.084 121.867 414.154 122.594 414.483 123.216L500.123 284.216C500.455 284.838 501.019 285.303 501.693 285.508C502.367 285.714 503.094 285.645 503.717 285.314L728.016 166.003C728.637 165.672 729.101 165.107 729.307 164.434C729.513 163.76 729.443 163.033 729.113 162.411L643.473 1.41064C643.31 1.10193 643.087 0.828651 642.818 0.606621C642.548 0.38459 642.237 0.21823 641.903 0.11718C641.651 0.0397728 641.388 0.000282589 641.124 0V0Z" fill="#E6E6E6"/>
<path id="Vector_31" d="M635.155 21.2999L696.016 135.715C696.217 136.094 696.342 136.508 696.383 136.934C696.424 137.361 696.381 137.791 696.256 138.201C696.131 138.611 695.926 138.992 695.653 139.323C695.381 139.654 695.046 139.927 694.667 140.128L500.44 243.443C500.302 243.518 500.158 243.581 500.01 243.631C499.272 243.897 498.464 243.888 497.732 243.606C497.001 243.324 496.395 242.787 496.027 242.095L435.166 127.68C434.965 127.301 434.84 126.887 434.799 126.461C434.758 126.034 434.801 125.604 434.926 125.194C435.051 124.784 435.256 124.403 435.529 124.072C435.801 123.742 436.136 123.468 436.515 123.267L630.742 19.9517C631.12 19.7503 631.535 19.6254 631.961 19.5842C632.388 19.543 632.818 19.5862 633.228 19.7114C633.638 19.8367 634.019 20.0414 634.349 20.314C634.68 20.5865 634.954 20.9216 635.155 21.2999V21.2999Z" fill="white"/>
<path id="Vector_32" d="M505.338 170.138C521.146 170.138 533.962 157.323 533.962 141.514C533.962 125.705 521.146 112.889 505.338 112.889C489.529 112.889 476.713 125.705 476.713 141.514C476.713 157.323 489.529 170.138 505.338 170.138Z" fill="#FF6584"/>
<path id="Vector_33" d="M626.012 177.237L502.037 243.182C501.883 243.267 501.721 243.337 501.554 243.392L506.164 110.64C506.186 109.817 506.425 109.014 506.858 108.314C507.291 107.614 507.902 107.042 508.629 106.655C509.356 106.269 510.172 106.082 510.995 106.114C511.817 106.146 512.616 106.396 513.311 106.838L588.916 154.063L592.536 156.322L626.012 177.237Z" fill="#3F3D56"/>
<path id="Vector_34" opacity="0.2" d="M626.012 177.237L583.684 199.752L588.408 158.518L588.747 155.548L588.916 154.063L592.536 156.322L626.012 177.237Z" fill="black"/>
<path id="Vector_35" d="M695.04 140.519L587.812 197.556L592.536 156.322L592.875 153.352L599.029 99.6167C599.433 96.0946 603.618 93.6626 606.903 94.8046C607.125 94.8836 607.342 94.9767 607.552 95.0834L695.04 140.519Z" fill="#3F3D56"/>
<path id="Vector_36" d="M423.016 126.988C425.168 126.988 426.912 125.243 426.912 123.091C426.912 120.939 425.168 119.195 423.016 119.195C420.864 119.195 419.119 120.939 419.119 123.091C419.119 125.243 420.864 126.988 423.016 126.988Z" fill="#3F3D56"/>
<path id="Vector_37" d="M638.141 12.5565C640.293 12.5565 642.038 10.812 642.038 8.65993C642.038 6.5079 640.293 4.76334 638.141 4.76334C635.989 4.76334 634.245 6.5079 634.245 8.65993C634.245 10.812 635.989 12.5565 638.141 12.5565Z" fill="#3F3D56"/>
<path id="Vector_38" d="M504.996 281.107C507.148 281.107 508.893 279.363 508.893 277.211C508.893 275.059 507.148 273.314 504.996 273.314C502.844 273.314 501.1 275.059 501.1 277.211C501.1 279.363 502.844 281.107 504.996 281.107Z" fill="#3F3D56"/>
<path id="Vector_39" d="M720.122 166.676C722.274 166.676 724.018 164.932 724.018 162.78C724.018 160.628 722.274 158.883 720.122 158.883C717.97 158.883 716.225 160.628 716.225 162.78C716.225 164.932 717.97 166.676 720.122 166.676Z" fill="#3F3D56"/>
</g>
<g id="car-picture">
<path id="Vector_40" d="M695.435 771.153C696.115 771.333 696.84 771.235 697.449 770.882C698.058 770.529 698.503 769.948 698.685 769.268L745.565 593.037C745.746 592.356 745.65 591.631 745.296 591.021C744.943 590.412 744.362 589.968 743.681 589.787L498.161 524.474C497.48 524.293 496.755 524.39 496.146 524.744C495.537 525.097 495.092 525.678 494.911 526.359L448.031 702.59C447.941 702.927 447.919 703.279 447.965 703.625C448.011 703.971 448.125 704.304 448.3 704.606C448.475 704.908 448.708 705.172 448.985 705.384C449.263 705.596 449.579 705.751 449.916 705.84L695.435 771.153Z" fill="#E6E6E6"/>
<path id="Vector_41" d="M725.929 601.942L692.612 727.186C692.39 728.021 691.845 728.734 691.097 729.168C690.349 729.601 689.459 729.72 688.624 729.498L476.018 672.942C475.868 672.904 475.722 672.851 475.583 672.785C474.861 672.479 474.274 671.923 473.929 671.22C473.584 670.516 473.504 669.711 473.705 668.953L507.022 543.709C507.244 542.873 507.79 542.161 508.538 541.727C509.286 541.293 510.175 541.174 511.011 541.396L723.617 597.953C724.452 598.175 725.165 598.721 725.599 599.469C726.032 600.216 726.151 601.106 725.929 601.942V601.942Z" fill="white"/>
<path id="Vector_42" d="M697.345 709.395L692.612 727.186C692.39 728.021 691.845 728.734 691.097 729.168C690.349 729.601 689.459 729.72 688.624 729.498L476.018 672.942C475.868 672.904 475.722 672.851 475.583 672.785C474.861 672.479 474.274 671.923 473.929 671.22C473.584 670.516 473.504 669.711 473.705 668.953L478.438 651.162L697.345 709.395Z" fill="#3F3D56"/>
<path id="Vector_43" d="M603.406 695.788L569.582 686.79L568.554 690.656L602.377 699.653L603.406 695.788Z" fill="#CCCCCC"/>
<path id="Vector_44" d="M525.611 675.093L491.787 666.096L490.759 669.961L524.583 678.959L525.611 675.093Z" fill="#CCCCCC"/>
<path id="Vector_45" d="M681.2 716.482L647.377 707.485L646.348 711.35L680.172 720.348L681.2 716.482Z" fill="#CCCCCC"/>
<path id="Vector_46" d="M501.247 535.973C503.399 535.973 505.143 534.228 505.143 532.076C505.143 529.924 503.399 528.18 501.247 528.18C499.095 528.18 497.35 529.924 497.35 532.076C497.35 534.228 499.095 535.973 501.247 535.973Z" fill="#3F3D56"/>
<path id="Vector_47" d="M736.724 598.613C738.876 598.613 740.621 596.869 740.621 594.717C740.621 592.565 738.876 590.82 736.724 590.82C734.572 590.82 732.828 592.565 732.828 594.717C732.828 596.869 734.572 598.613 736.724 598.613Z" fill="#3F3D56"/>
<path id="Vector_48" d="M456.37 704.673C458.522 704.673 460.267 702.928 460.267 700.776C460.267 698.624 458.522 696.88 456.37 696.88C454.218 696.88 452.473 698.624 452.473 700.776C452.473 702.928 454.218 704.673 456.37 704.673Z" fill="#3F3D56"/>
<path id="Vector_49" d="M691.847 767.314C693.999 767.314 695.744 765.569 695.744 763.417C695.744 761.265 693.999 759.52 691.847 759.52C689.695 759.52 687.951 761.265 687.951 763.417C687.951 765.569 689.695 767.314 691.847 767.314Z" fill="#3F3D56"/>
<path id="Vector_50" d="M645.062 701.279L663.858 706.29L664.654 703.306L645.858 698.295L645.062 701.279Z" fill="#3F3D56"/>
<path id="Vector_51" d="M509.757 662.808L513.397 664.737L660.783 704.028L662.93 701.292C666.651 696.61 668.997 690.985 669.706 685.046C670.206 680.612 669.742 675.951 666.619 673.149L671.667 627.839L590.153 605.999L551.831 623.055C551.831 623.055 537.019 618.828 526.255 626.743C522.342 629.711 519.414 633.787 517.851 638.442L516.138 643.594L509.757 662.808Z" fill="#6C63FF"/>
<path id="Vector_52" d="M542.327 689.527C552.73 689.527 561.162 681.094 561.162 670.691C561.162 660.289 552.73 651.856 542.327 651.856C531.925 651.856 523.492 660.289 523.492 670.691C523.492 681.094 531.925 689.527 542.327 689.527Z" fill="#3F3D56"/>
<path id="Vector_53" d="M542.327 680.605C547.802 680.605 552.24 676.166 552.24 670.691C552.24 665.217 547.802 660.778 542.327 660.778C536.852 660.778 532.414 665.217 532.414 670.691C532.414 676.166 536.852 680.605 542.327 680.605Z" fill="#CCCCCC"/>
<path id="Vector_54" d="M632.131 713.467C642.534 713.467 650.966 705.034 650.966 694.632C650.966 684.23 642.534 675.797 632.131 675.797C621.729 675.797 613.296 684.23 613.296 694.632C613.296 705.034 621.729 713.467 632.131 713.467Z" fill="#3F3D56"/>
<path id="Vector_55" d="M632.131 704.545C637.606 704.545 642.044 700.107 642.044 694.632C642.044 689.157 637.606 684.719 632.131 684.719C626.656 684.719 622.218 689.157 622.218 694.632C622.218 700.107 626.656 704.545 632.131 704.545Z" fill="#CCCCCC"/>
<path id="Vector_56" d="M565.159 623.415L609.185 635.147L614.56 636.577L623.634 638.998L623.81 638.335L625.939 630.357L628.329 621.398L622.292 619.792L616.918 618.356L607.399 615.817L602.024 614.387L591.034 611.457L565.159 623.415Z" fill="white"/>
<path id="Vector_57" d="M630.796 640.91L654.064 647.113L655.285 642.548L657.407 634.569L658.759 629.514L655.352 628.607L649.978 627.171L635.485 623.309L630.796 640.91Z" fill="white"/>
<path id="Vector_58" d="M615.642 657.006L618.625 657.801L620.137 652.133L617.153 651.337L615.642 657.006Z" fill="#3F3D56"/>
<path id="Vector_59" d="M574.944 634.649L575.739 631.665L570.071 630.154L569.275 633.138L574.944 634.649Z" fill="#3F3D56"/>
<path id="Vector_60" d="M573.301 632.421L572.973 632.334C571.319 631.893 569.908 630.813 569.05 629.332C568.193 627.851 567.958 626.09 568.399 624.436V624.436C568.84 622.782 569.92 621.371 571.401 620.514C572.882 619.656 574.643 619.422 576.297 619.863L576.625 619.95L573.301 632.421Z" fill="#3F3D56"/>
<path id="Vector_61" d="M516.138 643.594C518.33 644.439 520.749 644.485 522.971 643.722C525.192 642.959 527.073 641.436 528.282 639.422C529.491 637.408 529.95 635.033 529.579 632.713C529.209 630.394 528.031 628.28 526.255 626.743C522.342 629.711 519.414 633.787 517.851 638.442L516.138 643.594Z" fill="#3F3D56"/>
<path id="Vector_62" d="M616.918 618.356L623.81 638.335L625.939 630.357L622.292 619.792L616.918 618.356Z" fill="#F2F2F2"/>
<path id="Vector_63" d="M649.978 627.171L655.285 642.548L657.407 634.569L655.352 628.607L649.978 627.171Z" fill="#F2F2F2"/>
<path id="Vector_64" d="M602.024 614.387L609.185 635.147L614.56 636.577L607.399 615.817L602.024 614.387Z" fill="#F2F2F2"/>
</g>
  </g>
  
<g id="camera">
<path id="Vector_65" d="M40.0167 310.313C46.6441 310.313 52.0167 304.941 52.0167 298.313C52.0167 291.686 46.6441 286.313 40.0167 286.313C33.3892 286.313 28.0167 291.686 28.0167 298.313C28.0167 304.941 33.3892 310.313 40.0167 310.313Z" fill="#6C63FF"/>
<path id="Vector_66" opacity="0.2" d="M45.0818 287.446C47.2096 289.373 48.5751 292 48.9298 294.848C49.2846 297.697 48.6051 300.578 47.0149 302.968C45.4248 305.358 43.0296 307.097 40.2652 307.871C37.5007 308.644 34.5505 308.399 31.9514 307.18C33.2285 308.344 34.7421 309.218 36.3885 309.743C38.0349 310.267 39.7752 310.429 41.4902 310.218C43.2052 310.008 44.8543 309.428 46.3247 308.521C47.795 307.613 49.0518 306.399 50.009 304.96C50.9662 303.521 51.6011 301.893 51.8703 300.186C52.1395 298.479 52.0366 296.735 51.5686 295.071C51.1007 293.408 50.2788 291.865 49.1591 290.549C48.0395 289.233 46.6487 288.175 45.0818 287.446V287.446Z" fill="black"/>
<path id="Vector_67" d="M348.517 323.313C364.809 323.313 378.017 317.941 378.017 311.313C378.017 304.686 364.809 299.313 348.517 299.313C332.224 299.313 319.017 304.686 319.017 311.313C319.017 317.941 332.224 323.313 348.517 323.313Z" fill="#3F3D56"/>
<path id="Vector_68" opacity="0.2" d="M348.517 299.313C347.504 299.313 346.504 299.334 345.517 299.375C360.4 299.986 372.017 305.098 372.017 311.313C372.017 317.529 360.4 322.64 345.517 323.252C346.503 323.292 347.503 323.313 348.517 323.313C364.809 323.313 378.017 317.941 378.017 311.313C378.017 304.686 364.809 299.313 348.517 299.313Z" fill="black"/>
<path id="Vector_69" d="M387.017 311.313H239.017V295.313C239.017 294.518 238.701 293.755 238.138 293.192C237.575 292.629 236.812 292.313 236.017 292.313H154.017C153.221 292.313 152.458 292.629 151.895 293.192C151.333 293.755 151.017 294.518 151.017 295.313V311.313H65.0167V301.313C65.0167 300.518 64.7007 299.755 64.1381 299.192C63.5755 298.629 62.8124 298.313 62.0167 298.313H18.0167C17.2211 298.313 16.458 298.629 15.8954 299.192C15.3328 299.755 15.0167 300.518 15.0167 301.313V311.313H3.01673C2.62261 311.313 2.23227 311.39 1.86806 311.541C1.50385 311.691 1.17292 311.912 0.894244 312.191C0.615563 312.47 0.394599 312.801 0.244021 313.165C0.0934436 313.529 0.0161998 313.919 0.0167263 314.313V511.313C0.0161998 511.708 0.0934436 512.098 0.244021 512.462C0.394599 512.826 0.615563 513.157 0.894244 513.436C1.17292 513.715 1.50385 513.936 1.86806 514.086C2.23227 514.237 2.62261 514.314 3.01673 514.313H387.017C387.411 514.314 387.801 514.237 388.165 514.086C388.53 513.936 388.861 513.715 389.139 513.436C389.418 513.157 389.639 512.826 389.789 512.462C389.94 512.098 390.017 511.708 390.017 511.313V314.313C390.017 313.919 389.94 313.529 389.789 313.165C389.639 312.801 389.418 312.47 389.139 312.191C388.861 311.912 388.53 311.691 388.165 311.541C387.801 311.39 387.411 311.313 387.017 311.313V311.313Z" fill="#3F3D56"/>
<path id="Vector_70" opacity="0.2" d="M387 499.622H3C2.60589 499.622 2.21555 499.545 1.85134 499.394C1.48712 499.244 1.15619 499.023 0.877505 498.744C0.598825 498.465 0.377875 498.134 0.227298 497.77C0.07672 497.406 -0.000523865 497.016 2.67384e-06 496.622V510.622C-0.000523865 511.016 0.07672 511.406 0.227298 511.77C0.377875 512.134 0.598825 512.465 0.877505 512.744C1.15619 513.023 1.48712 513.244 1.85134 513.394C2.21555 513.545 2.60589 513.622 3 513.622H387C387.394 513.622 387.784 513.545 388.149 513.394C388.513 513.244 388.844 513.023 389.122 512.744C389.401 512.465 389.622 512.134 389.773 511.77C389.923 511.406 390.001 511.016 390 510.622V496.622C390.001 497.016 389.923 497.406 389.773 497.77C389.622 498.134 389.401 498.465 389.122 498.744C388.844 499.023 388.513 499.244 388.149 499.394C387.784 499.545 387.394 499.622 387 499.622Z" fill="black"/>
<path id="Vector_71" opacity="0.2" d="M390.017 403.313H0.0166626V441.313H390.017V403.313Z" fill="black"/>
<path id="Vector_72" opacity="0.2" d="M390.017 384.313H0.0166626V422.313H390.017V384.313Z" fill="black"/>
<path id="Vector_73" d="M390.017 393.313H0.0166626V431.313H390.017V393.313Z" fill="#6C63FF"/>
<path id="Vector_74" d="M195.017 488.313C236.99 488.313 271.017 454.287 271.017 412.313C271.017 370.34 236.99 336.313 195.017 336.313C153.043 336.313 119.017 370.34 119.017 412.313C119.017 454.287 153.043 488.313 195.017 488.313Z" fill="#6C63FF"/>
<path id="Vector_75" opacity="0.2" d="M253.557 363.849C263.225 380.321 266.336 399.829 262.272 418.491C258.207 437.153 247.264 453.6 231.622 464.559C215.979 475.518 196.784 480.185 177.856 477.631C158.928 475.077 141.655 465.49 129.476 450.778C134.788 459.829 141.916 467.682 150.413 473.842C158.909 480.002 168.59 484.335 178.844 486.569C189.098 488.803 199.703 488.889 209.992 486.821C220.281 484.754 230.03 480.578 238.626 474.556C247.221 468.535 254.476 460.798 259.933 451.834C265.39 442.87 268.932 432.873 270.335 422.473C271.737 412.072 270.971 401.494 268.083 391.404C265.196 381.315 260.25 371.933 253.557 363.849V363.849Z" fill="black"/>
<path id="Vector_76" d="M195.017 468.872C226.253 468.872 251.575 443.55 251.575 412.313C251.575 381.077 226.253 355.755 195.017 355.755C163.78 355.755 138.459 381.077 138.459 412.313C138.459 443.55 163.78 468.872 195.017 468.872Z" fill="#3F3D56"/>
<path id="Vector_77" d="M239.017 412.313C239.026 418.287 237.811 424.198 235.447 429.683C234.181 432.642 232.587 435.449 230.697 438.053C226.97 443.224 222.163 447.523 216.611 450.654C211.058 453.784 204.892 455.67 198.539 456.182C192.185 456.694 185.797 455.82 179.814 453.619C173.832 451.419 168.4 447.945 163.893 443.438C159.385 438.93 155.911 433.498 153.711 427.516C151.51 421.534 150.636 415.145 151.148 408.791C151.66 402.438 153.546 396.272 156.677 390.719C159.807 385.167 164.106 380.361 169.277 376.633C171.881 374.743 174.688 373.15 177.647 371.883C184.34 369.009 191.642 367.841 198.898 368.484C206.155 369.128 213.137 371.562 219.22 375.57C225.304 379.577 230.297 385.032 233.752 391.445C237.207 397.858 239.016 405.029 239.017 412.313V412.313Z" fill="white"/>
<path id="Vector_78" opacity="0.2" d="M238.547 405.903C236.906 394.716 231.015 384.592 222.099 377.638C225.963 383.688 228.288 390.591 228.871 397.745C229.455 404.899 228.279 412.088 225.447 418.683C224.181 421.642 222.587 424.449 220.697 427.053C217.235 431.856 212.839 435.91 207.772 438.973C202.705 442.035 197.072 444.043 191.211 444.876C185.349 445.709 179.38 445.35 173.661 443.82C167.941 442.289 162.59 439.62 157.927 435.972C161.786 442.029 167.07 447.048 173.316 450.592C179.562 454.136 186.582 456.096 193.76 456.302C200.939 456.507 208.059 454.951 214.497 451.77C220.936 448.589 226.498 443.88 230.697 438.053C232.587 435.449 234.181 432.642 235.447 429.683C238.661 422.196 239.734 413.964 238.547 405.903V405.903Z" fill="black"/>
</g>
</g>
</g>
<defs>
<clipPath id="clip0">
<rect width="756.483" height="771.242" fill="white"/>
</clipPath>
</defs>
</svg>

              
            
!

CSS

              
                #camera-illustration {
  margin: 2rem auto;
  display: block;
  max-width: 80vw;
  max-height: 90vh;
}

#picture-group {
  transform-origin: 25% 50%;
  animation-name: picture-group;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}


#mountain-picture {
  transform-origin: 75% 15%;
  animation-name: mountains;
  animation-duration: 3s;
  animation-iteration-count:  infinite;
}

#tree-picture {
  animation-name: trees;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

#car-picture {
  transform-origin: 70% 80%;
  animation-name: car;
  animation-duration: 3s;
  animation-iteration-count:  infinite;
}

@keyframes picture-group {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  33% {
    opacity: 1;
  }
}

@keyframes trees {
  from {
     transform: translate(-400px, 0);
  }
  50% {
    transform: translate(-100px, 0);
  }
}

@keyframes mountains {
  from {
    transform: translate(-350px, 240px) rotate(30deg);
  }
  50% {
    transform: translate(-50px, 240px) rotate(30deg);
  }
}

@keyframes car {
  from {
    transform: translate(-400px, -200px) rotate(-23deg);
  }
  50% {
    transform: translate(-100px, -200px) rotate(-20deg);
  }
}



              
            
!

JS

              
                
              
            
!
999px

Console