HTML CSS JSResult Skip Results Iframe EDIT ON /* ------- Osmo [https://osmo.supply/] ------- */ /* Osmo UI: https://slater.app/10324/23333.css */ body { background-color: #08342a; color: var(--color-light); font-size: 1vw; margin: 0; padding: 0; overscroll-behavior: none; min-height: 100%; cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b239d7aeb290a31ac5_cursor-default%402x.svg") 2 0, auto; } a, button { cursor: url("https://cdn.prod.website-files.com/6708f85ff3d3cba6aff436fb/671251b212e6b71494aa67ff_cursor-pointer%402x.svg") 12 0, pointer; } .section-resource { padding: 4em; justify-content: center; align-items: center; height: 100svh; display: flex; position: relative; } .dots-wrap { width: 100%; height: 100%; position: relative; } .dots-container { grid-column-gap: 1em; grid-row-gap: 1em; pointer-events: none; flex-flow: wrap; grid-template-rows: auto; grid-template-columns: 1fr; grid-auto-columns: 1fr; justify-content: center; align-items: center; display: flex; position: absolute; position: absolute; inset: 2rem; /* adds 2rem padding on all sides */ font-size: 4px; /* reduce dot size by 50% */ pointer-events: none; display: flex; justify-content: center; align-items: center; /* Fade effect (radial edge mask) */ -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .dots-fade-overlay { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient( circle, rgba(8, 52, 42, 0) 60%, rgba(8, 52, 42, 1) 100% ); } .dot { will-change: transform, background-color; transform-origin: center; background-color: #245e51; border-radius: 50%; width: 0.5em; height: 0.5em; position: relative; transform: translate(0); position: absolute; width: 0.5em; height: 0.5em; border-radius: 50%; background-color: #245e51; /* base dot color from your theme */ opacity: 1; pointer-events: none; transform-origin: center; will-change: transform, opacity, background-color, filter; transition: filter 0.2s ease; filter: brightness(1) blur(0.5px); } }