Эффект в стиле радужной линзы с использованием SVG/CSSCSS

Разбираемся в CSS
Ответить
Anonymous
 Эффект в стиле радужной линзы с использованием SVG/CSS

Сообщение Anonymous »

Я разрабатываю веб-сайт, изображения которого основаны на линзах, рассеивании света и т. д.
На данный момент у меня есть только несколько общих пятен фонового цвета, чтобы придать странице некоторую глубину, но я бы предпочел воссоздать что-то больше похожее на то, что изображено на картинке, где у меня есть «источник света» в левом верхнем углу страницы, а рассеянные радужные лучи появляются на немного более темном нормальном фоне.
Изображение

(текущий дизайн)

Изображение

Понятия не имею, с чего начать этот дизайн. Мой первоначальный инстинкт заключался в том, чтобы создать около 100 элементов div относительно небольшой толщины, нацелить их под немного разными углами и длинами и рандомизировать линейный градиент радуги, начиная примерно с середины их длины, при этом первая половина будет светлой. Затем примените к ним некоторую диффузию и непрозрачность, чтобы сделать их менее «присутствующими». Но это звучит как сумасшедший объем работы, и мне интересно, есть ли ярлык с использованием SVG или что-то еще, о чем я не подумал.

Подробнее здесь: https://stackoverflow.com/questions/798 ... ng-svg-css
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»