SVG花卉发生器

下载代码

html

css

分享到微信朋友圈

html

css

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  color: #000;
  text-shadow: 1px 1px 1px #fff;
  background-color: #292929;
}

#svg {
  position: fixed;
  width: 100%;
  height: 100%;
  cursor: pointer;
  filter: drop-shadow(0 0 4px #000);
}

.flower path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.layer {
  visibility: hidden;
  transform-box: fill-box;
  transform-origin: center center;
}

.layer path {
  stroke: rgba(0, 0, 0, 0.7);
  stroke-width: 0.75px;
}

.layer.show {
  visibility: visible;
  animation-name: layerAnim;
  animation-duration: 4s;
  animation-fill-mode: both;
  
}

a {
  color: #555;
  text-decoration: none;
  border-bottom: 0.25rem solid transparent;
  transition: all 0.4s;
}
a:hover {
  color: #000;
  border-bottom-color: rgba(0, 0, 0, 0.7);
}
header, footer {
  position: absolute;
  width: 100%;
  text-align: center;
}
header h1 {
  font-size: 2em;
  margin: 0.5em 0 0;
}
footer {
  bottom: 0.5em;
}

@-moz-document url-prefix() {
  #svg {
    filter: none;
  }
  .layer.show {
    filter: drop-shadow(0 0 4px #000);
  }
}

@keyframes layerAnim1 {
  from, to { animation-timing-function: ease-out; }
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes layerAnim2 {
  from, to { animation-timing-function: ease-out; }
  from { opacity: 0; transform: scale3d(0.2, 0.2, 0.2); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes layerAnim3 {
  from, to { animation-timing-function: ease-out; }
  from { opacity: 0; transform: rotateZ(-270deg); }
  to { opacity: 1; opacity: 1; transform: rotateZ(0deg); }
}

@keyframes layerAnim4 {
  from, to { animation-timing-function: ease-out; }
  from { opacity: 0; transform: rotateZ(360deg) scale3d(0.2, 0.2, 0.2); }
  to { opacity: 1; opacity: 1; transform: rotateZ(0deg) scale3d(1, 1, 1); }
}

@keyframes layerAnim5 {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

60% {
    transform: scale3d(1.03, 1.03, 1.03);
  }

80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes layerAnim6 {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

0% {
    opacity: 0;
    transform: rotateZ(180deg) scale3d(0.3, 0.3, 0.3);
  }

20% {
    transform: rotateZ(-25.71deg) scale3d(1.1, 1.1, 1.1);
  }

40% {
    transform: rotateZ(25.71deg) scale3d(0.9, 0.9, 0.9);
  }

60% {
    transform: rotateZ(-7.71deg) scale3d(1.03, 1.03, 1.03);
  }

80% {
    transform: rotateZ(7.71deg) scale3d(0.97, 0.97, 0.97);
  }

to {
    opacity: 1;
    transform: rotateZ(0deg) scale3d(1, 1, 1);
  }
}

@keyframes layerAnim7 {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

0% {
    opacity: 0;
    transform: rotateZ(-180deg) scale3d(0.3, 0.3, 0.3);
  }

20% {
    transform: rotateZ(25.71deg) scale3d(1.1, 1.1, 1.1);
  }

40% {
    transform: rotateZ(-25.71deg) scale3d(0.9, 0.9, 0.9);
  }

60% {
    transform: rotateZ(7.71deg) scale3d(1.03, 1.03, 1.03);
  }

80% {
    transform: rotateZ(-7.71deg) scale3d(0.97, 0.97, 0.97);
  }

to {
    opacity: 1;
    transform: rotateZ(0deg) scale3d(1, 1, 1);
  }
}

JavaScript

function App() {
  const svg = document.getElementById('svg');
  let width, height, cx, cy;

let zoom = 100;
  let vbOX = 0;
  let vbOY = 0;

init();

function init() {
    onResize();
    initEventHandlers();

new Flower({
      parent: svg,
      x: 0,
      y: 0,
      petals: Math.round(rnd(4, 12)),
      rings: 15,
      step: 10,
      colors: ['#21B91B', '#FFFF80', '#D1104D'],
      alpha: 0.8,
      angle: rnd(Math.PI),
      layerAnim: 'layerAnim6' });

}

function initEventHandlers() {
    window.addEventListener('resize', onResize);
    document.body.addEventListener('click', onClick);
    // window.addEventListener('wheel', onWheel);
  }

function onClick(e) {
    const iRadiusCoef = rnd(1, 8);
    const oRadiusCoef = rnd(iRadiusCoef, 8);
    new Flower({
      x: e.clientX - cx,
      y: e.clientY - cy,
      petals: Math.round(rnd(5, 12)),
      rings: Math.round(rnd(3, 8)),
      step: Math.round(rnd(3, 20)),
      alpha: rnd(0.7, 1),
      parent: svg,
      angle: rnd(Math.PI),
      iRadius: rnd(2, 5),
      iRadiusCoef,
      oRadius: rnd(5, 10),
      oRadiusCoef,
      layerAnim: 'layerAnim' + (Math.floor(rnd(7)) + 1) });

}

// function onWheel(e) {
  //   if (e.deltaY < 0) setZoom(zoom + 10);
  //   else setZoom(zoom - 10);
  // }

// function setZoom(z) {
  //   zoom = clamp(z, 70, 400);
  //   updateViewBox();
  // }

function onResize() {
    const r = svg.getBoundingClientRect();
    width = r.width;
    height = r.height;
    cx = width / 2;
    cy = height / 2;
    updateViewBox();
  }

class Flower {
  constructor(conf) {
    this.conf = conf;
    this.create();
  }
  create() {
    let { parent, x, y, petals, rings, step, colors, alpha, angle, iRadius, iRadiusCoef, oRadius, oRadiusCoef, layerAnim } = this.conf;

this.group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    this.group.classList.add('flower');
    parent.appendChild(this.group);

angle = angle || 0;
    iRadius = iRadius || 2;
    iRadiusCoef = iRadiusCoef || 5;
    oRadius = oRadius || 5;
    oRadiusCoef = oRadiusCoef || 8;
    alpha = alpha || 1;

if (!colors) {
      colors = [chroma.random(), chroma.random()];
      if (rings > 6) colors.push(chroma.random());
      // colors.forEach(c => { console.log(c.hex()); })
    }

const cscale = chroma.scale(colors);
    let layer, np, color;
    for (let i = rings; i > 0; i--) {
      layer = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      layer.classList.add('layer');
      this.group.appendChild(layer);

np = Math.floor((i + step - 1) / step) * petals;
      color = cscale(i * 1 / rings).alpha(alpha);
      this.createPetalsRing(layer, x, y, np, iRadius + i * iRadiusCoef, oRadius + i * oRadiusCoef, angle + i % 2 * Math.PI / np, color);

layer.style.animationName = layerAnim;
      layer.style.animationDuration = rings * 0.3 + 's';
      layer.style.animationDelay = i * 0.1 + 's';
      layer.classList.add('show');
    }
  }
  createPetalsRing(parent, x, y, n, iRadius, oRadius, angle, fill) {
    const da = 2 * Math.PI / n;
    const dr = oRadius - iRadius;
    const cpda = rnd(0.5 * da / 5, 1.5 * da / 5);
    const cpdr = rnd(dr / 4, dr * 1.1);
    let a;
    for (let i = 0; i < n; i++) {
      a = angle + i * da;
      new Petal({
        parent,
        x, y,
        startA: a,
        endA: a + da,
        iRadius,
        oRadius,
        cpda,
        cpdr,
        fill });

}
  }}

class Petal {
  constructor({ parent, x, y, startA, endA, iRadius, oRadius, cpda, cpdr, fill }) {
    this.parent = parent;
    this.fill = fill;

const da = endA - startA;
    const iRadius0 = iRadius / 5;
    this.sp1 = [x + Math.cos(startA + da / 2) * iRadius0, y + Math.sin(startA + da / 2) * iRadius0];
    this.cp1 = [x + Math.cos(startA - cpda) * (iRadius + cpdr), y + Math.sin(startA - cpda) * (iRadius + cpdr)];
    this.sp2 = [x + Math.cos(startA + da / 2) * iRadius0, y + Math.sin(startA + da / 2) * iRadius0];
    this.cp2 = [x + Math.cos(endA + cpda) * (iRadius + cpdr), y + Math.sin(endA + cpda) * (iRadius + cpdr)];
    this.ep = [x + Math.cos(startA + da / 2) * oRadius, y + Math.sin(startA + da / 2) * oRadius];

this.curve1 = new QCurve({ sp: this.sp1, cp: this.cp1, ep: this.ep });
    this.curve2 = new QCurve({ sp: this.sp2, cp: this.cp2, ep: this.ep });
    this.create();
  }
  create() {
    this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    this.path.setAttribute('d', this.pathD());
    this.path.style.fill = this.fill;
    this.parent.appendChild(this.path);
  }
  pathD() {
    return [
    this.curve1.pathD(),
    this.curve2.pathD()].
    join(' ');
  }}

class QCurve {
  constructor({ sp, cp, ep }) {
    this.sp = sp;
    this.cp = cp;
    this.ep = ep;
  }
  pathD() {
    return [
    `M${this.sp[0]} ${this.sp[1]}`,
    `Q${this.cp[0]} ${this.cp[1]}`,
    `${this.ep[0]} ${this.ep[1]}`].
    join(' ');
  }}

function clamp(v, min, max) {
  return Math.min(Math.max(v, min), max);
}

function rnd(min, max) {
  if (max === undefined) {max = min;min = 0;}
  return Math.random() * (max - min) + min;
}

App();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg