СТАНЬ VIP

Script

SVG Low-poly Background CSS and JS Snippet

Karen 08 сен 2017, 19:51

ANIMATED SVG LOW-POLY HEADER

Изображение



HTML
Код: Выделить всё · Развернуть
#bg


CSS (SCSS)
Код: Выделить всё · Развернуть
$colors: (
  #fff,
  #fff,
  #fff,
  #fff,
  #fff,
  #666667,
  #fff,
  #F7F7F7,
  #fff,
#fff,
);
$color: nth($colors, random(length($colors)));

html {
  background: radial-gradient(ellipse at center, $color 0%, darken($color, 20%) 70%);
  overflow: hidden;
} 



JS
Код: Выделить всё · Развернуть
var refreshDuration = 10000;
var refreshTimeout;
var numPointsX;
var numPointsY;
var unitWidth;
var unitHeight;
var points;

function onLoad()
{
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('width',window.innerWidth);
    svg.setAttribute('height',window.innerHeight);
    document.querySelector('#bg').appendChild(svg);...


[ Продолжается ]

Теги: Script
Karen
Уважаемый посетитель
Уважаемый посетитель
 
Сообщения: 213
Зарегистрирован: 02 авг 2012, 19:21


⇑ Наверх
⇓ Вниз