Intro

This shows a SVG turntable with blinking eyes. The button turns the sound on and off.

JavaScript and CSS is used to animate the turntable.

The Icon on the button is SVG. Very static.

The record player is SVG code inside a 'Static Content' region.
Interaction with JavaScript to set CSS classes on parts of the SVG.

The slider is regular HTML.

<div style="display: inline-block;">
    <svg class="record-player" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105.25 105.25">
        <g transform="translate(310.848 60.185)">
            <g class="frame">
                <rect class="frame__shine" width="95.25" height="95.25" x="-305.848" y="-55.185" ry="4.276"
                    fill-rule="evenodd"></rect>
                <path class="frame__base"
                    d="M-288.915-55.185v95.25h74.04a4.267 4.267 0 004.276-4.276v-86.697a4.267 4.267 0 00-4.276-4.277z"
                    fill-rule="evenodd"></path>
            </g>
            <circle class="record-base" cx="-258.223" cy="-7.56" r="39.688" fill-rule="evenodd" fill="red"></circle>
            <g class="knob" transform="matrix(-.10538 .05103 -.05305 -.10674 -308.635 40.311)">
                <ellipse class="knob__base" ry="55.325" rx="56.661" cx="-151.007" cy="79.914"></ellipse>
                <path class="knob__shine" d="M-94.346 79.914a56.661 55.325 0 01-8.12 28.538l-48.541-28.538z"></path>
                <circle class="knob__top" r="41.961" cy="79.914" cx="-151.007"></circle>
            </g>
            <g class="record">
                <circle class="record__body" cx="-258.223" cy="-7.56" r="37.688" fill-rule="evenodd"></circle>
                <circle class="record__label-base" cx="-258.223" cy="-7.56" r="35.278" fill-rule="evenodd"
                    transform="matrix(.45 0 0 .45 -142.022 -4.158)"></circle>
                <circle class="record__label" r="35.278" cy="-7.56" cx="-258.223" fill-rule="evenodd"
                    transform="matrix(.39107 0 0 .39107 -157.239 -4.603)"></circle>
                <g class="face">
                    <g class="eyes--open">
                        <g transform="translate(86.028 -11.42)">
                            <circle class="eye" r="2.74" cy="2.273" cx="-351.801"></circle>
                            <circle class="pupil" r=".661" cy="1.423" cx="-352.841"></circle>
                        </g>
                        <g transform="translate(101.128 -11.42)">
                            <circle class="eye" cx="-351.801" cy="2.273" r="2.74"></circle>
                            <circle class="pupil" cx="-352.841" cy="1.423" r=".661"></circle>
                        </g>
                    </g>
                    <g class="mouth">
                        <path class="mouth__opening"
                            d="M-262.187-8.31a3.969 3.969 0 00-.005.094 3.969 3.969 0 003.969 3.969 3.969 3.969 0 003.968-3.969 3.969 3.969 0 00-.003-.094z">
                        </path>
                        <path class="mouth__tongue"
                            d="M-256.333-6.987a3.969 3.969 0 00-3.616 2.34 3.969 3.969 0 001.726.4 3.969 3.969 0 003.615-2.34 3.969 3.969 0 00-1.725-.4z">
                        </path>
                    </g>
                </g>
                <g class="face--nauseous">
                    <path d="M-248.384-7.21l-4.584-1.937 4.584-1.938M-268.063-7.21l4.584-1.937-4.584-1.938" fill="none"
                        stroke-width=".794" stroke-linecap="round" stroke-linejoin="round"></path>
                    <circle cx="-258.223" cy="-6.657" r="1.654"></circle>
                </g>
            </g>
            <g class="record__shine" fill="none" stroke="green" stroke-width="5" stroke-linecap="round"
                stroke-linejoin="round">
                <path
                    d="M-222.921-7.56a35.302 35.302 0 00-10.356-24.946M-293.525-7.56a35.302 35.302 0 0010.355 24.947M-227.206-7.56a31.018 31.018 0 00-9.099-21.919M-289.241-7.56a31.018 31.018 0 009.099 21.92M-231.083-7.56a27.14 27.14 0 00-7.961-19.179M-285.364-7.56a27.14 27.14 0 007.962 19.18M-234.96-7.56A23.263 23.263 0 00-241.784-24M-281.487-7.56a23.263 23.263 0 006.825 16.44M-238.837-7.56a19.386 19.386 0 00-5.687-13.7M-277.61-7.56a19.386 19.386 0 005.687 13.7"
                    stroke-width="1.7937399999999999"></path>
            </g>
            <g class="volume">
                <rect class="volume__base" width="5.306" height="16.303" x="-220.864" y="19.441" ry="1.803"
                    stroke-width=".794" stroke-linecap="round" stroke-linejoin="round"></rect>
                <g class="volume__control">
                    <rect class="volume__slider" width="3.742" height="3.274" x="-220.082" y="27.99" ry="0"></rect>
                    <path class="volume__indicator" d="M-219.013 29.627h1.604"></path>
                </g>
                <path class="volume__levels" d="M-224.425 27.592h1.603M-224.425 31.826h1.603M-224.425 23.359h1.603"
                    fill="none" stroke-width=".265"></path>
            </g>
            <circle class="knob__indicator" cx="-300.272" cy="24.212" r="1" stroke-linecap="round"
                stroke-linejoin="round"></circle>
            <g class="branding">
                <rect width="12.851" height="5.895" x="-303.742" y="-49.377" ry="0"></rect>
                <path d="M-301.821-48.388h9.01v1.8h-9.01zM-301.821-46.272h5.001v1.8h-5.001z"></path>
            </g>
            <g class="player-arm" transform="translate(-65.673 -.472)">
                <circle class="knob__base" r="7.938" cy="-43.412" cx="-156.583"></circle>
                <circle class="knob__top" cx="-156.583" cy="-43.412" r="6.718"></circle>
                <path class="arm"
                    d="M-157.355-46.505s-.332 4.745 0 7.083c1.687 11.87 8.335 22.674 10.023 34.544.93 6.55 0 19.845 0 19.845"
                    fill="none" stroke="#e6e6e6" stroke-width="1.587" stroke-linecap="round" stroke-linejoin="round">
                </path>
                <rect class="player-arm__top" width="8.968" height="4.544" x="-163.226" y="-45.684" ry="1.57"
                    stroke-width=".6"></rect>
                <path class="player-arm__needle" d="M-148.885 11.77l3.47.175-.76 4.604-2.412-.174z"></path>
                <rect class="player-arm__counter" ry=".78" y="-48.611" x="-160.573" height="2.362" width="5.953"
                    stroke-width=".529" stroke-linecap="round" stroke-linejoin="round"></rect>
            </g>
        </g>
    </svg>
</div>
<div style="display: inline-block;">
    <input id="tempo" type="range" orient="vertical" min="-8" max="8"/>
</div>

Icon button with CSS class for SVG: fa svg svg-sound-off
Clicking the button will toggle the CSS class to: fa svg svg-sound-on

Include CSS library with paths to the SVG in the application definition.

:root {
    --svg_sound_off: url(https://apex.adbc.dev/apex/css/svgicons/sound_off.svg);
    --svg_sound_on: url(https://apex.adbc.dev/apex/css/svgicons/sound_on.svg);
}

.svg:before {
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    height: var(--a-button-line-height, 1rem);
    width: var(--a-button-icon-size, 1rem);
}

.svg-sound-off:before {
    background-image: var(--svg_sound_off);
}

.svg-sound-on:before {
    background-image: var(--svg_sound_on);
}

SVG

Record Player

Volume Button

Description

SVG

Explanation

Record Player

Volume Button