Я пытаюсь понять, возможно ли преобразовать анимацию следующего svg, который использует greensock, используя только код css.
В следующем примере я не Не знаю почему, кажется, работает только анимация браузера и полосы прокрутки, которые прокручиваются.
То, что открывается терминал, и код, который вы пишете самостоятельно, похоже, не работает.
Итак, вопрос в том, можно ли преобразовать следующий пример, который использует только анимацию, используя css.
Не могли бы вы дать мне несколько предложений?
(function() {
let illustration = document.querySelector('.Illustration');
if (!illustration) {
return;
}
const computer = gsap.timeline({
scrollTrigger: {
trigger: '.Illustration',
toggleActions: 'play none none none',
end: '+=10' // end after scrolling 500px beyond the start
}
});
computer
.to(
'#cursor',
{
repeat: 20,
keyframes: [
{
opacity: 0,
duration: 0.01,
delay: 0.4
},
{
opacity: 1,
duration: 0.01,
delay: 0.4
}
]
},
0
)
.from(
'.line',
{
scaleX: 0,
ease: Sine.easeOut,
stagger: {
duration: 3,
amount: 3
}
},
0
)
.to(
'#website',
{
ease: Sine.easeInOut,
yPercent: -60,
duration: 4
},
1
)
.to(
'#scrollbar',
{
ease: Sine.easeInOut,
yPercent: 260,
duration: 4
},
1
)
.to(
'#iterm',
{
opacity: 1,
delay: -0.1,
duration: 0.01
},
2
)
.from(
'#iterm',
{
ease: Elastic.easeOut.config(0.17, 0.2),
transformOrigin: '50% 50%',
y: 60,
x: -20,
duration: 1,
scale: 0
},
2
)
.fromTo(
'.steam',
{
opacity: 1,
drawSVG: '0%'
},
{
drawSVG: '100%',
duration: 3,
stagger: {
each: 0.5
}
},
2
)
.to(
'.steam',
{
opacity: 0,
duration: 4,
stagger: {
each: 0.5
}
},
3
);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
<script src="https://pastebin.com/raw/ywciu18p"></script>
<script src="https://pastebin.com/raw/u7GLGbfu"></script>
<svg
xmlns="http://www.w3.org/2000/svg" class="Illustration Hero__svg" preserveAspectRatio="xMinYMin meet" viewBox="120 200 300 288" width="300px" height="288px">
<defs>
<clipPath id="clippy">
<rect x="133.98" y="248.2" width="52.38" height="81.84" fill="none"></rect>
</clipPath>
<clipPath id="screen">
<rect x="128.39" y="240.73" width="184.29" height="95.74" fill="none"></rect>
</clipPath>
</defs>
<g style="isolation:isolate">
<g id="_1" data-name="1">
<rect id="shelf" x="10.16" y="266.81" width="99.83" height="4.23" fill="#404040"></rect>
<rect id="desk" x="37.83" y="380.3" width="282" height="10" rx="5" fill="#404040"></rect>
<g id="coffee">
<path d="M90.8 362a.87.87 0 01-1.74 0 2.14 2.14 0 00-.27-.89 3.33 3.33 0 00-.91-1.11 1.87 1.87 0 00-1.16-.41 1.79 1.79 0 00-.72.2l-.16.09a2.23 2.23 0 00-1 1.61 4.56 4.56 0 00.58 2.75c.08.16.18.34.29.52a17.28 17.28 0 002.71 3c1.79 1.72 3.65 3.51 4.2 6a.87.87 0 11-1.69.38c-.44-1.95-2.11-3.55-3.71-5.1a18.07 18.07 0 01-3-3.38c-.12-.2-.24-.41-.35-.63a6.31 6.31 0 01-.75-3.82 4 4 0 011.85-2.83l.28-.15a3.5 3.5 0 011.46-.39 3.6 3.6 0 012.25.76 5 5 0 011.41 1.71 4 4 0 01.43 1.69z" fill="#cc7d96"></path>
<path d="M107.54 356.89c.08 4.69-1.07 19.42-4.84 23.22h-8.08c-3.77-3.8-4.92-18.53-4.84-23.22z" fill="#dd859c" fill-rule="evenodd"></path>
<path opacity="0" class="steam" d="M99.48,350.34c-.56-.56-3-3.52,0-6.2s1.93-3.76.11-6.19" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 16.4006; stroke-dasharray: 0px, 999999px;"></path>
<path opacity="0" class="steam" d="M103.68,354.83c-.56-.56-3-3.52,0-6.19s1.93-3.76.11-6.2" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 16.4011; stroke-dasharray: 0px, 999999px;"></path>
<path opacity="0" class="steam" d="M93.57,354.83c-.57-.56-3-3.52,0-6.19s1.92-3.76.1-6.2" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 15.4049; stroke-dasharray: 0px, 999999px;"></path>
</g>
<g id="pc">
<polygon points="238.13 377.72 235.66 361.98 205.21 361.98 202.74 377.72 238.13 377.72" fill="#d2cfd6"></polygon>
<path d="M124.59 363.8a3.31 3.31 0 01-3.3-3.31v-18.76h198.29v18.76a3.32 3.32 0 01-3.31 3.31z" fill="#fff"></path>
<path d="M319.33 342v18.51a3.06 3.06 0 01-3.06 3.06H124.59a3.06 3.06 0 01-3-3.06V342h197.74m.5-.5H121v19a3.56 3.56 0 003.55 3.56h191.72a3.56 3.56 0 003.56-3.56v-19z" fill="#404040"></path>
<path d="M314.36 234.24H126.51a5.45 5.45 0 00-5.47 5.43v103.2h198.79v-103.2a5.45 5.45 0 00-5.47-5.43z" fill="#404040"></path>
<rect x="128.39" y="240.73" width="184.29" height="95.74" fill="#e3d1e5"></rect>
<rect x="188.3" y="377.72" width="64.27" height="2.36" fill="#eaeaea"></rect>
<ellipse cx="220.43" cy="353.63" rx="3.84" ry="3.81" fill="#333"></ellipse>
<g clip-path="url(#screen)">
<g id="vs-code">
<rect x="193.2" y="240.73" width="119.55" height="95.74" fill="#565266"></rect>
<rect x="193.2" y="240.73" width="119.55" height="6.45" fill="#b0baea"></rect>
<ellipse cx="198.98" cy="243.95" rx="1.4" ry="1.38" fill="#e84d4d"></ellipse>
<ellipse cx="204.19" cy="243.95" rx="1.4" ry="1.38" fill="#f2dd77"></ellipse>
<ellipse cx="209.14" cy="243.95" rx="1.4" ry="1.38" fill="#4eb785"></ellipse>
<g fill="#706d84">
<path d="M200.08 252.61c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.8c.83.18 1.15.51 1.15.9 0 .6-.67 1.05-2.21 1.13zM203.13 253.24l-.07-.61c1-.7 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.72c1.63 0 2.11.46 2.11 1s-.5 1.14-1.32 1.76h1.39v.67zM200.08 259.26c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54V258l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM203.13 259.89l-.07-.61c1-.71 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.73c1.63 0 2.11.47 2.11 1s-.5 1.15-1.32 1.77h1.39v.67zM200.08 265.91c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM205.23 266v.59h-.73V266h-1.44a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.13l.73-.08v1.16h.37l-.07.67zM200.08 272.56c1.17-.08 1.49-.17 1.49-.38s-.33-.43-1.24-.54v-.35l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.06-2.21 1.13zM203.17 273.27v-.72c1.17-.09 1.53-.2 1.53-.49s-.39-.42-1.44-.54l.11-1.77h2l-.06.69H204v.59c1.11.17 1.44.56 1.44 1-.04.63-.7 1.15-2.27 1.24zM200.08 279.2c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.05-2.21 1.13zM203 278.55c0-1 .56-1.73 1.83-2.27l.32.65c-.84.31-1.19.61-1.33 1 .78-.45 1.67-.08 1.67.8a1.25 1.25 0 11-2.49-.17zm1.76.23c0-.48-.41-.67-1-.4v.09c0 .59.25.83.56.83s.44-.17.44-.52zM200.08 285.85c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.8c.83.18 1.15.51 1.15.9 0 .6-.67 1.05-2.21 1.13zM203.39 286.45a13.46 13.46 0 011.31-2.67h-1.6l.06-.7h2.33v.68a14.72 14.72 0 00-1.3 2.8zM200.08 292.5c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM203 292.33a.92.92 0 00.05-1.74c0-.48.42-1 1.22-1 .63 0 1.13.33 1.13.84a1 1 0 01-.61.86c.36.21.68.47.68.89s-.49 1-1.3 1-1.17-.32-1.17-.85zm1.71 0c0-.25-.32-.44-.68-.64a.67.67 0 00-.29.52c0 .25.15.44.5.44s.48-.17.48-.35zm-.32-1.21a.63.63 0 00.27-.48c0-.23-.12-.4-.44-.4s-.42.14-.42.29.28.39.6.56zM200.08 299.15c1.17-.07 1.49-.17 1.49-.38s-.33-.43-1.24-.54v-.35l1.11-.86h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.06-2.21 1.14zM203.33 299.25c.84-.32 1.19-.61 1.33-1-.78.44-1.67.08-1.67-.8a1.25 1.25 0 112.49.17c0 1-.56 1.73-1.83 2.27zm1.41-1.45v-.09c0-.59-.25-.83-.56-.83s-.46.17-.46.51c0 .49.41.67 1.02.41zM202.16 305.84v.59h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM202.94 304.77c0-1.11.51-1.85 1.34-1.85s1.26.65 1.26 1.73-.51 1.85-1.35 1.85-1.25-.65-1.25-1.73zm.75-.07l1.05-.54c-.08-.38-.25-.61-.51-.61s-.54.38-.54 1.08zm1.1.09l-1 .53c.08.37.24.59.5.59s.5-.42.5-1.12zM202.16 312.49v.58h-.73v-.58H200a11.47 11.47 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM203.09 313.07v-.65h.91v-1.76h-.81v-.57l.81-.09v-.41l.76-.06v2.88h.82l-.06.65zM202.16 319.13v.59h-.73v-.59H200a11.44 11.44 0 01.33-2.87l.84.05-.55 2.15h.82v-1.07l.73-.08v1.15h.36l-.06.67zM203.13 319.72l-.07-.61c1-.71 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.73c1.63 0 2.11.47 2.11 1.05s-.5 1.14-1.32 1.76h1.39v.67zM202.16 325.78v.59h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82V324l.73-.07v1.15h.36l-.06.67zM203.15 325.74c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM202.16 332.43v.57h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM205.23 332.43v.57h-.73v-.59h-1.44a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.37l-.07.67z"></path>
</g>
<g id="code">
<rect class="line" data-name="line" x="210.54" y="250.33" width="70.96" height="3.07" fill="#a3848d" opacity=".39" data-svg-origin="210.5399932861328 250.3300018310547" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 150.06; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="256.92" width="75.56" height="3.07" fill="#a58492" opacity=".39" data-svg-origin="210.5399932861328 256.9200134277344" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 159.26; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="263.57" width="61.58" height="3.07" fill="#a284a3" opacity=".39" data-svg-origin="210.5399932861328 263.57000732421875" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 131.3; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="270.28" width="52.68" height="3.07" fill="#9084a0" opacity=".39" data-svg-origin="210.5399932861328 270.2799987792969" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 113.5; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="276.86" width="43.68" height="3.07" fill="#83859e" opacity=".39" data-svg-origin="210.5399932861328 276.8599853515625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 95.5; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="283.56" width="73.08" height="3.07" fill="#83929b" opacity=".39" data-svg-origin="210.5399932861328 283.55999755859375" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 154.3; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="290.42" width="85.72" height="3.07" fill="#829995" opacity=".39" data-svg-origin="210.5399932861328 290.4200134277344" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 179.58; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="296.86" width="71.54" height="3.07" fill="#84998b" opacity=".39" data-svg-origin="210.5399932861328 296.8599853515625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 151.22; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="303.51" width="67.52" height="3.07" fill="#899985" opacity=".39" data-svg-origin="210.5399932861328 303.510009765625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 143.18; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="310.1" width="32.1" height="3.07" fill="#979987" opacity=".39" data-svg-origin="210.5399932861328 310.1000061035156" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 72.34; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="316.75" width="93.48" height="3.07" fill="#999488" opacity=".39" data-svg-origin="210.5399932861328 316.75" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 195.1; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="323.4" width="67.52" height="3.07" fill="#998e8a" opacity=".39" data-svg-origin="210.5399932861328 323.3999938964844" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 143.18; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.42" y="330.05" width="50.03" height="3.07" fill="#998c8c" opacity=".39" data-svg-origin="210.4199981689453 330.04998779296875" transform="matrix(0,0,0,1,210.42,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 108.2; stroke-dasharray: 0px, 999999px;"></rect>
</g>
</g>
<g id="iterm" opacity="0" data-svg-origin="283.99497985839844 311.64500427246094" transform="matrix(0,0,0,0,263.99498,371.645)" style="transform-origin: 0px 0px;">
<rect x="259.67" y="294.33" width="48.74" height="38.57" fill="#333"></rect>
<path d="M260.33 290.39h47.22a.86.86 0 01.86.86v4.38h-48.83v-4.49a.75.75 0 01.75-.75z" fill="#d3d3d3"></path>
<circle cx="262.39" cy="293.28" fill="#e84d4d" r="1.04"></circle>
<circle cx="266.28" cy="293.28" fill="#f2dd77" r="1.04"></circle>
<circle cx="269.99" cy="293.28" fill="#4eb785" r="1.04"></circle>
<path d="M264.11 303.17a.44.44 0 01-.29-.11.37.37 0 010-.56l1.36-1.28-1.36-1.29a.36.36 0 010-.55.41.41 0 01.58 0l1.66 1.56a.36.36 0 01.12.28.36.36 0 01-.12.27l-1.66 1.57a.46.46 0 01-.29.11z" fill="#83e5ab"></path>
<path id="cursor" d="M269.33 302.78a.4.4 0 00-.41-.39h-2.42a.39.39 0 100 .78h2.42a.4.4 0 00.41-.39z" fill="#83e5ab"></path>
</g>
<g class="webpage" clip-path="url(#clippy)">
<g id="website">
<rect x="133.88" y="243.41" width="52.47" height="242.13" rx="3.57" fill="#f0f0f2"></rect>
<line x1="141.67" y1="256.81" x2="174.02" y2="256.81" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<line x1="141.67" y1="262.1" x2="179.77" y2="262.1" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<line x1="141.67" y1="267.4" x2="174.02" y2="267.4" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<rect x="139.83" y="275.67" width="40.59" height="28.15" rx="3.22" fill="#f2c5c2"></rect>
<path d="M154.57 284.27a5.58 5.58 0 11-5.58-5.35 5.46 5.46 0 015.58 5.35z" fill="#fff" opacity=".48" style="mix-blend-mode:overlay"></path>
<line x1="144.8" y1="299.31" x2="161.56" y2="299.31" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<line x1="144.8" y1="294.69" x2="169.32" y2="294.69" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<g>
<rect x="139.83" y="308.41" width="37.69" height="49.32" rx="3.34" fill="#bdc0f4"></rect>
<line x1="146.12" y1="333.39" x2="157.69" y2="333.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="328.77" x2="163.05" y2="328.77" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="323.91" x2="168.46" y2="323.91" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="318.62" x2="172.42" y2="318.62" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="313.32" x2="168.46" y2="313.32" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
</g>
<g>
<rect x="139.83" y="363.82" width="40.59" height="58.46" rx="3.22" fill="#c2e7ef"></rect>
<line x1="144.98" y1="414.13" x2="158.87" y2="414.13" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.85" y1="410.5" x2="163.18" y2="410.5" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.62" y1="406.69" x2="166.2" y2="406.69" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.68" y1="402.92" x2="164.8" y2="402.92" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<line x1="144.75" y1="399.16" x2="158.5" y2="399.16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<rect x="144.8" y="368.54" width="29.22" height="23.21" rx="6.86" fill="#fff" opacity=".48" style="mix-blend-mode:overlay"></rect>
</g>
<g>
<rect x="140.38" y="433.67" width="39.82" height="40.46" rx="3.34" fill="#d0b6d1"></rect>
<line x1="147.03" y1="467.66" x2="170.62" y2="467.66" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="463.31" x2="174.81" y2="463.31" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="458.97" x2="170.62" y2="458.97" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="454.16" x2="159.25" y2="454.16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="450.37" x2="164.91" y2="450.37" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="446.39" x2="170.62" y2="446.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="442.04" x2="174.81" y2="442.04" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="437.7" x2="170.62" y2="437.7" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
</g>
</g>
</g>
</g>
<rect x="133.98" y="243.95" width="52.38" height="4.25" fill="#ddd"></rect>
<ellipse cx="136.91" cy="246.08" rx=".93" ry=".92" fill="#afafaf"></ellipse>
<ellipse cx="140.38" cy="246.08" rx=".93" ry=".92" fill="#eaeaea"></ellipse>
<ellipse cx="143.69" cy="246.08" rx=".93" ry=".92" fill="#afafaf"></ellipse>
<rect x="133.88" y="330.05" width="52.47" height="2.85" fill="#eaeaea"></rect>
<rect x="182.52" y="248.2" width="3.84" height="81.84" fill="#fff"></rect>
<rect id="scrollbar" x="183.24" y="249.77" width="2.4" height="22.21" rx="1.02" fill="#ddd"></rect>
</g>
</g>
</g>
</svg>