Awwwards 사례 연구
점으로 그린 원근 건축 공간
섹션 · MIT
갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.
저장한 HTML에서는 갤러리의 재생 설정이 적용되지 않아요.
SOURCE FILES
독립 예제 코드 읽기
사례의 구도나 문서의 원리를 바탕으로 새로 만든 예제입니다. 아래 코드를 복사해 직접 응용할 수 있습니다. 실행 HTML에는 미리보기를 위한 실행 환경이 들어 있습니다.
index.html독립 구현
<!doctype html>
<html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data:; media-src data:; font-src data:; connect-src 'none'; base-uri 'none'; form-action 'none'"><title>점으로 그린 원근 건축 공간 · 독립 장면 연구</title><style>/* Generated by scripts/build-awwwards-studies.mjs from vendor/awwwards-studies/scenes*.mjs and runtime.mjs. Edit those authoring modules for repository changes.
MIT License
Copyright (c) 2026 StyleGallery contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Scope: Newly authored HTML, CSS, JavaScript and SVG study only. This grant does not cover any referenced website, brand, article, photograph, screenshot or original asset. None is included in this package.
*/
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}body{background:var(--bg,#f5f2eb);color:var(--fg,#181818)}button,input,select{font:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--focus,#ef6b3f);outline-offset:4px}button{color:inherit}button:disabled{cursor:default;opacity:.45}svg{display:block;max-width:100%}a{color:inherit}.stage{isolation:isolate;min-height:100vh;overflow:hidden;padding:26px;position:relative}.art{pointer-events:none}.eyebrow{font:10px/1.5 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}.topline{align-items:center;display:flex;gap:14px;justify-content:space-between;position:relative;z-index:5}.topline strong{font-size:13px;letter-spacing:-.04em}.topline nav{display:flex;gap:12px}h1,h2,p{margin:0}h1{font-size:clamp(42px,9vw,116px);font-weight:600;letter-spacing:-.065em;line-height:.94}h2{font-size:clamp(24px,4vw,44px);letter-spacing:-.04em;line-height:1.05}.serif{font-family:Georgia,'Times New Roman',serif;font-weight:400}.copy{font-size:13px;line-height:1.55;max-width:31em}.pill{align-items:center;background:var(--fg,#181818);border:1px solid transparent;border-radius:99px;color:var(--bg,#f5f2eb);display:inline-flex;gap:18px;justify-content:center;min-height:40px;padding:10px 19px;text-decoration:none}.ghost{background:transparent;border-color:currentColor;color:inherit}.small{font-size:11px}.huge{font-size:clamp(68px,18vw,220px);line-height:.8}.caption{font:10px/1.4 ui-monospace,monospace}.controls{align-items:center;display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:6}.controls button{background:transparent;border:1px solid currentColor;border-radius:999px;font-size:11px;min-height:34px;padding:7px 12px}.controls button[aria-pressed=true]{background:var(--fg);color:var(--bg)}.bottomline{align-items:end;display:flex;gap:20px;justify-content:space-between;position:relative;z-index:4}.stack{display:grid;gap:18px}.row{align-items:center;display:flex;gap:16px}.visually-hidden{clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.feedback{font-size:12px;min-height:18px}.surface{background:var(--panel,#fff);border:1px solid #8883;border-radius:16px;padding:24px}.scene-footer{bottom:13px;left:26px;position:absolute;right:26px}.artfill{height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.artfill svg{height:100%;width:100%}.line{border-top:1px solid currentColor;opacity:.4}input,select{border:1px solid #8887;border-radius:7px;min-height:38px;min-width:0;padding:8px 10px;width:100%}input[type=range]{accent-color:var(--accent,#ed6447);min-height:28px;padding:0}details>summary{cursor:pointer;list-style:none}details>summary::-webkit-details-marker{display:none}[hidden]{display:none!important}.flow{display:grid;gap:24px}dialog{background:var(--panel,#fff);border:0;border-radius:12px;color:#171717;max-width:calc(100vw - 34px);padding:28px;width:430px}dialog::backdrop{background:#111a;backdrop-filter:blur(5px)}dialog form{display:grid;gap:15px}dialog .close{background:transparent;border:0;float:right;font-size:25px}body[data-preview-status=error]::after{background:#781b21;color:white;content:'Preview error';padding:8px;position:fixed;right:0;top:0}.motion{animation-play-state:paused!important}.stage[data-playing=true] .motion{animation-play-state:running!important}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}@media(max-width:480px){.stage{padding:18px}.topline nav{gap:8px}.eyebrow{font-size:9px}.scene-footer{left:18px;right:18px}.copy{font-size:12px}.topline{gap:8px}.topline strong{font-size:12px}.surface{padding:17px}}
.stage{min-height:620px}.stage h1,.stage h2{overflow-wrap:anywhere}.topline{flex-wrap:wrap}button{max-width:100%}@media(max-width:480px){.stage{min-height:640px}}:root{--bg:#0c0b0e;--fg:#cc9ae6}.point-menu{background:#c998e7;color:#24182b;font-size:10px;padding:12px;position:relative}.point-menu p{background:#c998e7;line-height:2;min-width:190px;padding:20px;position:absolute;right:0;top:35px}.point-hall{inset:60px -15px 70px;position:absolute;z-index:-1}.point-hall svg{height:100%;width:100%}.point-caption{bottom:24px;left:26px;position:absolute;right:26px}.point-caption h1{font-size:clamp(55px,14.9vw,160px);font-weight:800;letter-spacing:-.08em;line-height:1;margin-top:12px}.point-caption .copy{color:#b5a7bd;font-size:11px;margin-top:10px}@media(max-width:480px){.point-caption{left:18px;right:18px}.point-caption h1{font-size:15vw}.point-hall{bottom:150px;left:-140px;right:-140px}}</style></head><body><main id="root"><section class="stage" aria-label="점으로 그린 원근 건축 공간">
<header class="topline"><span class="eyebrow">A STUDY OF SPACE AND WHAT REMAINS</span><details class="point-menu"><summary>탐색 ＋</summary><p>01 · 공간 기록<br>02 · 빛의 방향<br>03 · 재료의 흔적</p></details></header>
<div class="point-hall art"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" aria-hidden="true"><g fill="#dad6de"><circle cx="23.52441295442369" cy="0" r="0.7" opacity="0.25"/><circle cx="44.72789228047704" cy="0" r="0.7" opacity="0.25"/><circle cx="63.4233600241796" cy="0" r="0.7" opacity="0.25"/><circle cx="81.72959251407622" cy="0" r="0.7" opacity="0.25"/><circle cx="102.12322717601059" cy="0" r="0.7" opacity="0.25"/><circle cx="125.16175350540323" cy="0" r="0.7" opacity="0.25"/><circle cx="170.96807473987013" cy="0" r="0.7" opacity="0.25"/><circle cx="190.23635545572526" cy="0" r="0.7" opacity="0.25"/><circle cx="208.3679366673319" cy="0" r="0.7" opacity="0.25"/><circle cx="228.00002938034788" cy="0" r="0.7" opacity="0.25"/><circle cx="607.0090983473611" cy="0" r="0.7" opacity="0.25"/><circle cx="627.0359051277214" cy="0" r="0.7" opacity="0.25"/><circle cx="649.7878870640308" cy="0" r="0.7" opacity="0.25"/><circle cx="673.6542800437251" cy="0" r="0.7" opacity="0.25"/><circle cx="695.9997355803218" cy="0" r="0.7" opacity="0.25"/><circle cx="715.58724805836" cy="0" r="0.7" opacity="0.25"/><circle cx="753.0246634396707" cy="0" r="0.7" opacity="0.25"/><circle cx="775.069385599929" cy="0" r="0.7" opacity="0.25"/><circle cx="798.8891057361282" cy="0" r="0.7" opacity="0.25"/><circle cx="0.4233600241796016" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="18.729592514076217" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="39.12322717601059" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="62.161753505403226" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="85.97095979615636" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="107.96807473987015" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="145.3679366673319" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="165.00002938034788" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="187.3902812459987" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="211.26050111047994" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="233.97182206708462" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="610.6542800437251" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="632.9997355803218" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="652.58724805836" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="670.7154519915116" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="690.0246634396707" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="735.8891057361282" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="758.8913861588522" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="779.235339481438" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="797.5241319935859" cy="16" r="0.73125" opacity="0.2712765957446808"/><circle cx="-0.8382464945967776" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="22.970959796156368" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="44.96807473987015" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="64.23635545572527" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="82.36793666733189" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="124.3902812459987" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="148.26050111047994" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="170.97182206708462" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="190.95086352047136" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="209.13629005000482" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="228.11580752436134" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="607.7154519915116" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="627.0246634396707" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="649.069385599929" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="672.8891057361282" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="716.235339481438" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="734.5241319935859" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="753.2504353562531" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="774.5046757721142" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="798.0531057753162" cy="32" r="0.7625" opacity="0.2925531914893617"/><circle cx="1.2363554557252698" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="19.36793666733189" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="39.00002938034789" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="61.39028124599869" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="107.97182206708462" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="127.95086352047134" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="146.13629005000482" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="165.11580752436134" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="186.74703825968498" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="210.44963162898887" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="609.8891057361282" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="632.8913861588522" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="653.235339481438" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="690.2504353562531" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="711.5046757721142" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="735.0531057753162" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="758.5527105736023" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="779.7053650429465" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="798.3707193682357" cy="48" r="0.79375" opacity="0.31382978723404253"/><circle cx="-1.609718754001305" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="22.26050111047992" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="44.97182206708461" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="83.1362900500048" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="102.11580752436133" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="123.74703825968497" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="147.44963162898887" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="170.7388357521829" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="191.50996691560817" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="228.4613387874745" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="590.235339481438" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="608.5241319935859" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="627.2504353562531" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="672.0531057753162" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="695.5527105736023" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="716.7053650429465" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="735.3707193682357" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="753.695236016029" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="774.1387420417216" cy="64" r="0.825" opacity="0.3351063829787234"/><circle cx="1.9508635204713505" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="20.136290050004803" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="60.74703825968497" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="84.44963162898885" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="107.73883575218288" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="128.50996691560817" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="146.97344607212878" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="165.4613387874745" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="209.6029447497067" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="233.28767535143882" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="254.86912778521352" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="585.5046757721142" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="609.0531057753162" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="653.7053650429465" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="672.3707193682357" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="690.695236016029" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="711.1387420417216" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="734.2128754388882" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="758.0106875275301" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="799.1877754505455" cy="80" r="0.85625" opacity="0.35638297872340424"/><circle cx="-2.2529617403150284" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="44.73883575218288" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="65.50996691560817" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="83.9734460721288" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="102.46133878747449" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="123.28326491398013" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="146.6029447497067" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="191.86912778521352" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="210.8127173649236" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="229.0090983473611" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="249.0359051277214" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="590.7053650429465" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="627.695236016029" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="648.1387420417216" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="671.2128754388882" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="695.0106875275301" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="716.9598827761215" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="736.1877754505455" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="774.0007344799242" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="796.4353469937392" cy="96" r="0.8875" opacity="0.37765957446808507"/><circle cx="20.973446072128787" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="39.46133878747449" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="60.283264913980126" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="83.60294474970668" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="107.2876753514388" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="128.86912778521352" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="166.0090983473611" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="186.0359051277214" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="208.7878870640308" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="232.65428004372507" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="254.9997355803218" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="608.2128754388882" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="632.0106875275301" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="653.9598827761215" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="673.1877754505455" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="691.3236328534451" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="711.0007344799242" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="757.3084942657434" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="779.9786179442536" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="799.9102140214175" cy="112" r="0.91875" opacity="0.39893617021276595"/><circle cx="-2.716735086019871" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="20.60294474970668" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="44.28767535143881" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="65.86912778521351" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="84.81271736492361" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="103.0090983473611" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="145.7878870640308" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="169.65428004372507" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="191.9997355803218" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="211.58724805836007" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="229.71545199151154" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="249.02466343967066" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="590.9598827761215" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="610.1877754505455" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="628.3236328534451" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="648.0007344799242" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="670.4353469937392" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="694.3084942657434" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="736.9102140214175" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="755.0855681366934" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="774.1016466899748" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="795.7824579100524" cy="128" r="0.95" opacity="0.42021276595744683"/><circle cx="2.869127785213509" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="21.812717364923607" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="40.009098347361096" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="60.03590512772141" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="82.7878870640308" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="128.9997355803218" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="148.58724805836007" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="166.71545199151154" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="186.02466343967066" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="208.069385599929" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="231.88910573612816" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="585.0007344799242" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="607.4353469937392" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="631.3084942657434" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="653.9786179442536" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="673.9102140214175" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="711.1016466899748" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="732.7824579100524" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="756.5020671009084" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="779.7600781145903" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="800.4804860384703" cy="144" r="0.98125" opacity="0.44148936170212766"/><circle cx="-2.9640948722785856" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="19.787887064030805" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="43.65428004372507" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="65.9997355803218" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="103.71545199151154" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="123.02466343967065" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="145.069385599929" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="168.88910573612816" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="191.89138615885227" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="212.23533948143805" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="249.2504353562531" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="590.9786179442536" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="610.9102140214175" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="629.0855681366934" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="648.1016466899748" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="693.5020671009084" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="716.7600781145903" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="737.4804860384703" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="755.9203465379281" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="774.433440063074" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="795.3062169579322" cy="160" r="1.0125" opacity="0.4627659574468085"/><circle cx="2.9997355803218015" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="22.58724805836007" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="40.71545199151155" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="82.069385599929" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="105.88910573612816" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="128.89138615885227" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="149.23533948143805" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="167.52413199358588" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="186.2504353562531" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="231.05310577531625" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="254.55271057360235" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="585.1016466899748" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="606.7824579100524" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="630.5020671009084" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="674.4804860384703" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="692.9203465379281" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="711.433440063074" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="732.3062169579322" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="755.6556455586505" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="779.3216720446736" cy="176" r="1.04375" opacity="0.48404255319148937"/><circle cx="-2.9753365603293473" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="19.069385599929003" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="65.89138615885227" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="86.23533948143805" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="104.52413199358587" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="123.25043535625309" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="144.5046757721142" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="168.05310577531625" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="212.70536504294643" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="231.37071936823568" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="249.69523601602899" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="590.7600781145903" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="611.4804860384703" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="648.433440063074" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="669.3062169579322" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="692.6556455586505" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="716.3216720446736" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="737.8531639597632" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="756.7614700882862" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="795.0445612185953" cy="192" r="1.075" opacity="0.5053191489361701"/><circle cx="2.8913861588522636" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="41.524131993585875" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="60.2504353562531" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="81.50467577211421" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="105.05310577531624" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="128.55271057360235" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="149.70536504294643" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="186.69523601602899" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="207.13874204172157" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="230.2128754388882" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="254.01068752753014" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="585.433440063074" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="629.6556455586505" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="653.3216720446736" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="674.8531639597632" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="693.7614700882862" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="711.969684129338" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="732.0445612185953" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="778.6983229106945" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="800.9985604757422" cy="208" r="1.10625" opacity="0.5265957446808511"/><circle cx="18.504675772114204" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="42.05310577531624" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="65.55271057360235" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="86.70536504294643" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="105.37071936823567" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="123.695236016029" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="167.2128754388882" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="191.01068752753014" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="212.95988277612145" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="232.1877754505455" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="250.32363285344516" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="270.0007344799241" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="611.8531639597632" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="630.7614700882862" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="648.969684129338" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="669.0445612185953" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="691.8366550937717" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="715.6983229106945" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="757.5419353679627" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="775.6676619938775" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="795.0183340382299" cy="224" r="1.1375" opacity="0.5478723404255319"/><circle cx="2.552710573602355" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="23.70536504294643" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="42.37071936823567" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="60.695236016029" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="81.13874204172158" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="104.21287543888822" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="149.95988277612145" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="169.1877754505455" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="187.32363285344516" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="207.00073447992415" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="229.43534699373927" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="253.30849426574346" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="585.969684129338" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="606.0445612185953" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="628.8366550937717" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="652.6983229106945" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="674.9985604757422" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="694.5419353679627" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="732.0183340382299" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="754.1103360171767" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="777.9396863472992" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="800.9050933833006" cy="240" r="1.16875" opacity="0.5691489361702128"/><circle cx="-2.3047639839710006" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="18.138742041721585" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="41.21287543888821" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="65.01068752753012" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="86.95988277612146" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="124.32363285344515" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="144.00073447992415" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="166.43534699373927" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="190.30849426574346" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="212.9786179442536" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="232.9102140214174" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="270.1016466899748" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="565.8366550937717" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="589.6983229106945" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="611.9985604757422" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="631.5419353679627" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="649.6676619938775" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="669.0183340382299" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="714.9396863472992" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="737.9050933833006" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="758.1995709602198" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="776.4717731401543" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="795.2296246589879" cy="256" r="1.2" opacity="0.5904255319148937"/><circle cx="2.0106875275301244" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="23.959882776121457" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="43.1877754505455" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="61.323632853445154" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="103.43534699373926" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="127.30849426574348" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="149.9786179442536" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="169.9102140214174" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="188.08556813669335" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="207.1016466899748" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="252.50206710090842" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="275.7600781145904" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="568.5419353679627" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="586.6676619938775" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="606.0183340382299" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="628.1103360171767" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="651.9396863472992" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="695.1995709602198" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="713.4717731401543" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="732.2296246589879" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="753.5345464901076" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="777.106194908201" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="800.5802082174373" cy="272" r="1.23125" opacity="0.6117021276595744"/><circle cx="-1.6763671465548489" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="18.00073447992414" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="40.435346993739266" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="86.97861794425361" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="106.91021402141742" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="125.08556813669335" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="144.1016466899748" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="165.78245791005233" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="189.50206710090842" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="233.4804860384703" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="251.9203465379281" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="270.43344006307404" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="565.1103360171767" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="588.9396863472992" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="611.9050933833006" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="632.1995709602198" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="669.2296246589879" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="690.5345464901076" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="714.106194908201" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="737.5802082174373" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="758.6819899908016" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="777.3179625352535" cy="288" r="1.2625" opacity="0.6329787234042553"/><circle cx="1.3084942657434748" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="23.97861794425361" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="62.08556813669335" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="81.10164668997481" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="102.78245791005233" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="126.50206710090842" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="149.76007811459039" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="170.4804860384703" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="207.43344006307404" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="228.30621695793212" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="251.65564555865043" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="275.3216720446737" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="569.1995709602198" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="587.4717731401543" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="606.2296246589879" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="651.106194908201" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="674.5802082174373" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="695.6819899908016" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="714.3179625352535" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="732.6616017911526" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="753.1551535761902" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="800.0497851442084" cy="304" r="1.29375" opacity="0.6542553191489362"/><circle cx="-0.91443186330665" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="39.78245791005233" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="63.50206710090842" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="86.76007811459037" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="107.4804860384703" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="125.9203465379281" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="144.43344006307404" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="188.65564555865043" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="212.32167204467368" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="233.85316395976312" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="252.7614700882861" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="270.9696841293381" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="291.0445612185953" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="337.6983229106945" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="359.9985604757422" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="379.5419353679626" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="397.66766199387746" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="417.01833403822985" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="439.1103360171766" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="485.90509338330054" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="506.1995709602199" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="524.4717731401543" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="543.2296246589879" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="564.5345464901076" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="588.106194908201" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="632.6819899908016" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="651.3179625352535" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="669.6616017911526" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="690.1551535761902" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="713.264244043597" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="737.0497851442084" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="778.1388232170825" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="796.2798543840287" cy="320" r="1.325" opacity="0.675531914893617"/><circle cx="23.76007811459037" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="44.48048603847031" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="62.9203465379281" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="81.43344006307403" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="102.30621695793212" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="125.65564555865043" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="170.85316395976312" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="189.7614700882861" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="207.96968412933808" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="228.04456121859525" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="250.8366550937717" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="274.6983229106945" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="316.5419353679626" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="334.66766199387746" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="354.01833403822985" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="376.1103360171766" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="399.93968634729924" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="422.90509338330054" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="461.47177314015426" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="480.2296246589878" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="501.5345464901075" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="525.106194908201" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="548.5802082174373" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="569.6819899908016" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="606.6616017911526" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="627.1551535761902" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="650.264244043597" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="674.0497851442084" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="695.950763236303" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="715.1388232170825" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="753.002379497441" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="775.4809030766708" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="799.3560773615351" cy="336" r="1.35625" opacity="0.6968085106382979"/><circle cx="-0.07965346207190038" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="18.433440063074034" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="39.30621695793213" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="62.65564555865044" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="86.32167204467366" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="107.85316395976312" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="144.96968412933808" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="165.04456121859525" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="187.8366550937717" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="211.69832291069454" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="233.99856047574218" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="253.5419353679626" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="291.01833403822985" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="313.1103360171766" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="336.93968634729924" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="359.90509338330054" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="380.1995709602199" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="398.47177314015426" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="438.5345464901075" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="462.10619490820096" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="485.58020821743736" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="506.6819899908017" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="525.3179625352535" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="543.6616017911526" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="587.264244043597" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="611.0497851442084" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="632.950763236303" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="652.1388232170825" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="670.2798543840287" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="690.002379497441" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="736.3560773615351" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="758.9844803740752" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="778.8689658943271" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="797.0351327905124" cy="352" r="1.3875" opacity="0.7180851063829787"/><circle cx="-0.34435444134956167" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="23.32167204467367" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="44.85316395976312" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="63.76147008828611" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="81.96968412933808" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="124.83665509377171" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="148.69832291069454" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="170.99856047574218" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="190.5419353679626" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="208.6676619938775" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="228.01833403822988" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="273.93968634729924" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="296.90509338330054" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="317.1995709602199" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="335.47177314015426" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="354.2296246589878" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="375.5345464901075" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="422.58020821743736" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="443.6819899908017" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="462.31796253525346" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="480.6616017911526" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="501.1551535761902" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="524.264244043597" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="569.950763236303" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="589.1388232170825" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="607.2798543840287" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="627.002379497441" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="649.4809030766708" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="673.3560773615351" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="715.8689658943271" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="734.0351327905124" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="753.0883941493876" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="774.8185724997575" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="798.554345233682" cy="368" r="1.41875" opacity="0.7393617021276595"/><circle cx="0.7614700882861087" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="18.969684129338077" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="39.044561218595256" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="61.83665509377171" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="107.9985604757422" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="127.54193536796261" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="145.6676619938775" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="165.01833403822988" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="187.11033601717665" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="210.93968634729924" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="254.1995709602199" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="272.47177314015426" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="291.2296246589878" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="312.5345464901075" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="336.10619490820096" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="359.58020821743736" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="399.31796253525346" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="417.6616017911526" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="438.1551535761902" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="461.26424404359705" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="485.0497851442084" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="506.95076323630303" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="544.2798543840287" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="564.002379497441" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="586.4809030766708" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="610.3560773615351" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="632.9844803740752" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="652.8689658943271" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="690.0883941493876" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="711.8185724997575" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="735.554345233682" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="758.7804555162534" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="779.450227819909" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="797.8672719657447" cy="384" r="1.45" opacity="0.7606382978723404"/><circle cx="-1.1633449062282915" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="22.69832291069454" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="44.998560475742195" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="82.66766199387747" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="102.01833403822988" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="124.11033601717664" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="147.93968634729924" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="170.90509338330057" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="191.1995709602199" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="228.22962465898783" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="249.53454649010754" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="273.10619490820096" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="296.58020821743736" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="317.6819899908017" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="336.31796253525346" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="375.1551535761902" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="398.26424404359705" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="422.0497851442084" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="443.95076323630303" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="463.1388232170826" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="481.27985438402874" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="523.4809030766708" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="547.3560773615351" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="569.9844803740752" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="589.8689658943271" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="608.0351327905124" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="627.0883941493876" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="672.554345233682" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="695.7804555162534" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="716.450227819909" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="734.8672719657447" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="753.4063456541681" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="774.3300131868995" cy="400" r="1.48125" opacity="0.7819148936170213"/><circle cx="1.5419353679626058" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="19.667661993877473" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="61.110336017176635" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="84.93968634729926" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="107.90509338330055" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="128.1995709602199" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="146.47177314015423" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="165.22962465898783" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="210.106194908201" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="233.58020821743736" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="254.68198999080167" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="273.31796253525346" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="291.6616017911526" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="312.1551535761902" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="359.0497851442084" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="380.95076323630303" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="400.1388232170826" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="418.27985438402874" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="438.0023794974409" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="460.4809030766707" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="506.98448037407525" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="526.8689658943271" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="545.0351327905124" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="564.0883941493876" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="585.8185724997575" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="609.554345233682" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="653.450227819909" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="671.8672719657447" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="690.4063456541681" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="711.3300131868995" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="734.7084542823204" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="758.3549411660439" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="798.7099841800929" cy="416" r="1.5125" opacity="0.8031914893617021"/><circle cx="-1.8896639828233615" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="44.90509338330055" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="65.19957096021987" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="83.47177314015424" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="102.22962465898782" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="123.53454649010753" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="147.106194908201" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="191.68198999080167" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="210.31796253525346" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="228.66160179115258" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="249.15515357619014" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="272.26424404359705" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="296.0497851442084" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="337.1388232170826" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="355.27985438402874" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="375.0023794974409" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="397.4809030766707" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="421.35607736153503" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="443.98448037407525" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="482.0351327905124" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="501.08839414938757" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="522.8185724997575" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="546.554345233682" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="569.7804555162534" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="590.450227819909" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="627.4063456541681" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="648.3300131868995" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="671.7084542823204" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="695.3549411660439" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="716.8363060020744" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="735.7099841800929" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="774.0541434928678" cy="432" r="1.54375" opacity="0.824468085106383"/><circle cx="796.8857876956857" cy="432" r="1.54375" opacity="0.824468085106383"/></g><g fill="none" stroke="#8d60ae" stroke-width="1"><path d="M120 0V500M620 0V500"/><path d="M0 120L395 240 800 115M0 430L395 240 800 440" opacity=".5"/></g></svg></div><div class="point-caption"><p class="caption">POINTS / PLANES / POSSIBILITIES</p><h1>VOLUMES</h1><p class="copy">보이지 않는 경계를, 작은 점들로 기록합니다.</p></div></section></main><script>/* Generated by scripts/build-awwwards-studies.mjs from vendor/awwwards-studies/scenes*.mjs and runtime.mjs. Edit those authoring modules for repository changes.
MIT License
Copyright (c) 2026 StyleGallery contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Scope: Newly authored HTML, CSS, JavaScript and SVG study only. This grant does not cover any referenced website, brand, article, photograph, screenshot or original asset. None is included in this package.
*/
(() => {
'use strict';
const id="awwwards-414f3783c680";
const stage=document.querySelector('.stage');
const state=window.__STYLEGALLERY_PREVIEW__={id,status:'loading',errors:[]};
const report=(error)=>{const message=error instanceof Error?error.message:String(error);if(!state.errors.includes(message))state.errors.push(message);state.status='error';document.body.dataset.previewStatus='error';parent.postMessage({type:'sg-preview-error',id,message},'*');};
addEventListener('error',event=>report(event.error||event.message));
addEventListener('unhandledrejection',event=>report(event.reason));
const query=new URLSearchParams(location.search);
document.documentElement.dataset.theme=query.get('theme')==='dark'?'dark':'light';
const reduced=matchMedia('(prefers-reduced-motion: reduce)');
stage.dataset.playing='false';
const setChoice=(group,value)=>{stage.setAttribute('data-'+group,value);stage.querySelectorAll('[data-choice-group="'+group+'"]').forEach(button=>button.setAttribute('aria-pressed',String(button.dataset.choice===value)));};
const announce=(message)=>{const output=stage.querySelector('[data-feedback]');if(output)output.textContent=message;};
stage.querySelectorAll('[data-choice-group]').forEach(button=>button.addEventListener('click',()=>setChoice(button.dataset.choiceGroup,button.dataset.choice)));
stage.querySelectorAll('[data-choice-group][aria-pressed="true"]').forEach(button=>setChoice(button.dataset.choiceGroup,button.dataset.choice));
stage.querySelectorAll('[data-range]').forEach(input=>input.addEventListener('input',()=>{stage.style.setProperty('--'+input.dataset.range,input.value);const output=stage.querySelector('[data-output="'+input.dataset.range+'"]');if(output)output.textContent=input.value;}));
stage.querySelectorAll('[data-play]').forEach(button=>button.addEventListener('click',()=>{const play=stage.dataset.playing!=='true'&&!reduced.matches;stage.dataset.playing=String(play);button.setAttribute('aria-pressed',String(play));button.textContent=play?'움직임 정지':reduced.matches?'움직임 줄이기 적용 중':'움직임 시작';}));
reduced.addEventListener('change',()=>{if(reduced.matches){stage.dataset.playing='false';stage.querySelectorAll('[data-play]').forEach(button=>{button.setAttribute('aria-pressed','false');button.textContent='움직임 줄이기 적용 중';});}});
const observe=()=>{const root=document.getElementById('root'),elements=[...root.querySelectorAll('*')],rect=root.getBoundingClientRect();parent.postMessage({type:'sg-preview-observation',id,diagnostics:{textLength:root.textContent.trim().length,elementCount:elements.length,visibleElementCount:elements.filter(element=>{const r=element.getBoundingClientRect(),s=getComputedStyle(element);return r.width>0&&r.height>0&&s.display!=='none'&&s.visibility!=='hidden'&&Number(s.opacity)!==0;}).length,images:[],canvases:[],rootRect:{width:rect.width,height:rect.height},documentWidth:document.documentElement.scrollWidth,viewportWidth:innerWidth}},'*');};
try{
}catch(error){report(error);}
requestAnimationFrame(()=>requestAnimationFrame(()=>{if(state.status!=='error'){state.status='mounted';document.body.dataset.previewStatus='mounted';parent.postMessage({type:'sg-preview-ready',id},'*');observe();setTimeout(observe,700);}}));
})();</script></body></html>
styles.css독립 구현
/* Generated by scripts/build-awwwards-studies.mjs from vendor/awwwards-studies/scenes*.mjs and runtime.mjs. Edit those authoring modules for repository changes.
MIT License
Copyright (c) 2026 StyleGallery contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Scope: Newly authored HTML, CSS, JavaScript and SVG study only. This grant does not cover any referenced website, brand, article, photograph, screenshot or original asset. None is included in this package.
*/
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}body{background:var(--bg,#f5f2eb);color:var(--fg,#181818)}button,input,select{font:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--focus,#ef6b3f);outline-offset:4px}button{color:inherit}button:disabled{cursor:default;opacity:.45}svg{display:block;max-width:100%}a{color:inherit}.stage{isolation:isolate;min-height:100vh;overflow:hidden;padding:26px;position:relative}.art{pointer-events:none}.eyebrow{font:10px/1.5 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}.topline{align-items:center;display:flex;gap:14px;justify-content:space-between;position:relative;z-index:5}.topline strong{font-size:13px;letter-spacing:-.04em}.topline nav{display:flex;gap:12px}h1,h2,p{margin:0}h1{font-size:clamp(42px,9vw,116px);font-weight:600;letter-spacing:-.065em;line-height:.94}h2{font-size:clamp(24px,4vw,44px);letter-spacing:-.04em;line-height:1.05}.serif{font-family:Georgia,'Times New Roman',serif;font-weight:400}.copy{font-size:13px;line-height:1.55;max-width:31em}.pill{align-items:center;background:var(--fg,#181818);border:1px solid transparent;border-radius:99px;color:var(--bg,#f5f2eb);display:inline-flex;gap:18px;justify-content:center;min-height:40px;padding:10px 19px;text-decoration:none}.ghost{background:transparent;border-color:currentColor;color:inherit}.small{font-size:11px}.huge{font-size:clamp(68px,18vw,220px);line-height:.8}.caption{font:10px/1.4 ui-monospace,monospace}.controls{align-items:center;display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:6}.controls button{background:transparent;border:1px solid currentColor;border-radius:999px;font-size:11px;min-height:34px;padding:7px 12px}.controls button[aria-pressed=true]{background:var(--fg);color:var(--bg)}.bottomline{align-items:end;display:flex;gap:20px;justify-content:space-between;position:relative;z-index:4}.stack{display:grid;gap:18px}.row{align-items:center;display:flex;gap:16px}.visually-hidden{clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.feedback{font-size:12px;min-height:18px}.surface{background:var(--panel,#fff);border:1px solid #8883;border-radius:16px;padding:24px}.scene-footer{bottom:13px;left:26px;position:absolute;right:26px}.artfill{height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.artfill svg{height:100%;width:100%}.line{border-top:1px solid currentColor;opacity:.4}input,select{border:1px solid #8887;border-radius:7px;min-height:38px;min-width:0;padding:8px 10px;width:100%}input[type=range]{accent-color:var(--accent,#ed6447);min-height:28px;padding:0}details>summary{cursor:pointer;list-style:none}details>summary::-webkit-details-marker{display:none}[hidden]{display:none!important}.flow{display:grid;gap:24px}dialog{background:var(--panel,#fff);border:0;border-radius:12px;color:#171717;max-width:calc(100vw - 34px);padding:28px;width:430px}dialog::backdrop{background:#111a;backdrop-filter:blur(5px)}dialog form{display:grid;gap:15px}dialog .close{background:transparent;border:0;float:right;font-size:25px}body[data-preview-status=error]::after{background:#781b21;color:white;content:'Preview error';padding:8px;position:fixed;right:0;top:0}.motion{animation-play-state:paused!important}.stage[data-playing=true] .motion{animation-play-state:running!important}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}@media(max-width:480px){.stage{padding:18px}.topline nav{gap:8px}.eyebrow{font-size:9px}.scene-footer{left:18px;right:18px}.copy{font-size:12px}.topline{gap:8px}.topline strong{font-size:12px}.surface{padding:17px}}
.stage{min-height:620px}.stage h1,.stage h2{overflow-wrap:anywhere}.topline{flex-wrap:wrap}button{max-width:100%}@media(max-width:480px){.stage{min-height:640px}}:root{--bg:#0c0b0e;--fg:#cc9ae6}.point-menu{background:#c998e7;color:#24182b;font-size:10px;padding:12px;position:relative}.point-menu p{background:#c998e7;line-height:2;min-width:190px;padding:20px;position:absolute;right:0;top:35px}.point-hall{inset:60px -15px 70px;position:absolute;z-index:-1}.point-hall svg{height:100%;width:100%}.point-caption{bottom:24px;left:26px;position:absolute;right:26px}.point-caption h1{font-size:clamp(55px,14.9vw,160px);font-weight:800;letter-spacing:-.08em;line-height:1;margin-top:12px}.point-caption .copy{color:#b5a7bd;font-size:11px;margin-top:10px}@media(max-width:480px){.point-caption{left:18px;right:18px}.point-caption h1{font-size:15vw}.point-hall{bottom:150px;left:-140px;right:-140px}}함께 쓰는 파일 3개 보기
script.js독립 구현
/* Generated by scripts/build-awwwards-studies.mjs from vendor/awwwards-studies/scenes*.mjs and runtime.mjs. Edit those authoring modules for repository changes.
MIT License
Copyright (c) 2026 StyleGallery contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Scope: Newly authored HTML, CSS, JavaScript and SVG study only. This grant does not cover any referenced website, brand, article, photograph, screenshot or original asset. None is included in this package.
*/
(() => {
'use strict';
const id="awwwards-414f3783c680";
const stage=document.querySelector('.stage');
const state=window.__STYLEGALLERY_PREVIEW__={id,status:'loading',errors:[]};
const report=(error)=>{const message=error instanceof Error?error.message:String(error);if(!state.errors.includes(message))state.errors.push(message);state.status='error';document.body.dataset.previewStatus='error';parent.postMessage({type:'sg-preview-error',id,message},'*');};
addEventListener('error',event=>report(event.error||event.message));
addEventListener('unhandledrejection',event=>report(event.reason));
const query=new URLSearchParams(location.search);
document.documentElement.dataset.theme=query.get('theme')==='dark'?'dark':'light';
const reduced=matchMedia('(prefers-reduced-motion: reduce)');
stage.dataset.playing='false';
const setChoice=(group,value)=>{stage.setAttribute('data-'+group,value);stage.querySelectorAll('[data-choice-group="'+group+'"]').forEach(button=>button.setAttribute('aria-pressed',String(button.dataset.choice===value)));};
const announce=(message)=>{const output=stage.querySelector('[data-feedback]');if(output)output.textContent=message;};
stage.querySelectorAll('[data-choice-group]').forEach(button=>button.addEventListener('click',()=>setChoice(button.dataset.choiceGroup,button.dataset.choice)));
stage.querySelectorAll('[data-choice-group][aria-pressed="true"]').forEach(button=>setChoice(button.dataset.choiceGroup,button.dataset.choice));
stage.querySelectorAll('[data-range]').forEach(input=>input.addEventListener('input',()=>{stage.style.setProperty('--'+input.dataset.range,input.value);const output=stage.querySelector('[data-output="'+input.dataset.range+'"]');if(output)output.textContent=input.value;}));
stage.querySelectorAll('[data-play]').forEach(button=>button.addEventListener('click',()=>{const play=stage.dataset.playing!=='true'&&!reduced.matches;stage.dataset.playing=String(play);button.setAttribute('aria-pressed',String(play));button.textContent=play?'움직임 정지':reduced.matches?'움직임 줄이기 적용 중':'움직임 시작';}));
reduced.addEventListener('change',()=>{if(reduced.matches){stage.dataset.playing='false';stage.querySelectorAll('[data-play]').forEach(button=>{button.setAttribute('aria-pressed','false');button.textContent='움직임 줄이기 적용 중';});}});
const observe=()=>{const root=document.getElementById('root'),elements=[...root.querySelectorAll('*')],rect=root.getBoundingClientRect();parent.postMessage({type:'sg-preview-observation',id,diagnostics:{textLength:root.textContent.trim().length,elementCount:elements.length,visibleElementCount:elements.filter(element=>{const r=element.getBoundingClientRect(),s=getComputedStyle(element);return r.width>0&&r.height>0&&s.display!=='none'&&s.visibility!=='hidden'&&Number(s.opacity)!==0;}).length,images:[],canvases:[],rootRect:{width:rect.width,height:rect.height},documentWidth:document.documentElement.scrollWidth,viewportWidth:innerWidth}},'*');};
try{
}catch(error){report(error);}
requestAnimationFrame(()=>requestAnimationFrame(()=>{if(state.status!=='error'){state.status='mounted';document.body.dataset.previewStatus='mounted';parent.postMessage({type:'sg-preview-ready',id},'*');observe();setTimeout(observe,700);}}));
})();LICENSE독립 구현
MIT License
Copyright (c) 2026 StyleGallery contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Scope: Newly authored HTML, CSS, JavaScript and SVG study only. This grant does not cover any referenced website, brand, article, photograph, screenshot or original asset. None is included in this package.
NOTES.md독립 구현
# 점으로 그린 원근 건축 공간
사례를 연구한 독립 예제입니다. 관찰된 구성을 출발점으로 새 문구·코드·SVG를 작성했습니다. 원본 구현, 자산, 상표, 문구를 재배포하지 않습니다.
새 수학적 좌표가 원근 공간의 점 장식만 담당하며 제목과 탐색은 일반 DOM으로 남습니다. 원본 점군·LiDAR·카메라 움직임은 주장하지 않습니다.
## 실행과 수정
index.html을 브라우저에서 열면 단독으로 실행됩니다. 수정할 때도 이 파일 안의 style과 script를 편집하세요. styles.css와 script.js는 읽기·복사용 사본이며 index.html에서 불러오는 파일이 아닙니다. 이 사본만 수정해도 실행 화면이 달라지지는 않습니다.
저장소 유지보수자는 vendor/awwwards-studies/scenes*.mjs와 runtime.mjs를 수정하고 node scripts/build-awwwards-studies.mjs로 모든 사본을 다시 생성합니다. 이 내부 재빌드에는 비공개 캡처 입력이 필요합니다. 다운로드한 HTML의 실행과 수정에는 캡처 입력이 필요하지 않습니다.
## 관찰과 검증
프레임 관찰 범위: observed. 원본의 시간 변화나 사용자 입력 결과를 이 예제로 입증하지 않습니다. 비공개 관찰 근거는 artifacts/full-import/awwwards/captures/awwwards-414f3783c680/frames/scene-00-f0-y0.png 및 visual-reviews.json의 같은 id 행입니다. 프레임과 행의 결합 해시는 478e00b16f0d0c275d3ea7f588673be8dd956ffd15b1b3b7e31291831c50de0e입니다. 해당 캡처는 다운로드에 포함하지 않으며, 검토에는 저장소의 비공개 아티팩트 접근이 필요합니다.
이 패키지는 네트워크 없이 실행되며 실제 구독, 예약, 결제 또는 원격 작업을 수행하지 않습니다. ready 신호는 마운트 진단이며 브라우저 검증을 뜻하지 않습니다. 움직임은 명시적으로 시작해야 하며 시스템의 움직임 줄이기 선호가 우선합니다. 시각 팔레트는 각 사례의 독립 구성에 속합니다.
consumer_reference: consumer-reference/agent-native/registry.json
BEHIND THE EXAMPLE
이 장면을 만드는 원리
점으로 그린 원근 건축 공간의 구현 계약
효과의 면적과 표현을 분리해 작은 비교를 만들고, 실행 비용과 시각 인상을 같은 주장으로 다루지 않습니다.
- 이 예제에서는
- 새 수학적 좌표가 원근 공간의 점 장식만 담당하며 제목과 탐색은 일반 DOM으로 남습니다. 원본 점군·LiDAR·카메라 움직임은 주장하지 않습니다. 이 연결은 새로 작성한 실행 코드의 계약을 설명하며, 원본의 동작을 검증했다는 뜻은 아닙니다.
코드와 함께 확인하기
코드에서 찾기
.point-menuindex.html관찰한 구도에서 출발한 새 장면의 실제 마크업·SVG·스타일입니다. 원본 사이트 코드를 뜻하지 않습니다.
직접 해보기
이 예제를 320px와 900px 너비에서 열고 점으로 그린 원근 건축 공간의 제목·설명·조작 순서를 확인합니다.
살펴볼 변화관찰의 장식 구도와 별도로 읽기 가능한 제목이 남고, 가로 스크롤 없이 핵심 조작에 도달해야 합니다.
움직임 줄이기를 적용하고 장면의 미세 요소와 읽기 표면을 비교합니다.
살펴볼 변화새 수학적 좌표가 원근 공간의 점 장식만 담당하며 제목과 탐색은 일반 DOM으로 남습니다. 원본 점군·LiDAR·카메라 움직임은 주장하지 않습니다. 이 문장은 기대 결과이며 실행 통과 기록이 아닙니다.